mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: Checkbox, Tabs, NumberInput (#1045)

Browse source 
* add `Checkbox` reactive example for `bind:checked` (#967)

* update `Checkbox` reactive example for `bind:group` to demo two-way binding

* simplify `Tabs` reactive example

* add `NumberInput` "No value" example
This commit is contained in:
metonym 2022-01-27 07:27:10 -08:00 • committed by GitHub
commit 4e3415a4e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/src/pages/framed/Checkbox/CheckboxReactive.svelte Normal file
View file

@ -0,0 +1,14 @@
<script>
import { Checkbox, Button } from "carbon-components-svelte";
let checked = false;
</script>
<Checkbox labelText="Label text" bind:checked />
<div style="margin: var(--cds-layout-01) 0">
<Button on:click="{() => (checked = !checked)}">Toggle</Button>
</div>
<strong>checked:</strong>
{checked}

16
docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
View file

@ -1,15 +1,17 @@
<script>
import { Checkbox } from "carbon-components-svelte";
import { Checkbox, Button } from "carbon-components-svelte";
let options = ["Apple", "Banana", "Coconut"];
let selection = options.slice(0, 2);
let values = ["Apple", "Banana", "Coconut"];
let group = values.slice(0, 2);
</script>
{#each options as option}
<Checkbox bind:group="{selection}" labelText="{option}" value="{option}" />
{#each values as value}
<Checkbox bind:group labelText="{value}" value="{value}" />
{/each}
<div style="margin: var(--cds-layout-01) 0">
Selected options:
<strong>{selection.join(", ")}</strong>
<Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
</div>
<strong>Selected:</strong>
{JSON.stringify(group)}

15
docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte Normal file
View file

@ -0,0 +1,15 @@
<script>
import { NumberInput, Button } from "carbon-components-svelte";
let value = null;
</script>
<NumberInput allowEmpty bind:value />
<div style="margin: var(--cds-layout-01) 0">
<Button on:click="{() => (value = null)}">Set to null</Button>
<Button on:click="{() => (value = 0)}">Set to 0</Button>
</div>
<strong>Value:</strong>
{value}

21
docs/src/pages/framed/Tabs/TabsReactive.svelte
View file

@ -15,22 +15,9 @@
</svelte:fragment>
</Tabs>
<div>
<h4>Selected index: {selected}</h4>
<div style="margin: var(--cds-layout-01) 0">
<Button on:click="{() => (selected = 1)}">Set index to 1</Button>
</div>
<div>
<Button
size="small"
disabled="{selected === 1}"
on:click="{() => (selected = 1)}"
>
Set index to 1
</Button>
</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<strong>Selected index:</strong>
{selected}