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

docs(radio-button): use name in examples (#1817)

Browse source
This commit is contained in:
Eric Liu 2023-10-03 06:34:01 -07:00 • committed by GitHub
commit 5ef4dc1a72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

52
docs/src/pages/components/RadioButton.svx
View file

@ -9,33 +9,9 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
## Default
<RadioButtonGroup selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
The `name` prop set on `RadioButtonGroup` is passed to the individual `RadioButton` inputs.
## With legend text
<RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
## Legend text slot
Use the named "legendText" slot to customize the legend text.
<RadioButtonGroup selected="standard">
<div slot="legendText" style="display: flex">
Storage tier (disk)
<Tooltip>
<p>
Storage tiers may vary based on geolocation.
</p>
</Tooltip>
</div>
<RadioButtonGroup legendText="Storage tier (disk)" name="plan" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
@ -53,6 +29,24 @@ Use `hideLegend` to visually hide the legend text.
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
## Legend text slot
Use the named "legendText" slot to customize the legend text.
<RadioButtonGroup name="plan" selected="standard">
<div slot="legendText" style:display="flex">
Storage tier (disk)
<Tooltip>
<p>
Storage tiers may vary based on geolocation.
</p>
</Tooltip>
</div>
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
## Reactive example
Use the `selected` prop to bind and update the selected value.
@ -61,7 +55,7 @@ Use the `selected` prop to bind and update the selected value.
## Left-aligned label text
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
@ -69,7 +63,7 @@ Use the `selected` prop to bind and update the selected value.
## Disabled buttons
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan" selected="standard">
<RadioButton disabled labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton disabled labelText="Pro (128 GB)" value="pro" />
@ -77,7 +71,7 @@ Use the `selected` prop to bind and update the selected value.
## Vertical orientation
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" selected="standard">
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="plan" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />

13
docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
View file

@ -10,15 +10,20 @@
let plan = plans[1];
</script>
<RadioButtonGroup legendText="Storage tier (disk)" bind:selected="{plan}">
{#each plans as value}
<RadioButtonGroup
legendText="Storage tier (disk)"
name="plan"
bind:selected="{plan}"
>
{#each plans as value (value)}
<RadioButton labelText="{value}" value="{value}" />
{/each}
</RadioButtonGroup>
<div style="margin: var(--cds-layout-01) 0">
{#each plans as value}
<div style="margin: var(--cds-layout-03) 0">
{#each plans as value (value)}
<Button
size="small"
kind="secondary"
disabled="{plan === value}"
on:click="{() => (plan = value)}"