docs(checkbox): add indeterminate state

liamdebeasi · liamdebeasi · commit 755dd1839c7d · 2022-09-01T13:46:16.000Z
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
@@ -30,7 +30,9 @@ import Basic from '@site/static/usage/checkbox/basic/index.md';
 
 ## Indeterminate Checkboxes
 
-TODO Playground
+import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md';
+
+<Indeterminate />
 
 ## Theming
 
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
@@ -169,7 +169,7 @@ export default function Playground({
    * load, so a loading screen is shown by default.
    * Once the source of the iframe loads we can
    * hide the loading screen and show the inner content.
-   * 
+   *
    * We call this as a local function because useEffect
    * callbacks cannot return a Promise, as async functions do.
    */
diff --git a/static/usage/checkbox/indeterminate/angular.md b/static/usage/checkbox/indeterminate/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start" [indeterminate]="true"></ion-checkbox>
+  <ion-label>Indeterminate checkbox</ion-label>
+</ion-item>
+```
diff --git a/static/usage/checkbox/indeterminate/demo.html b/static/usage/checkbox/indeterminate/demo.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+  </head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-item>
+            <ion-checkbox slot="start" indeterminate="true"></ion-checkbox>
+            <ion-label>Indeterminate checkbox</ion-label>
+          </ion-item>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/checkbox/indeterminate/index.md b/static/usage/checkbox/indeterminate/index.md
@@ -0,0 +1,16 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular
+  }}
+  src="usage/checkbox/indeterminate/demo.html"
+/>
diff --git a/static/usage/checkbox/indeterminate/javascript.md b/static/usage/checkbox/indeterminate/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start" indeterminate="true"></ion-checkbox>
+  <ion-label>Indeterminate checkbox</ion-label>
+</ion-item>
+```
diff --git a/static/usage/checkbox/indeterminate/react.md b/static/usage/checkbox/indeterminate/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import {
+  IonCheckbox,
+  IonItem,
+  IonLabel
+} from '@ionic/react';
+
+function Example() {
+  return (
+    <IonItem>
+      <IonCheckbox slot="start" indeterminate={true}></IonCheckbox>
+      <IonLabel>Indeterminate checkbox</IonLabel>
+    </IonItem>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/checkbox/indeterminate/vue.md b/static/usage/checkbox/indeterminate/vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-item>
+    <ion-checkbox slot="start" :indeterminate="true"></ion-checkbox>
+    <ion-label>Indeterminate checkbox</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import {
+    IonCheckbox,
+    IonItem,
+    IonLabel
+  } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonCheckbox,
+      IonItem,
+      IonLabel
+    }
+  });
+</script>
+```
