mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
docs(radio-button): simplify reactive example (#1012)
* docs(radio-button): simplify reactive radio button example * docs(radio-button): rename to "Reactive example"
This commit is contained in:
parent
e5f77aa614
commit
58de79d66b
3 changed files with 35 additions and 38 deletions
32
docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
Normal file
32
docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
Normal file
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
import {
|
||||
Button,
|
||||
RadioButtonGroup,
|
||||
RadioButton,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
const plans = ["Free (1 GB)", "Standard (10 GB)", "Pro (128 GB)"];
|
||||
|
||||
let plan = plans[1];
|
||||
</script>
|
||||
|
||||
<RadioButtonGroup legendText="Storage tier (disk)" bind:selected="{plan}">
|
||||
{#each plans as value}
|
||||
<RadioButton labelText="{value}" value="{value}" />
|
||||
{/each}
|
||||
</RadioButtonGroup>
|
||||
|
||||
<div style="margin: var(--cds-layout-01) 0">
|
||||
{#each plans as value}
|
||||
<Button
|
||||
kind="secondary"
|
||||
disabled="{plan === value}"
|
||||
on:click="{() => (plan = value)}"
|
||||
>
|
||||
Select "{value}"
|
||||
</Button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
Selected plan:
|
||||
<strong>{plan}</strong>
|
Loading…
Add table
Add a link
Reference in a new issue