Skip to content

Commit d550f80

Browse files
brandyscarneybrandyscarney
committed
docs(demos): update chip demo
1 parent f7e4976 commit d550f80

1 file changed

Lines changed: 89 additions & 72 deletions

File tree

‎src/demos/api/chip/index.html‎

Lines changed: 89 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -24,83 +24,100 @@
2424
</ion-toolbar>
2525
</ion-header>
2626

27-
<ion-content fullscreen padding>
28-
<h2>Basic Chips</h2>
29-
<ion-chip>
30-
<ion-label>Default</ion-label>
31-
</ion-chip>
32-
<ion-chip style="border-radius: 4px;">
33-
<ion-label>Border Radius</ion-label>
34-
</ion-chip>
35-
<ion-chip>
36-
<ion-icon name="checkmark-circle"></ion-icon>
37-
<ion-label>With Icon</ion-label>
38-
</ion-chip>
39-
<ion-chip>
40-
<ion-avatar>
41-
<img
42-
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
43-
</ion-avatar>
44-
<ion-label>With Avatar</ion-label>
45-
</ion-chip>
46-
<ion-chip>
47-
<ion-avatar>
48-
<img
49-
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
50-
</ion-avatar>
51-
<ion-label>With Icon and Avatar</ion-label>
52-
<ion-icon name="close-circle"></ion-icon>
53-
</ion-chip>
27+
<ion-content fullscreen>
28+
<ion-list-header>Basic</ion-list-header>
29+
<p>
30+
<ion-chip>
31+
<ion-label>Default</ion-label>
32+
</ion-chip>
33+
<ion-chip>
34+
<ion-icon name="checkmark-circle"></ion-icon>
35+
<ion-label>Icon</ion-label>
36+
</ion-chip>
37+
<ion-chip>
38+
<ion-avatar>
39+
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
40+
</ion-avatar>
41+
<ion-label>Avatar</ion-label>
42+
</ion-chip>
43+
</p>
5444

55-
<h2>Color Chips</h2>
56-
<ion-chip color="primary">
57-
<ion-label>Primary</ion-label>
58-
</ion-chip>
59-
<ion-chip color="danger">
60-
<ion-label>Danger</ion-label>
61-
</ion-chip>
62-
<ion-chip color="tertiary">
63-
<ion-icon name="checkmark-circle"></ion-icon>
64-
<ion-label>Tertiary with Icon</ion-label>
65-
</ion-chip>
66-
<ion-chip color="primary">
67-
<ion-avatar>
68-
<img
69-
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
70-
</ion-avatar>
71-
<ion-label>Primary with Avatar</ion-label>
72-
</ion-chip>
73-
<ion-chip color="success">
74-
<ion-label>Success with Icon</ion-label>
75-
<ion-icon name="calendar"></ion-icon>
76-
</ion-chip>
45+
<ion-list-header>Colors</ion-list-header>
46+
<p>
47+
<ion-chip color="primary">
48+
<ion-label>Primary</ion-label>
49+
</ion-chip>
50+
<ion-chip color="secondary">
51+
<ion-label>Secondary</ion-label>
52+
</ion-chip>
53+
<ion-chip color="tertiary">
54+
<ion-label>Tertiary</ion-label>
55+
</ion-chip>
56+
<ion-chip color="success">
57+
<ion-label>Success</ion-label>
58+
</ion-chip>
59+
<ion-chip color="warning">
60+
<ion-label>Warning</ion-label>
61+
</ion-chip>
62+
<ion-chip color="danger">
63+
<ion-label>Danger</ion-label>
64+
</ion-chip>
65+
</p>
7766

78-
<h2>Outline Chips</h2>
79-
<ion-chip outline>
80-
<ion-label>Outline</ion-label>
81-
</ion-chip>
82-
<ion-chip outline color="danger">
83-
<ion-label>Danger Outline</ion-label>
84-
</ion-chip>
85-
<ion-chip outline color="secondary">
86-
<ion-icon name="checkmark-circle"></ion-icon>
87-
<ion-label>Secondary Outline with Icon</ion-label>
88-
</ion-chip>
89-
<ion-chip outline color="primary">
90-
<ion-label>Primary Outline with Avatar</ion-label>
91-
<ion-avatar>
92-
<img
93-
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
94-
</ion-avatar>
95-
</ion-chip>
96-
<ion-chip outline>
97-
<ion-icon name="git-pull-request"></ion-icon>
98-
<ion-label>Outline with Icon and Avatar</ion-label>
99-
<ion-icon name="close-circle"></ion-icon>
100-
</ion-chip>
67+
<ion-list-header>Outline</ion-list-header>
68+
<p>
69+
<ion-chip outline color="primary">
70+
<ion-label>Primary</ion-label>
71+
</ion-chip>
72+
<ion-chip outline color="secondary">
73+
<ion-label>Secondary</ion-label>
74+
</ion-chip>
75+
<ion-chip outline color="tertiary">
76+
<ion-label>Tertiary</ion-label>
77+
</ion-chip>
78+
<ion-chip outline color="success">
79+
<ion-label>Success</ion-label>
80+
</ion-chip>
81+
<ion-chip outline color="warning">
82+
<ion-label>Warning</ion-label>
83+
</ion-chip>
84+
<ion-chip outline color="danger">
85+
<ion-label>Danger</ion-label>
86+
</ion-chip>
87+
</p>
10188

89+
<ion-list-header>Icons</ion-list-header>
90+
<p>
91+
<ion-chip outline color="primary">
92+
<ion-icon name="pin"></ion-icon>
93+
<ion-label>Madison</ion-label>
94+
<ion-icon name="close-circle"></ion-icon>
95+
</ion-chip>
96+
<ion-chip outline color="secondary">
97+
<ion-icon name="wine"></ion-icon>
98+
<ion-label>Nightlife</ion-label>
99+
<ion-icon name="close-circle"></ion-icon>
100+
</ion-chip>
101+
<ion-chip outline color="tertiary">
102+
<ion-icon name="restaurant"></ion-icon>
103+
<ion-label>Dining</ion-label>
104+
<ion-icon name="close-circle"></ion-icon>
105+
</ion-chip>
106+
<ion-chip outline color="dark">
107+
<ion-icon name="videocam"></ion-icon>
108+
<ion-label>Entertainment</ion-label>
109+
<ion-icon name="close-circle"></ion-icon>
110+
</ion-chip>
111+
</p>
102112
</ion-content>
103113
</ion-app>
114+
115+
<style>
116+
p {
117+
margin-left: 16px;
118+
margin-top: 0;
119+
}
120+
</style>
104121
</body>
105122

106123
</html>

0 commit comments

Comments
 (0)