Add labels example to documentation

learningequality · Aug 24, 2022 · e57168e · e57168e
1 parent e26766e
commit e57168e
Showing 1 changed file with 48 additions and 0 deletions.
diff --git a/docs/pages/kcheckbox.vue b/docs/pages/kcheckbox.vue
@@ -46,6 +46,54 @@
         A user cannot enter the indeterminate state by interacting directly with the checkbox; it only occurs due to external interactions.
       </p>
     </DocsPageSection>
+
+    <DocsPageSection title="Example: Label content" anchor="#example-labels">
+      Label content can be passed via the <code>label</code> property:
+
+      <!-- eslint-disable -->
+      <!-- prevent prettier from changing indentation -->
+      <DocsShowCode language="html">
+        &lt;KCheckbox label="First lesson" /&gt;
+      </DocsShowCode>
+      <!-- eslint-enable -->
+      <DocsShow>
+        <KCheckbox label="First lesson" />
+      </DocsShow>
+
+      In more complex situations, for example when another component is responsible for rendering the label, the default slot can be used:
+
+      <!-- eslint-disable -->
+      <!-- prevent prettier from changing indentation -->
+      <DocsShowCode language="html">
+        &lt;KCheckbox&gt;
+          &lt;KLabeledIcon icon="lesson" label="First lesson" /&gt;
+        &lt;/KCheckbox&gt;
+      </DocsShowCode>
+      <!-- eslint-enable -->
+      <DocsShow>
+        <KCheckbox>
+          <KLabeledIcon icon="lesson" label="First lesson" />
+        </KCheckbox>
+      </DocsShow>
+
+      <DocsDoNot>
+        <template #not>
+          <p>Don't wrap the default slot's content in <code>&lt;label&gt;</code>:</p>
+          <!-- eslint-disable -->
+          <!-- prevent prettier from changing indentation -->
+          <DocsShowCode language="html">
+            &lt;KCheckbox&gt;
+              &lt;label&gt;
+                &lt;KLabeledIcon icon="lesson" label="First lesson" /&gt;
+              &lt;/label&gt;
+            &lt;/KCheckbox&gt;
+          </DocsShowCode>
+          <!-- eslint-enable -->
+
+          <p>That would cause two nested <code>&lt;label&gt;</code> elements to be rendered as <code>KCheckbox</code> takes care of it already.</p>
+        </template>
+      </DocsDoNot>
+    </DocsPageSection>
   </DocsPageTemplate>
 
 </template>