docs: add indeterminate demo to checkbox page

saadeghi · Mar 18, 2022 · 753d4ff · 753d4ff
1 parent ef21e94
commit 753d4ff
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/src/docs/src/routes/components/checkbox.svelte.md b/src/docs/src/routes/components/checkbox.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,15 @@ data="{[
 `<input type="checkbox" class="$$checkbox" disabled checked>`
 }</pre>
 </Component>
+
+
+<Component title="Indeterminate">
+<input type="checkbox" class="checkbox" bind:indeterminate on:click|preventDefault={()=>{}}>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<!-- You can make a checkbox indeterminate using JS -->
+<script>
+  document.getElementById("my-checkbox").indeterminate = true
+</script>
+<input type="checkbox" class="$$checkbox" id="my-checkbox">`
+}</pre>
+</Component>