Skip to content

Commit 1c8c3be

Browse files
liamdebeasiliamdebeasi
authored
docs(checkbox): add playgrounds for checkbox component (#2529)
1 parent bf5cd92 commit 1c8c3be

File tree

22 files changed

+377
-277
lines changed

22 files changed

+377
-277
lines changed

‎docs/api/checkbox.md‎

Lines changed: 17 additions & 276 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
---
22
title: "ion-checkbox"
3-
hide_table_of_contents: true
4-
demoUrl: "/docs/demos/api/checkbox/index.html"
5-
demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/checkbox/index.html"
63
---
7-
import Tabs from '@theme/Tabs';
8-
import TabItem from '@theme/TabItem';
94

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

2520
<EncapsulationPill type="shadow" />
2621

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

29-
<APITOCInline
30-
toc={toc}
31-
maxHeadingLevel={2}
32-
autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
33-
/>
23+
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.
3424

25+
## Basic
3526

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

37-
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.
29+
<Basic />
30+
31+
## Indeterminate Checkboxes
32+
33+
import Indeterminate from '@site/static/usage/checkbox/indeterminate/index.md';
34+
35+
<Indeterminate />
36+
37+
## Theming
38+
39+
import Theming from '@site/static/usage/checkbox/theming/index.md';
40+
41+
<Theming />
3842

3943
## Interfaces
4044

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

6266

6367

64-
## Usage
65-
66-
<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' }]}>
67-
68-
<TabItem value="angular">
69-
70-
```html
71-
<!-- Default Checkbox -->
72-
<ion-checkbox></ion-checkbox>
73-
74-
<!-- Disabled Checkbox -->
75-
<ion-checkbox disabled="true"></ion-checkbox>
76-
77-
<!-- Checked Checkbox -->
78-
<ion-checkbox checked="true"></ion-checkbox>
79-
80-
<!-- Checkbox Colors -->
81-
<ion-checkbox color="primary"></ion-checkbox>
82-
<ion-checkbox color="secondary"></ion-checkbox>
83-
<ion-checkbox color="danger"></ion-checkbox>
84-
<ion-checkbox color="light"></ion-checkbox>
85-
<ion-checkbox color="dark"></ion-checkbox>
86-
87-
<!-- Checkboxes in a List -->
88-
<ion-list>
89-
<ion-item *ngFor="let entry of form">
90-
<ion-label>{{entry.val}}</ion-label>
91-
<ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
92-
</ion-item>
93-
</ion-list>
94-
```
95-
96-
```typescript
97-
import { Component } from '@angular/core';
98-
99-
@Component({
100-
selector: 'app-page-home',
101-
templateUrl: 'home.page.html',
102-
styleUrls: ['home.page.scss']
103-
})
104-
export class HomePage {
105-
public form = [
106-
{ val: 'Pepperoni', isChecked: true },
107-
{ val: 'Sausage', isChecked: false },
108-
{ val: 'Mushroom', isChecked: false }
109-
];
110-
}
111-
```
112-
113-
114-
</TabItem>
115-
116-
117-
<TabItem value="javascript">
118-
119-
```html
120-
<!-- Default Checkbox -->
121-
<ion-checkbox></ion-checkbox>
122-
123-
<!-- Disabled Checkbox -->
124-
<ion-checkbox disabled></ion-checkbox>
125-
126-
<!-- Checked Checkbox -->
127-
<ion-checkbox checked></ion-checkbox>
128-
129-
<!-- Checkbox Colors -->
130-
<ion-checkbox color="primary"></ion-checkbox>
131-
<ion-checkbox color="secondary"></ion-checkbox>
132-
<ion-checkbox color="danger"></ion-checkbox>
133-
<ion-checkbox color="light"></ion-checkbox>
134-
<ion-checkbox color="dark"></ion-checkbox>
135-
136-
<!-- Checkboxes in a List -->
137-
<ion-list>
138-
<ion-item>
139-
<ion-label>Pepperoni</ion-label>
140-
<ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
141-
</ion-item>
142-
143-
<ion-item>
144-
<ion-label>Sausage</ion-label>
145-
<ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
146-
</ion-item>
147-
148-
<ion-item>
149-
<ion-label>Mushrooms</ion-label>
150-
<ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
151-
</ion-item>
152-
</ion-list>
153-
```
154-
155-
156-
</TabItem>
157-
158-
159-
<TabItem value="react">
160-
161-
```tsx
162-
import React, { useState } from 'react';
163-
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';
164-
165-
const checkboxList = [
166-
{ val: 'Pepperoni', isChecked: true },
167-
{ val: 'Sausage', isChecked: false },
168-
{ val: 'Mushroom', isChecked: false }
169-
];
170-
171-
export const CheckboxExamples: React.FC = () => {
172-
173-
const [checked, setChecked] = useState(false);
174-
175-
return (
176-
<IonPage>
177-
<IonHeader>
178-
<IonToolbar>
179-
<IonTitle>CheckboxExamples</IonTitle>
180-
</IonToolbar>
181-
</IonHeader>
182-
<IonContent>
183-
<IonList>
184-
<IonItemDivider>Default Checkbox</IonItemDivider>
185-
<IonItem>
186-
<IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
187-
<IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
188-
</IonItem>
189-
190-
<IonItemDivider>Disabled Checkbox</IonItemDivider>
191-
<IonItem><IonCheckbox slot="end" disabled={true} /></IonItem>
192-
193-
<IonItemDivider>Checkbox Colors</IonItemDivider>
194-
<IonItem>
195-
<IonCheckbox slot="end" color="primary" />
196-
<IonCheckbox slot="end" color="secondary" />
197-
<IonCheckbox slot="end" color="danger" />
198-
<IonCheckbox slot="end" color="light" />
199-
<IonCheckbox slot="end" color="dark" />
200-
</IonItem>
201-
<IonItemDivider>Checkboxes in a List</IonItemDivider>
202-
203-
{checkboxList.map(({ val, isChecked }, i) => (
204-
<IonItem key={i}>
205-
<IonLabel>{val}</IonLabel>
206-
<IonCheckbox slot="end" value={val} checked={isChecked} />
207-
</IonItem>
208-
))}
209-
</IonList>
210-
</IonContent>
211-
</IonPage>
212-
);
213-
};
214-
```
215-
216-
</TabItem>
217-
218-
219-
<TabItem value="stencil">
220-
221-
```tsx
222-
import { Component, h } from '@stencil/core';
223-
224-
@Component({
225-
tag: 'checkbox-example',
226-
styleUrl: 'checkbox-example.css'
227-
})
228-
export class CheckboxExample {
229-
private form = [
230-
{ val: 'Pepperoni', isChecked: true },
231-
{ val: 'Sausage', isChecked: false },
232-
{ val: 'Mushroom', isChecked: false }
233-
];
234-
235-
render() {
236-
return [
237-
// Default Checkbox
238-
<ion-checkbox></ion-checkbox>,
239-
240-
// Disabled Checkbox
241-
<ion-checkbox disabled={true}></ion-checkbox>,
242-
243-
// Checked Checkbox
244-
<ion-checkbox checked={true}></ion-checkbox>,
245-
246-
// Checkbox Colors
247-
<ion-checkbox color="primary"></ion-checkbox>,
248-
<ion-checkbox color="secondary"></ion-checkbox>,
249-
<ion-checkbox color="danger"></ion-checkbox>,
250-
<ion-checkbox color="light"></ion-checkbox>,
251-
<ion-checkbox color="dark"></ion-checkbox>,
252-
253-
// Checkboxes in a List
254-
<ion-list>
255-
{this.form.map(entry =>
256-
<ion-item>
257-
<ion-label>{entry.val}</ion-label>
258-
<ion-checkbox slot="end" checked={entry.isChecked}></ion-checkbox>
259-
</ion-item>
260-
)}
261-
</ion-list>
262-
];
263-
}
264-
}
265-
```
266-
267-
268-
</TabItem>
269-
270-
271-
<TabItem value="vue">
272-
273-
```html
274-
<template>
275-
<!-- Default Checkbox -->
276-
<ion-checkbox></ion-checkbox>
277-
278-
<!-- Disabled Checkbox -->
279-
<ion-checkbox disabled="true"></ion-checkbox>
280-
281-
<!-- Checked Checkbox -->
282-
<ion-checkbox checked="true"></ion-checkbox>
283-
284-
<!-- Checkbox Colors -->
285-
<ion-checkbox color="primary"></ion-checkbox>
286-
<ion-checkbox color="secondary"></ion-checkbox>
287-
<ion-checkbox color="danger"></ion-checkbox>
288-
<ion-checkbox color="light"></ion-checkbox>
289-
<ion-checkbox color="dark"></ion-checkbox>
290-
291-
<!-- Checkboxes in a List -->
292-
<ion-list>
293-
<ion-item v-for="entry in form">
294-
<ion-label>{{entry.val}}</ion-label>
295-
<ion-checkbox
296-
slot="end"
297-
@update:modelValue="entry.isChecked = $event"
298-
:modelValue="entry.isChecked">
299-
</ion-checkbox>
300-
</ion-item>
301-
</ion-list>
302-
</template>
303-
304-
<script>
305-
import { IonCheckbox, IonItem, IonLabel, IonList } from '@ionic/vue';
306-
import { defineComponent } from 'vue';
307-
308-
export default defineComponent({
309-
components: { IonCheckbox, IonItem, IonLabel, IonList },
310-
setup() {
311-
const form = [
312-
{ val: 'Pepperoni', isChecked: true },
313-
{ val: 'Sausage', isChecked: false },
314-
{ val: 'Mushroom', isChecked: false }
315-
];
316-
317-
return { form };
318-
}
319-
});
320-
</script>
321-
```
322-
323-
</TabItem>
324-
325-
</Tabs>
326-
32768
## Properties
32869
<Props />
32970

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

34283
## Slots
343-
<Slots />
84+
<Slots />

‎src/components/global/Playground/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@ export default function Playground({
169169
* load, so a loading screen is shown by default.
170170
* Once the source of the iframe loads we can
171171
* hide the loading screen and show the inner content.
172-
*
172+
*
173173
* We call this as a local function because useEffect
174174
* callbacks cannot return a Promise, as async functions do.
175175
*/

‎static/usage/checkbox/basic/angular.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
```html
2+
<ion-item>
3+
<ion-checkbox slot="start"></ion-checkbox>
4+
<ion-label>I agree to the terms and conditions</ion-label>
5+
</ion-item>
6+
```

‎static/usage/checkbox/basic/demo.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Checkbox</title>
7+
<link rel="stylesheet" href="../../common.css" />
8+
<script src="../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
11+
</head>
12+
<body>
13+
<ion-app>
14+
<ion-content>
15+
<div class="container">
16+
<ion-item>
17+
<ion-checkbox slot="start"></ion-checkbox>
18+
<ion-label>I agree to the terms and conditions</ion-label>
19+
</ion-item>
20+
</div>
21+
</ion-content>
22+
</ion-app>
23+
</body>
24+
</html>

‎static/usage/checkbox/basic/index.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground
9+
code={{
10+
javascript,
11+
react,
12+
vue,
13+
angular
14+
}}
15+
src="usage/checkbox/basic/demo.html"
16+
/>

‎static/usage/checkbox/basic/javascript.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
```html
2+
<ion-item>
3+
<ion-checkbox slot="start"></ion-checkbox>
4+
<ion-label>I agree to the terms and conditions</ion-label>
5+
</ion-item>
6+
```

0 commit comments

Comments
 (0)