Skip to content

Commit

Permalink
docs(checkbox): add playgrounds for checkbox component (#2529)
Browse files Browse the repository at this point in the history
  • Loading branch information
@liamdebeasi
liamdebeasi authored Sep 2, 2022
1 parent bf5cd92 commit 1c8c3be
Show file tree
Hide file tree
Showing 22 changed files with 377 additions and 277 deletions.
293 changes: 17 additions & 276 deletions docs/api/checkbox.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
---
title: "ion-checkbox"
hide_table_of_contents: true
demoUrl: "/docs/demos/api/checkbox/index.html"
demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/checkbox/index.html"
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

import Props from '@site/static/auto-generated/checkbox/props.md';
import Events from '@site/static/auto-generated/checkbox/events.md';
Expand All @@ -24,17 +19,26 @@ import APITOCInline from '@components/page/api/APITOCInline';

<EncapsulationPill type="shadow" />

<h2 className="table-of-contents__title">Contents</h2>

<APITOCInline
toc={toc}
maxHeadingLevel={2}
autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
/>
Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.

## Basic

import Basic from '@site/static/usage/checkbox/basic/index.md';

Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
<Basic />

## Indeterminate Checkboxes

import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md';

<Indeterminate />

## Theming

import Theming from '@site/static/usage/checkbox/theming/index.md';

<Theming />

## Interfaces

Expand All @@ -61,269 +65,6 @@ interface CheckboxCustomEvent<T = any> extends CustomEvent {



## Usage

<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>

<TabItem value="angular">

```html
<!-- Default Checkbox -->
<ion-checkbox></ion-checkbox>

<!-- Disabled Checkbox -->
<ion-checkbox disabled="true"></ion-checkbox>

<!-- Checked Checkbox -->
<ion-checkbox checked="true"></ion-checkbox>

<!-- Checkbox Colors -->
<ion-checkbox color="primary"></ion-checkbox>
<ion-checkbox color="secondary"></ion-checkbox>
<ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="light"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>

<!-- Checkboxes in a List -->
<ion-list>
<ion-item *ngFor="let entry of form">
<ion-label>{{entry.val}}</ion-label>
<ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
</ion-item>
</ion-list>
```

```typescript
import { Component } from '@angular/core';

@Component({
selector: 'app-page-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
public form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
}
```


</TabItem>


<TabItem value="javascript">

```html
<!-- Default Checkbox -->
<ion-checkbox></ion-checkbox>

<!-- Disabled Checkbox -->
<ion-checkbox disabled></ion-checkbox>

<!-- Checked Checkbox -->
<ion-checkbox checked></ion-checkbox>

<!-- Checkbox Colors -->
<ion-checkbox color="primary"></ion-checkbox>
<ion-checkbox color="secondary"></ion-checkbox>
<ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="light"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>

<!-- Checkboxes in a List -->
<ion-list>
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
</ion-item>

<ion-item>
<ion-label>Sausage</ion-label>
<ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
</ion-item>

<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
</ion-item>
</ion-list>
```


</TabItem>


<TabItem value="react">

```tsx
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';

const checkboxList = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];

export const CheckboxExamples: React.FC = () => {

const [checked, setChecked] = useState(false);

return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>CheckboxExamples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItemDivider>Default Checkbox</IonItemDivider>
<IonItem>
<IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
<IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
</IonItem>

<IonItemDivider>Disabled Checkbox</IonItemDivider>
<IonItem><IonCheckbox slot="end" disabled={true} /></IonItem>

<IonItemDivider>Checkbox Colors</IonItemDivider>
<IonItem>
<IonCheckbox slot="end" color="primary" />
<IonCheckbox slot="end" color="secondary" />
<IonCheckbox slot="end" color="danger" />
<IonCheckbox slot="end" color="light" />
<IonCheckbox slot="end" color="dark" />
</IonItem>
<IonItemDivider>Checkboxes in a List</IonItemDivider>

{checkboxList.map(({ val, isChecked }, i) => (
<IonItem key={i}>
<IonLabel>{val}</IonLabel>
<IonCheckbox slot="end" value={val} checked={isChecked} />
</IonItem>
))}
</IonList>
</IonContent>
</IonPage>
);
};
```

</TabItem>


<TabItem value="stencil">

```tsx
import { Component, h } from '@stencil/core';

@Component({
tag: 'checkbox-example',
styleUrl: 'checkbox-example.css'
})
export class CheckboxExample {
private form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];

render() {
return [
// Default Checkbox
<ion-checkbox></ion-checkbox>,

// Disabled Checkbox
<ion-checkbox disabled={true}></ion-checkbox>,

// Checked Checkbox
<ion-checkbox checked={true}></ion-checkbox>,

// Checkbox Colors
<ion-checkbox color="primary"></ion-checkbox>,
<ion-checkbox color="secondary"></ion-checkbox>,
<ion-checkbox color="danger"></ion-checkbox>,
<ion-checkbox color="light"></ion-checkbox>,
<ion-checkbox color="dark"></ion-checkbox>,

// Checkboxes in a List
<ion-list>
{this.form.map(entry =>
<ion-item>
<ion-label>{entry.val}</ion-label>
<ion-checkbox slot="end" checked={entry.isChecked}></ion-checkbox>
</ion-item>
)}
</ion-list>
];
}
}
```


</TabItem>


<TabItem value="vue">

```html
<template>
<!-- Default Checkbox -->
<ion-checkbox></ion-checkbox>

<!-- Disabled Checkbox -->
<ion-checkbox disabled="true"></ion-checkbox>

<!-- Checked Checkbox -->
<ion-checkbox checked="true"></ion-checkbox>

<!-- Checkbox Colors -->
<ion-checkbox color="primary"></ion-checkbox>
<ion-checkbox color="secondary"></ion-checkbox>
<ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="light"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>

<!-- Checkboxes in a List -->
<ion-list>
<ion-item v-for="entry in form">
<ion-label>{{entry.val}}</ion-label>
<ion-checkbox
slot="end"
@update:modelValue="entry.isChecked = $event"
:modelValue="entry.isChecked">
</ion-checkbox>
</ion-item>
</ion-list>
</template>

<script>
import { IonCheckbox, IonItem, IonLabel, IonList } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonCheckbox, IonItem, IonLabel, IonList },
setup() {
const form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
return { form };
}
});
</script>
```

</TabItem>

</Tabs>

## Properties
<Props />

Expand All @@ -340,4 +81,4 @@ export default defineComponent({
<CustomProps />

## Slots
<Slots />
<Slots />
2 changes: 1 addition & 1 deletion src/components/global/Playground/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
6 changes: 6 additions & 0 deletions static/usage/checkbox/basic/angular.md
View file
Original file line number Diff line number Diff line change
@@ -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>
```
24 changes: 24 additions & 0 deletions static/usage/checkbox/basic/demo.html
View file
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 16 additions & 0 deletions static/usage/checkbox/basic/index.md
View file
Original file line number Diff line number Diff line change
@@ -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"
/>
6 changes: 6 additions & 0 deletions static/usage/checkbox/basic/javascript.md
View file
Original file line number Diff line number Diff line change
@@ -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>
```
Loading

1 comment on commit 1c8c3be

@vercel
Copy link

@vercel vercel bot commented on 1c8c3be Sep 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ionic-docs – ./

ionic-docs-gqykycf8t.vercel.app
ionic-docs-ionic1.vercel.app
ionic-docs-git-main-ionic1.vercel.app

Please sign in to comment.