mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
docs(radio-button): add reactive example
This commit is contained in:
parent
b10b4a4a10
commit
bc29d9ee0d
2 changed files with 42 additions and 0 deletions
|
@ -17,6 +17,12 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
|
|||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
|
||||
### Programmatic usage
|
||||
|
||||
Bind the selected value using the `selected` prop.
|
||||
|
||||
<FileSource src="/framed/RadioButton/ProgrammaticRadioButton" />
|
||||
|
||||
### Label text aligned left
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
<script>
|
||||
import {
|
||||
ButtonSet,
|
||||
Button,
|
||||
FormGroup,
|
||||
RadioButtonGroup,
|
||||
RadioButton,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
let plan = "standard";
|
||||
</script>
|
||||
|
||||
<FormGroup legendText="Storage tier (disk)">
|
||||
<RadioButtonGroup bind:selected="{plan}">
|
||||
<RadioButton labelText="Free (1 GB)" value="free" />
|
||||
<RadioButton labelText="Standard (10 GB)" value="standard" />
|
||||
<RadioButton labelText="Pro (128 GB)" value="pro" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
|
||||
<ButtonSet>
|
||||
{#each ['free', 'standard', 'pro'] as value}
|
||||
<Button
|
||||
on:click="{() => {
|
||||
plan = value;
|
||||
}}"
|
||||
>
|
||||
Select "{value}"
|
||||
</Button>
|
||||
{/each}
|
||||
</ButtonSet>
|
||||
|
||||
<div style="margin: var(--cds-layout-01) 0">
|
||||
Selected plan:
|
||||
<strong>{plan}</strong>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue