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

docs(radio-tile): use "name" in docs

Browse source
This commit is contained in:
metonym 2023-10-03 11:02:02 -07:00
commit 5676a70648
3 changed files with 19 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

24
docs/src/pages/components/RadioTile.svx
View file

@ -9,14 +9,14 @@ components: ["TileGroup", "RadioTile"]
## Default ## Default
<TileGroup legend="Service pricing tiers"> <TileGroup legend="Service pricing tiers" name="plan" selected="standard">
<RadioTile value="0" checked> <RadioTile value="lite">
Lite plan Lite plan
</RadioTile> </RadioTile>
<RadioTile value="1"> <RadioTile value="standard">
Standard plan Standard plan
</RadioTile> </RadioTile>
<RadioTile value="2"> <RadioTile value="plus">
Plus plan Plus plan
</RadioTile> </RadioTile>
</TileGroup> </TileGroup>
@ -33,28 +33,28 @@ Binding to the `selected` prop is a more concise approach to managing state.
## Light variant ## Light variant
<TileGroup legend="Service pricing tiers"> <TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
<RadioTile light value="0" checked> <RadioTile light value="lite">
Lite plan Lite plan
</RadioTile> </RadioTile>
<RadioTile light value="1"> <RadioTile light value="standard">
Standard plan Standard plan
</RadioTile> </RadioTile>
<RadioTile light value="2"> <RadioTile light value="plus">
Plus plan Plus plan
</RadioTile> </RadioTile>
</TileGroup> </TileGroup>
## Disabled state ## Disabled state
<TileGroup legend="Service pricing tiers"> <TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
<RadioTile value="0" checked> <RadioTile value="lite" disabled>
Lite plan Lite plan
</RadioTile> </RadioTile>
<RadioTile value="1" disabled> <RadioTile value="standard">
Standard plan Standard plan
</RadioTile> </RadioTile>
<RadioTile value="2" disabled> <RadioTile value="plus" disabled>
Plus plan Plus plan
</RadioTile> </RadioTile>
</TileGroup> </TileGroup>

4
docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
View file

@ -3,10 +3,10 @@
const values = ["Lite plan", "Standard plan", "Plus plan"]; const values = ["Lite plan", "Standard plan", "Plus plan"];
let selected = values[0]; let selected = values[1];
</script> </script>
<TileGroup legend="Service pricing tiers" bind:selected> <TileGroup legend="Service pricing tiers" name="plan" bind:selected>
{#each values as value} {#each values as value}
<RadioTile value="{value}">{value}</RadioTile> <RadioTile value="{value}">{value}</RadioTile>
{/each} {/each}

8
docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
View file

@ -3,16 +3,18 @@
const values = ["Lite plan", "Standard plan", "Plus plan"]; const values = ["Lite plan", "Standard plan", "Plus plan"];
let selected = values[0]; let selected = values[1];
</script> </script>
<TileGroup <TileGroup
legend="Service pricing tiers" legend="Service pricing tiers"
name="plan"
on:select="{({ detail }) => (selected = detail)}" on:select="{({ detail }) => (selected = detail)}"
> >
{#each values as value} {#each values as value}
<RadioTile value="{value}" checked="{selected === value}">{value}</RadioTile <RadioTile value="{value}" checked="{selected === value}">
> {value}
</RadioTile>
{/each} {/each}
</TileGroup> </TileGroup>