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

docs(selectable-tile): add use cases

Browse source
This commit is contained in:
Eric Liu 2020-12-06 11:06:02 -08:00
commit b380393973
1 changed files with 84 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

84
docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte Normal file
View file

@ -0,0 +1,84 @@
<script>
import {
SelectableTileGroup,
SelectableTile,
Button,
} from "carbon-components-svelte";
let selectedValues = ["1"];
let selectedValues2 = [];
let selectedValues3 = [
{ value: "1", selected: true },
{ value: "2", selected: false },
{ value: "3", selected: false },
];
</script>
<SelectableTileGroup
bind:selectedValues
legend="Select the options you require"
>
<SelectableTile title="Option 1" value="1">Option 1</SelectableTile>
<SelectableTile title="Option 2" value="2">Option 2</SelectableTile>
<SelectableTile title="Option 3" value="3">
Option 3 (light variant)
</SelectableTile>
</SelectableTileGroup>
<div>
{selectedValues.join(', ')}
<Button
on:click="{() => {
selectedValues = [];
}}"
>
Reset selectedValues
</Button>
</div>
<SelectableTileGroup
bind:selectedValues="{selectedValues2}"
legend="Select the options you require"
>
<SelectableTile title="Option 1" value="1">Option 1</SelectableTile>
<SelectableTile title="Option 2" value="2" selected>Option 2</SelectableTile>
<SelectableTile title="Option 3" selected value="3">
Option 3 (light variant)
</SelectableTile>
</SelectableTileGroup>
<div>
{selectedValues2.join(', ')}
<Button
on:click="{() => {
selectedValues2 = [];
}}"
>
Reset selectedValues2
</Button>
</div>
<SelectableTileGroup
selectedValues="{selectedValues3}"
legend="Select the options you require"
>
{#each selectedValues3 as item}
<SelectableTile value="{item.value}" bind:selected="{item.selected}">
{item.value}
</SelectableTile>
{/each}
</SelectableTileGroup>
<div>
{selectedValues3.map((item) => item.value).join(', ')}
<Button
on:click="{() => {
selectedValues3 = [];
}}"
>
Reset selectedValues3
</Button>
</div>