Skip to content

Commit df457e4

Browse files
brandyscarneybrandyscarney
committed
docs(demos): update segment demo
1 parent 7d113e2 commit df457e4

1 file changed

Lines changed: 31 additions & 79 deletions

File tree

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

Lines changed: 31 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,24 @@
2424
</ion-toolbar>
2525
</ion-header>
2626

27-
<ion-content fullscreen padding>
27+
<ion-content fullscreen>
28+
<ion-list-header>Default</ion-list-header>
29+
2830
<!-- Label only -->
2931
<ion-segment>
3032
<ion-segment-button checked>
31-
<ion-label>Item One</ion-label>
33+
<ion-label>Call</ion-label>
3234
</ion-segment-button>
3335
<ion-segment-button>
34-
<ion-label>Item Two</ion-label>
36+
<ion-label>Favorite</ion-label>
3537
</ion-segment-button>
3638
<ion-segment-button>
37-
<ion-label>Item Three</ion-label>
39+
<ion-label>Map</ion-label>
3840
</ion-segment-button>
3941
</ion-segment>
4042

4143
<!-- Icon only -->
42-
<ion-segment>
44+
<ion-segment color="secondary">
4345
<ion-segment-button>
4446
<ion-icon name="call"></ion-icon>
4547
</ion-segment-button>
@@ -52,128 +54,78 @@
5254
</ion-segment>
5355

5456
<!-- Icon top -->
55-
<ion-segment>
57+
<ion-segment color="tertiary">
5658
<ion-segment-button>
57-
<ion-label>Item One</ion-label>
59+
<ion-label>Call</ion-label>
5860
<ion-icon name="call"></ion-icon>
5961
</ion-segment-button>
6062
<ion-segment-button checked>
61-
<ion-label>Item Two</ion-label>
63+
<ion-label>Favorite</ion-label>
6264
<ion-icon name="heart"></ion-icon>
6365
</ion-segment-button>
6466
<ion-segment-button>
65-
<ion-label>Item Three</ion-label>
67+
<ion-label>Map</ion-label>
6668
<ion-icon name="pin"></ion-icon>
6769
</ion-segment-button>
6870
</ion-segment>
6971

7072
<!-- Icon bottom -->
71-
<ion-segment>
73+
<ion-segment color="success">
7274
<ion-segment-button checked layout="icon-bottom">
7375
<ion-icon name="call"></ion-icon>
74-
<ion-label>Item One</ion-label>
76+
<ion-label>Call</ion-label>
7577
</ion-segment-button>
7678
<ion-segment-button layout="icon-bottom">
7779
<ion-icon name="heart"></ion-icon>
78-
<ion-label>Item Two</ion-label>
80+
<ion-label>Favorite</ion-label>
7981
</ion-segment-button>
8082
<ion-segment-button layout="icon-bottom">
8183
<ion-icon name="pin"></ion-icon>
82-
<ion-label>Item Three</ion-label>
84+
<ion-label>Map</ion-label>
8385
</ion-segment-button>
8486
</ion-segment>
8587

88+
<ion-list-header>Scrollable</ion-list-header>
89+
8690
<!-- Icon start -->
87-
<ion-segment scrollable>
91+
<ion-segment color="warning" scrollable>
8892
<ion-segment-button checked layout="icon-start">
89-
<ion-label>Item One</ion-label>
93+
<ion-label>Call</ion-label>
9094
<ion-icon name="call"></ion-icon>
9195
</ion-segment-button>
9296
<ion-segment-button layout="icon-start">
93-
<ion-label>Item Two</ion-label>
97+
<ion-label>Favorite</ion-label>
9498
<ion-icon name="heart"></ion-icon>
9599
</ion-segment-button>
96100
<ion-segment-button layout="icon-start">
97-
<ion-label>Item Three</ion-label>
101+
<ion-label>Map</ion-label>
98102
<ion-icon name="pin"></ion-icon>
99103
</ion-segment-button>
100104
</ion-segment>
101105

102106
<!-- Icon end -->
103-
<ion-segment scrollable>
107+
<ion-segment color="danger" scrollable>
104108
<ion-segment-button checked layout="icon-end">
105109
<ion-icon name="call"></ion-icon>
106-
<ion-label>Item One</ion-label>
107-
</ion-segment-button>
108-
<ion-segment-button disabled layout="icon-end">
109-
<ion-icon name="heart"></ion-icon>
110-
<ion-label>Item Two</ion-label>
110+
<ion-label>Call</ion-label>
111111
</ion-segment-button>
112112
<ion-segment-button layout="icon-end">
113-
<ion-icon name="pin"></ion-icon>
114-
<ion-label>Item Three</ion-label>
115-
</ion-segment-button>
116-
</ion-segment>
117-
118-
<!-- Disabled -->
119-
<ion-segment scrollable disabled>
120-
<ion-segment-button checked layout="icon-end">
121-
<ion-icon name="call"></ion-icon>
122-
<ion-label>Item One</ion-label>
123-
</ion-segment-button>
124-
<ion-segment-button layout="icon-end">
125-
<ion-icon name="heart"></ion-icon>
126-
<ion-label>Item Two</ion-label>
127-
</ion-segment-button>
128-
<ion-segment-button layout="icon-end">
129-
<ion-icon name="pin"></ion-icon>
130-
<ion-label>Item Three</ion-label>
131-
</ion-segment-button>
132-
</ion-segment>
133-
134-
<!-- Color -->
135-
<ion-segment scrollable color="secondary">
136-
<ion-segment-button checked layout="icon-end">
137-
<ion-icon name="call"></ion-icon>
138-
<ion-label>Item One</ion-label>
139-
</ion-segment-button>
140-
<ion-segment-button disabled layout="icon-end">
141113
<ion-icon name="heart"></ion-icon>
142-
<ion-label>Item Two</ion-label>
114+
<ion-label>Favorite</ion-label>
143115
</ion-segment-button>
144116
<ion-segment-button layout="icon-end">
145117
<ion-icon name="pin"></ion-icon>
146-
<ion-label>Item Three</ion-label>
118+
<ion-label>Map</ion-label>
147119
</ion-segment-button>
148120
</ion-segment>
149-
150-
<!-- Overflow Icons -->
151-
<ion-segment scrollable color="tertiary">
152-
<ion-segment-button>
153-
<ion-icon name="home"></ion-icon>
154-
</ion-segment-button>
155-
<ion-segment-button checked>
156-
<ion-icon name="heart"></ion-icon>
157-
</ion-segment-button>
158-
<ion-segment-button>
159-
<ion-icon name="pin"></ion-icon>
160-
</ion-segment-button>
161-
<ion-segment-button>
162-
<ion-icon name="star"></ion-icon>
163-
</ion-segment-button>
164-
<ion-segment-button>
165-
<ion-icon name="call"></ion-icon>
166-
</ion-segment-button>
167-
<ion-segment-button>
168-
<ion-icon name="globe"></ion-icon>
169-
</ion-segment-button>
170-
<ion-segment-button>
171-
<ion-icon name="basket"></ion-icon>
172-
</ion-segment-button>
173-
</ion-segment>
174-
175121
</ion-content>
176122
</ion-app>
123+
124+
<style>
125+
ion-segment {
126+
padding: 5px;
127+
}
128+
</style>
177129
</body>
178130

179131
</html>

0 commit comments

Comments
 (0)