Skip to content

Commit 98cd370

Browse files
sean-perkinssean-perkins
authored
docs(chip): playground examples (#2480)
1 parent f2e622f commit 98cd370

27 files changed

+463
-316
lines changed

‎docs/api/chip.md

Lines changed: 12 additions & 316 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
---
22
title: "ion-chip"
3-
hide_table_of_contents: true
4-
demoUrl: "/docs/demos/api/chip/index.html"
5-
demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/chip/index.html"
63
---
7-
import Tabs from '@theme/Tabs';
8-
import TabItem from '@theme/TabItem';
9-
104
import Props from '@site/static/auto-generated/chip/props.md';
115
import Events from '@site/static/auto-generated/chip/events.md';
126
import Methods from '@site/static/auto-generated/chip/methods.md';
@@ -24,330 +18,32 @@ import APITOCInline from '@components/page/api/APITOCInline';
2418

2519
<EncapsulationPill type="shadow" />
2620

27-
<h2 className="table-of-contents__title">Contents</h2>
28-
29-
<APITOCInline
30-
toc={toc}
31-
maxHeadingLevel={2}
32-
autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
33-
/>
34-
35-
36-
3721
Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.
3822

23+
## Basic
3924

25+
import BasicExample from '@site/static/usage/chip/basic/index.md';
4026

41-
## Usage
42-
43-
<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' }]}>
44-
45-
<TabItem value="angular">
46-
47-
```html
48-
<ion-chip>
49-
<ion-label>Default</ion-label>
50-
</ion-chip>
51-
52-
<ion-chip>
53-
<ion-label color="secondary">Secondary Label</ion-label>
54-
</ion-chip>
55-
56-
<ion-chip color="secondary">
57-
<ion-label color="dark">Secondary w/ Dark label</ion-label>
58-
</ion-chip>
59-
60-
<ion-chip [disabled]="true">
61-
<ion-label>Disabled Chip</ion-label>
62-
</ion-chip>
63-
64-
<ion-chip>
65-
<ion-icon name="pin"></ion-icon>
66-
<ion-label>Default</ion-label>
67-
</ion-chip>
68-
69-
<ion-chip>
70-
<ion-icon name="heart" color="dark"></ion-icon>
71-
<ion-label>Default</ion-label>
72-
</ion-chip>
73-
74-
<ion-chip>
75-
<ion-label>Button Chip</ion-label>
76-
<ion-icon name="close-circle"></ion-icon>
77-
</ion-chip>
78-
79-
<ion-chip>
80-
<ion-icon name="pin" color="primary"></ion-icon>
81-
<ion-label>Icon Chip</ion-label>
82-
<ion-icon name="close"></ion-icon>
83-
</ion-chip>
84-
85-
<ion-chip>
86-
<ion-avatar>
87-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
88-
</ion-avatar>
89-
<ion-label>Avatar Chip</ion-label>
90-
<ion-icon name="close-circle"></ion-icon>
91-
</ion-chip>
92-
```
93-
94-
95-
</TabItem>
96-
97-
98-
<TabItem value="javascript">
99-
100-
```html
101-
<ion-chip>
102-
<ion-label>Default</ion-label>
103-
</ion-chip>
104-
105-
<ion-chip>
106-
<ion-label color="secondary">Secondary Label</ion-label>
107-
</ion-chip>
108-
109-
<ion-chip color="secondary">
110-
<ion-label color="dark">Secondary w/ Dark label</ion-label>
111-
</ion-chip>
112-
113-
<ion-chip disabled="true">
114-
<ion-label>Disabled Chip</ion-label>
115-
</ion-chip>
116-
117-
<ion-chip>
118-
<ion-icon name="pin"></ion-icon>
119-
<ion-label>Default</ion-label>
120-
</ion-chip>
121-
122-
<ion-chip>
123-
<ion-icon name="heart" color="dark"></ion-icon>
124-
<ion-label>Default</ion-label>
125-
</ion-chip>
126-
127-
<ion-chip>
128-
<ion-label>Button Chip</ion-label>
129-
<ion-icon name="close-circle"></ion-icon>
130-
</ion-chip>
131-
132-
<ion-chip>
133-
<ion-icon name="pin" color="primary"></ion-icon>
134-
<ion-label>Icon Chip</ion-label>
135-
<ion-icon name="close"></ion-icon>
136-
</ion-chip>
137-
138-
<ion-chip>
139-
<ion-avatar>
140-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
141-
</ion-avatar>
142-
<ion-label>Avatar Chip</ion-label>
143-
<ion-icon name="close-circle"></ion-icon>
144-
</ion-chip>
145-
```
146-
147-
148-
</TabItem>
149-
150-
151-
<TabItem value="react">
152-
153-
```tsx
154-
import React from 'react';
155-
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonChip, IonLabel, IonIcon, IonAvatar } from '@ionic/react';
156-
import { pin, heart, closeCircle, close } from 'ionicons/icons';
157-
158-
export const ChipExamples: React.FC = () => {
159-
return (
160-
<IonPage>
161-
<IonHeader>
162-
<IonToolbar>
163-
<IonTitle>ChipExamples</IonTitle>
164-
</IonToolbar>
165-
</IonHeader>
166-
<IonContent>
167-
<IonChip>
168-
<IonLabel>Default</IonLabel>
169-
</IonChip>
170-
171-
<IonChip>
172-
<IonLabel color="secondary">Secondary Label</IonLabel>
173-
</IonChip>
174-
175-
<IonChip color="secondary">
176-
<IonLabel color="dark">Secondary w/ Dark label</IonLabel>
177-
</IonChip>
178-
179-
<IonChip disabled={true}>
180-
<IonLabel>Disabled Chip</IonLabel>
181-
</IonChip>
182-
183-
<IonChip>
184-
<IonIcon icon={pin} />
185-
<IonLabel>Default</IonLabel>
186-
</IonChip>
187-
188-
<IonChip>
189-
<IonIcon icon={heart} color="dark" />
190-
<IonLabel>Default</IonLabel>
191-
</IonChip>
192-
193-
<IonChip>
194-
<IonLabel>Button Chip</IonLabel>
195-
<IonIcon icon={closeCircle} />
196-
</IonChip>
197-
198-
<IonChip>
199-
<IonIcon icon={pin} color="primary" />
200-
<IonLabel>Icon Chip</IonLabel>
201-
<IonIcon icon={close} />
202-
</IonChip>
203-
204-
<IonChip>
205-
<IonAvatar>
206-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
207-
</IonAvatar>
208-
<IonLabel>Avatar Chip</IonLabel>
209-
<IonIcon icon={closeCircle} />
210-
</IonChip>
211-
</IonContent>
212-
</IonPage>
213-
);
214-
};
215-
216-
```
217-
218-
219-
</TabItem>
220-
221-
222-
<TabItem value="stencil">
223-
224-
```tsx
225-
import { Component, h } from '@stencil/core';
226-
227-
@Component({
228-
tag: 'chip-example',
229-
styleUrl: 'chip-example.css'
230-
})
231-
export class ChipExample {
232-
render() {
233-
return [
234-
<ion-chip>
235-
<ion-label>Default</ion-label>
236-
</ion-chip>,
237-
238-
<ion-chip>
239-
<ion-label color="secondary">Secondary Label</ion-label>
240-
</ion-chip>,
241-
242-
<ion-chip color="secondary">
243-
<ion-label color="dark">Secondary w/ Dark label</ion-label>
244-
</ion-chip>,
245-
246-
<ion-chip>
247-
<ion-icon name="pin"></ion-icon>
248-
<ion-label>Default</ion-label>
249-
</ion-chip>,
250-
251-
<ion-chip>
252-
<ion-icon name="heart" color="dark"></ion-icon>
253-
<ion-label>Default</ion-label>
254-
</ion-chip>,
255-
256-
<ion-chip>
257-
<ion-label>Button Chip</ion-label>
258-
<ion-icon name="close-circle"></ion-icon>
259-
</ion-chip>,
260-
261-
<ion-chip>
262-
<ion-icon name="pin" color="primary"></ion-icon>
263-
<ion-label>Icon Chip</ion-label>
264-
<ion-icon name="close"></ion-icon>
265-
</ion-chip>,
266-
267-
<ion-chip>
268-
<ion-avatar>
269-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
270-
</ion-avatar>
271-
<ion-label>Avatar Chip</ion-label>
272-
<ion-icon name="close-circle"></ion-icon>
273-
</ion-chip>
274-
];
275-
}
276-
}
277-
```
278-
279-
</TabItem>
280-
281-
282-
<TabItem value="vue">
283-
284-
```html
285-
<template>
286-
<ion-chip>
287-
<ion-label>Default</ion-label>
288-
</ion-chip>
289-
290-
<ion-chip>
291-
<ion-label color="secondary">Secondary Label</ion-label>
292-
</ion-chip>
293-
294-
<ion-chip color="secondary">
295-
<ion-label color="dark">Secondary w/ Dark label</ion-label>
296-
</ion-chip>
297-
298-
<ion-chip :disabled="true">
299-
<ion-label>Disabled Chip</ion-label>
300-
</ion-chip>
301-
302-
<ion-chip>
303-
<ion-icon :icon="pin"></ion-icon>
304-
<ion-label>Default</ion-label>
305-
</ion-chip>
27+
<BasicExample />
30628

307-
<ion-chip>
308-
<ion-icon :icon="heart" color="dark"></ion-icon>
309-
<ion-label>Default</ion-label>
310-
</ion-chip>
29+
## Colors
31130

312-
<ion-chip>
313-
<ion-label>Button Chip</ion-label>
314-
<ion-icon :icon="closeCircle"></ion-icon>
315-
</ion-chip>
31+
import ColorExample from '@site/static/usage/chip/color/index.md';
31632

317-
<ion-chip>
318-
<ion-icon :icon="pin" color="primary"></ion-icon>
319-
<ion-label>Icon Chip</ion-label>
320-
<ion-icon :icon="close"></ion-icon>
321-
</ion-chip>
33+
<ColorExample />
32234

323-
<ion-chip>
324-
<ion-avatar>
325-
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
326-
</ion-avatar>
327-
<ion-label>Avatar Chip</ion-label>
328-
<ion-icon :icon="closeCircle"></ion-icon>
329-
</ion-chip>
330-
</template>
33135

332-
<script>
333-
import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/vue';
334-
import { close, closeCircle, heart, pin } from 'ionicons/icons';
36+
## Slotting Components and Icons
33537

336-
import { defineComponent } from 'vue';
38+
import SlotExample from '@site/static/usage/chip/slots/index.md';
33739

338-
export default defineComponent({
339-
components: { IonAvatar, IonChip, IonIcon, IonLabel },
340-
setup() {
341-
return { close, closeCircle, heart, pin }
342-
}
343-
});
344-
</script>
345-
```
40+
<SlotExample />
34641

42+
## Styling
34743

348-
</TabItem>
44+
import StylingExample from '@site/static/usage/chip/styling/index.md';
34945

350-
</Tabs>
46+
<StylingExample />
35147

35248
## Properties
35349
<Props />

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<ion-chip>Default</ion-chip>
3+
<ion-chip [disabled]="true">Disabled</ion-chip>
4+
<ion-chip [outline]="true">Outline</ion-chip>
5+
```

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Chip</title>
8+
<link rel="stylesheet" href="../../common.css" />
9+
<script src="../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
13+
</head>
14+
15+
<body>
16+
<ion-app>
17+
<ion-content>
18+
<div class="container">
19+
<ion-chip>Default</ion-chip>
20+
<ion-chip disabled="true">Disabled</ion-chip>
21+
<ion-chip outline="true">Outline</ion-chip>
22+
</div>
23+
</ion-content>
24+
</ion-app>
25+
</body>
26+
27+
</html>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
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 code={{ javascript, react, vue, angular }} src="usage/chip/basic/demo.html" />

0 commit comments

Comments
 (0)