Merge branch 'aarondoet-patch-1'

themesberg · Aug 24, 2024 · a8139ce · a8139ce
2 parents c6ff423 + 678ce21
commit a8139ce
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/lib/forms/Toggle.svelte b/src/lib/forms/Toggle.svelte
@@ -36,10 +36,11 @@
 
   let divClass: string;
 
-  $: divClass = twMerge(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[($$restProps.color as FormColorType) ?? 'primary'], sizes[size], 'relative', $$props.classDiv);
+  $: divClass = twMerge(common, $$slots.offLabel ? "ms-3" : "", background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[($$restProps.color as FormColorType) ?? 'primary'], sizes[size], 'relative', $$props.classDiv);
 </script>
 
 <Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
+  <slot name="offLabel"></slot>
   <span class={divClass}></span>
   <slot></slot>
 </Checkbox>

diff --git a/src/routes/docs/forms/toggle.md b/src/routes/docs/forms/toggle.md
@@ -70,14 +70,27 @@ Get started with the default toggle component example as a checkbox element to r
 <Toggle size="custom" {customSize}>Custom toggle</Toggle>
 ```
 
+## Label for off state
+
+```svelte example class="flex flex-col gap-2"
+<script>
+  import { Toggle } from 'flowbite-svelte';
+</script>
+
+<Toggle>
+  <svelte:fragment slot="offLabel">dark mode</svelte:fragment>
+  light mode
+</Toggle>
+```
+
 ## Component data
 
 The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
 
 ### Toggle styling
 
 - Use the `class` prop to overwrite the `Checkbox` component.
-- Use the 'classDiv`prop to overwrite the`divClass`.
+- Use the `classDiv` prop to overwrite the `divClass`.
 
 <CompoAttributesViewer {components}/>