Skip to content

Commit ea88a80

Browse files
nolimits4webnolimits4web
committed
KS: Outline chips demos
1 parent 4b4a4ab commit ea88a80

File tree

3 files changed

+68
-9
lines changed

3 files changed

+68
-9
lines changed

‎kitchen-sink/core/pages/chips.html‎

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,24 +30,42 @@
3030
<div class="chip-label">Last One</div>
3131
</div>
3232
</div>
33+
<div class="block-title">Outline Chips</div>
34+
<div class="block block-strong">
35+
<div class="chip chip-outline">
36+
<div class="chip-label">Example Chip</div>
37+
</div>
38+
<div class="chip chip-outline">
39+
<div class="chip-label">Another Chip</div>
40+
</div>
41+
<div class="chip chip-outline">
42+
<div class="chip-label">One More Chip</div>
43+
</div>
44+
<div class="chip chip-outline">
45+
<div class="chip-label">Fourth Chip</div>
46+
</div>
47+
<div class="chip chip-outline">
48+
<div class="chip-label">Last One</div>
49+
</div>
50+
</div>
3351
<div class="block-title">Icon Chips</div>
3452
<div class="block block-strong">
3553
<div class="chip">
36-
<div class="chip-media {{#if $theme.md}}bg-color-blue{{/if}}">
54+
<div class="chip-media bg-color-blue">
3755
<i class="icon f7-icons ios-only">add_round</i>
3856
<i class="icon material-icons md-only">add_circle</i>
3957
</div>
4058
<div class="chip-label">Add Contact</div>
4159
</div>
4260
<div class="chip">
43-
<div class="chip-media {{#if $theme.md}}bg-color-green{{/if}}">
61+
<div class="chip-media bg-color-green">
4462
<i class="icon f7-icons ios-only">compass</i>
4563
<i class="icon material-icons md-only">location_on</i>
4664
</div>
4765
<div class="chip-label">London</div>
4866
</div>
4967
<div class="chip">
50-
<div class="chip-media {{#if $theme.md}}bg-color-red{{/if}}">
68+
<div class="chip-media bg-color-red">
5169
<i class="icon f7-icons ios-only">person</i>
5270
<i class="icon material-icons md-only">person</i>
5371
</div>
@@ -123,6 +141,21 @@
123141
<div class="chip color-pink">
124142
<div class="chip-label">Pink Chip</div>
125143
</div>
144+
<div class="chip chip-outline color-red">
145+
<div class="chip-label">Red Chip</div>
146+
</div>
147+
<div class="chip chip-outline color-green">
148+
<div class="chip-label">Green Chip</div>
149+
</div>
150+
<div class="chip chip-outline color-blue">
151+
<div class="chip-label">Blue Chip</div>
152+
</div>
153+
<div class="chip chip-outline color-orange">
154+
<div class="chip-label">Orange Chip</div>
155+
</div>
156+
<div class="chip chip-outline color-pink">
157+
<div class="chip-label">Pink Chip</div>
158+
</div>
126159
</div>
127160
</div>
128161
</div>

‎kitchen-sink/react/src/pages/chips.jsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,23 @@ export default class extends React.Component {
1818
<Chip text="Fourth Chip" />
1919
<Chip text="Last One" />
2020
</Block>
21+
<BlockTitle>Outline Chips</BlockTitle>
22+
<Block strong>
23+
<Chip outline text="Example Chip" />
24+
<Chip outline text="Another Chip" />
25+
<Chip outline text="One More Chip" />
26+
<Chip outline text="Fourth Chip" />
27+
<Chip outline text="Last One" />
28+
</Block>
2129
<BlockTitle>Icon Chips</BlockTitle>
2230
<Block strong>
23-
<Chip text="Add Contact" mediaBgColor={this.$theme.md ? 'blue' : undefined}>
31+
<Chip text="Add Contact" mediaBgColor="blue">
2432
<Icon slot="media" ios="f7:add_round" md="material:add_circle"></Icon>
2533
</Chip>
26-
<Chip text="London" mediaBgColor={this.$theme.md ? 'green' : undefined}>
34+
<Chip text="London" mediaBgColor="green">
2735
<Icon slot="media" ios="f7:compass" md="material:location_on"></Icon>
2836
</Chip>
29-
<Chip text="John Doe" mediaBgColor={this.$theme.md ? 'red' : undefined}>
37+
<Chip text="John Doe" mediaBgColor="red">
3038
<Icon slot="media" ios="f7:person" md="material:person"></Icon>
3139
</Chip>
3240
</Block>
@@ -65,6 +73,11 @@ export default class extends React.Component {
6573
<Chip text="Blue Chip" color="blue" />
6674
<Chip text="Orange Chip" color="orange" />
6775
<Chip text="Pink Chip" color="pink" />
76+
<Chip outline text="Red Chip" color="red" />
77+
<Chip outline text="Green Chip" color="green" />
78+
<Chip outline text="Blue Chip" color="blue" />
79+
<Chip outline text="Orange Chip" color="orange" />
80+
<Chip outline text="Pink Chip" color="pink" />
6881
</Block>
6982
</Page>
7083
)

‎kitchen-sink/vue/src/pages/chips.vue‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,23 @@
99
<f7-chip text="Fourth Chip"></f7-chip>
1010
<f7-chip text="Last One"></f7-chip>
1111
</f7-block>
12+
<f7-block-title>Outline Chips</f7-block-title>
13+
<f7-block strong>
14+
<f7-chip outline text="Example Chip"></f7-chip>
15+
<f7-chip outline text="Another Chip"></f7-chip>
16+
<f7-chip outline text="One More Chip"></f7-chip>
17+
<f7-chip outline text="Fourth Chip"></f7-chip>
18+
<f7-chip outline text="Last One"></f7-chip>
19+
</f7-block>
1220
<f7-block-title>Icon Chips</f7-block-title>
1321
<f7-block strong>
14-
<f7-chip text="Add Contact" :media-bg-color="$theme.md ? 'blue' : undefined">
22+
<f7-chip text="Add Contact" media-bg-color="blue">
1523
<f7-icon slot="media" ios="f7:add_round" md="material:add_circle"></f7-icon>
1624
</f7-chip>
17-
<f7-chip text="London" :media-bg-color="$theme.md ? 'green' : undefined">
25+
<f7-chip text="London" media-bg-color="green">
1826
<f7-icon slot="media" ios="f7:compass" md="material:location_on"></f7-icon>
1927
</f7-chip>
20-
<f7-chip text="John Doe" :media-bg-color="$theme.md ? 'red' : undefined">
28+
<f7-chip text="John Doe" media-bg-color="red">
2129
<f7-icon slot="media" ios="f7:person" md="material:person"></f7-icon>
2230
</f7-chip>
2331
</f7-block>
@@ -56,6 +64,11 @@
5664
<f7-chip text="Blue Chip" color="blue"></f7-chip>
5765
<f7-chip text="Orange Chip" color="orange"></f7-chip>
5866
<f7-chip text="Pink Chip" color="pink"></f7-chip>
67+
<f7-chip outline text="Red Chip" color="red"></f7-chip>
68+
<f7-chip outline text="Green Chip" color="green"></f7-chip>
69+
<f7-chip outline text="Blue Chip" color="blue"></f7-chip>
70+
<f7-chip outline text="Orange Chip" color="orange"></f7-chip>
71+
<f7-chip outline text="Pink Chip" color="pink"></f7-chip>
5972
</f7-block>
6073
</f7-page>
6174
</template>

0 commit comments

Comments
 (0)