docs/components/radio-groups/ vertical example #1089 (#1091)

* docs/components/radio-groups/ vertical example #1089 Example of vertical layout of RadioGroup * delete leading space in sample code @niktek Also fixed the sample I copied from. * simplify the example to just the vertical part * Implement unique name for group selection state --------- Co-authored-by: endigo9740 <[email protected]>
skeletonlabs · Mar 7, 2023 · 8a1187e · 8a1187e
1 parent c186ac8
commit 8a1187e
Showing 1 changed file with 28 additions and 5 deletions.
diff --git a/src/routes/(inner)/components/radio-groups/+page.svelte b/src/routes/(inner)/components/radio-groups/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+ import DocsPreview from '$docs/components/DocsPreview/DocsPreview.svelte';
  import DocsShell from '$docs/layouts/DocsShell/DocsShell.svelte';
  import { DocsFeature, type DocsShellSettings } from '$docs/layouts/DocsShell/types';
- import DocsPreview from '$docs/components/DocsPreview/DocsPreview.svelte';
  // Components
  import RadioGroup from '$lib/components/Radio/RadioGroup.svelte';
  import RadioItem from '$lib/components/Radio/RadioItem.svelte';
@@ -32,7 +32,9 @@
 
  // Local
  let justify: number = 0;
- let time: string = 'months';
+ let timeHorz: string = 'months';
+ let timeVert: string = 'Millennia';
+ let timeNames = ['Millennia', 'Epochs', 'Eras', 'Eons'];
 </script>
 
 <DocsShell {settings}>
@@ -65,7 +67,7 @@
  <RadioItem bind:group={value} name="justify" value={1}>(label)</RadioItem>
  <RadioItem bind:group={value} name="justify" value={2}>(label)</RadioItem>
 </RadioGroup>
- `}
+`}
  />
  </svelte:fragment>
  </DocsPreview>
@@ -85,8 +87,8 @@
  <DocsPreview background="neutral">
  <svelte:fragment slot="preview">
  <RadioGroup active="variant-filled-primary" hover="hover:variant-soft-primary">
- <RadioItem bind:group={time} name="time" value="months">Months</RadioItem>
- <RadioItem bind:group={time} name="time" value="years">Years</RadioItem>
+ <RadioItem bind:group={timeHorz} name="time" value="months">Months</RadioItem>
+ <RadioItem bind:group={timeHorz} name="time" value="years">Years</RadioItem>
  </RadioGroup>
  </svelte:fragment>
  <svelte:fragment slot="source">
@@ -97,6 +99,27 @@
  </svelte:fragment>
  </DocsPreview>
  </section>
+ <section class="space-y-4">
+ <h2>Vertical</h2>
+ <p>Set <em>display</em> to <code>flex-col</code> for a vertical layout.</p>
+ <DocsPreview background="neutral">
+ <svelte:fragment slot="preview">
+ <RadioGroup rounded="rounded-container-token" display="flex-col">
+ {#each timeNames as name, i}
+ <RadioItem bind:group={timeVert} label={name} {name} value={name}>{name}</RadioItem>
+ {/each}
+ </RadioGroup>
+ </svelte:fragment>
+ <svelte:fragment slot="source">
+ <CodeBlock
+ language="html"
+ code={`
+<RadioGroup rounded="rounded-container-token" display="flex-col">...</RadioGroup>
+`}
+ />
+ </svelte:fragment>
+ </DocsPreview>
+ </section>
  <section class="space-y-4">
  <h2>Full Width</h2>
  <p>Set <em>display</em> to <code>flex</code> to stretch and fill the full width.</p>