docs: add indeterminate demo to toggle page

saadeghi · Mar 18, 2022 · ef21e94 · ef21e94
1 parent f68fc08
commit ef21e94
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/docs/src/routes/components/toggle.svelte.md b/src/docs/src/routes/components/toggle.svelte.md
@@ -9,6 +9,7 @@ published: true
   import ClassTable from "@components/ClassTable.svelte"
   import { prefix } from '$lib/stores';
   import { replace } from '$lib/actions';
+  let indeterminate = true;
 </script>
 
 <ClassTable
@@ -128,3 +129,14 @@ data="{[
 `<input type="checkbox" class="$$toggle" disabled checked>`
 }</pre>
 </Component>
+
+<Component title="Indeterminate">
+<input type="checkbox" class="toggle" bind:indeterminate on:click|preventDefault={()=>{}}>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<!-- You can make a toggle indeterminate using JS -->
+<script>
+  document.getElementById("my-toggle").indeterminate = true
+</script>
+<input type="checkbox" class="$$toggle" id="my-toggle">`
+}</pre>
+</Component>