mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +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 ## Default
<RadioButtonGroup selected="standard"> The `name` prop set on `RadioButtonGroup` is passed to the individual `RadioButton` inputs.
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
## With legend text <RadioButtonGroup legendText="Storage tier (disk)" name="plan" selected="standard">
<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>
<RadioButton labelText="Free (1 GB)" value="free" /> <RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" /> <RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" /> <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" /> <RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup> </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 ## Reactive example
Use the `selected` prop to bind and update the selected value. 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 ## 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="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" /> <RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" /> <RadioButton labelText="Pro (128 GB)" value="pro" />
@ -69,7 +63,7 @@ Use the `selected` prop to bind and update the selected value.
## Disabled buttons ## 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 disabled labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" /> <RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton disabled labelText="Pro (128 GB)" value="pro" /> <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 ## 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="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" /> <RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" /> <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]; let plan = plans[1];
</script> </script>
<RadioButtonGroup legendText="Storage tier (disk)" bind:selected="{plan}"> <RadioButtonGroup
{#each plans as value} legendText="Storage tier (disk)"
name="plan"
bind:selected="{plan}"
>
{#each plans as value (value)}
<RadioButton labelText="{value}" value="{value}" /> <RadioButton labelText="{value}" value="{value}" />
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--cds-layout-03) 0">
{#each plans as value} {#each plans as value (value)}
<Button <Button
size="small"
kind="secondary" kind="secondary"
disabled="{plan === value}" disabled="{plan === value}"
on:click="{() => (plan = value)}" on:click="{() => (plan = value)}"