docs(checkbox): add basic playground (#2517)

liamdebeasi · web-flow · commit 4a89860413f9 · 2022-09-01T09:23:00.000-04:00
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
@@ -24,7 +24,9 @@ Checkboxes allow the selection of multiple options from a set of options. They a
 
 ## Basic
 
-TODO Playground
+import Basic from '@site/static/usage/checkbox/basic/index.md';
+
+<Basic />
 
 ## Indeterminate Checkboxes
 
diff --git a/static/usage/checkbox/basic/angular.md b/static/usage/checkbox/basic/angular.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start"></ion-checkbox>
+  <ion-label>I agree to the terms and conditions</ion-label>
+</ion-item>
+```
diff --git a/static/usage/checkbox/basic/demo.html b/static/usage/checkbox/basic/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"></ion-checkbox>
+            <ion-label>I agree to the terms and conditions</ion-label>
+          </ion-item>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/checkbox/basic/index.md b/static/usage/checkbox/basic/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/basic/demo.html"
+/>
diff --git a/static/usage/checkbox/basic/javascript.md b/static/usage/checkbox/basic/javascript.md
@@ -0,0 +1,6 @@
+```html
+<ion-item>
+  <ion-checkbox slot="start"></ion-checkbox>
+  <ion-label>I agree to the terms and conditions</ion-label>
+</ion-item>
+```
diff --git a/static/usage/checkbox/basic/react.md b/static/usage/checkbox/basic/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"></IonCheckbox>
+      <IonLabel>I agree to the terms and conditions</IonLabel>
+    </IonItem>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/checkbox/basic/vue.md b/static/usage/checkbox/basic/vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-item>
+    <ion-checkbox slot="start"></ion-checkbox>
+    <ion-label>I agree to the terms and conditions</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>
+```
