|
51 | 51 | <ion-list-header> |
52 | 52 | <ion-label> Inside Avatar </ion-label> |
53 | 53 | </ion-list-header> |
| 54 | + |
54 | 55 | <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin"> |
55 | 56 | <ion-avatar size="xxsmall"> |
56 | 57 | <img src="/src/components/avatar/test/avatar.svg" /> |
|
105 | 106 | </div> |
106 | 107 | </ion-list> |
107 | 108 |
|
108 | | - |
109 | 109 | <ion-list id="tab-button"> |
110 | 110 | <ion-list-header> |
111 | | - <ion-label> Inside Tab Button </ion-label> |
| 111 | + <ion-label> Inside Tab Button - Top Icon </ion-label> |
112 | 112 | </ion-list-header> |
| 113 | + |
113 | 114 | <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin"> |
114 | 115 | <ion-tab-bar> |
115 | 116 | <ion-tab-button href="" tab="tab-one"> |
|
139 | 140 | </ion-tab-button> |
140 | 141 | </ion-tab-bar> |
141 | 142 | </div> |
142 | | - |
143 | 143 | <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin"> |
144 | 144 | <ion-tab-bar> |
145 | 145 | <ion-tab-button href="" tab="tab-one"> |
|
169 | 169 | </ion-tab-button> |
170 | 170 | </ion-tab-bar> |
171 | 171 | </div> |
| 172 | + </ion-list> |
172 | 173 |
|
173 | | - |
| 174 | + <ion-list id="tab-button-icon-bottom"> |
| 175 | + <ion-list-header> |
| 176 | + <ion-label> Inside Tab Button - Bottom Icon </ion-label> |
| 177 | + </ion-list-header> |
174 | 178 |
|
175 | | - </ion-list> |
| 179 | + <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin"> |
| 180 | + <ion-tab-bar> |
| 181 | + <ion-tab-button href="" tab="tab-one" layout="icon-bottom"> |
| 182 | + <ion-label>Tab One</ion-label> |
| 183 | + <ion-icon name="star"></ion-icon> |
| 184 | + <ion-badge size="xxsmall" vertical="top" color="danger">9</ion-badge> |
| 185 | + </ion-tab-button> |
| 186 | + |
| 187 | + <ion-tab-button tab="schedule" class="e2eTabTwoButton" layout="icon-bottom"> |
| 188 | + <ion-label>Tab Two</ion-label> |
| 189 | + <ion-icon name="globe"></ion-icon> |
| 190 | + <ion-badge size="xxsmall" vertical="top" color="primary"> |
| 191 | + <ion-icon name="star"></ion-icon> |
| 192 | + </ion-badge> |
| 193 | + </ion-tab-button> |
| 194 | + |
| 195 | + <ion-tab-button tab="tab-three" layout="icon-bottom"> |
| 196 | + <ion-label>Tab Three</ion-label> |
| 197 | + <ion-icon name="logo-facebook"></ion-icon> |
| 198 | + <ion-badge size="xxsmall" vertical="top" color="warning">999</ion-badge> |
| 199 | + </ion-tab-button> |
| 200 | + |
| 201 | + <ion-tab-button tab="tab-four" class="e2eTabFourButton" layout="icon-bottom"> |
| 202 | + <ion-label>Tab Four</ion-label> |
| 203 | + <ion-icon name="chatbox"></ion-icon> |
| 204 | + <ion-badge size="xxsmall" vertical="top" color="success"></ion-badge> |
| 205 | + </ion-tab-button> |
| 206 | + </ion-tab-bar> |
| 207 | + </div> |
| 208 | + <div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin"> |
| 209 | + <ion-tab-bar> |
| 210 | + <ion-tab-button href="" tab="tab-one" layout="icon-bottom"> |
| 211 | + <ion-label>Tab One</ion-label> |
| 212 | + <ion-icon name="star"></ion-icon> |
| 213 | + <ion-badge size="xxsmall" vertical="bottom" color="danger">9</ion-badge> |
| 214 | + </ion-tab-button> |
176 | 215 |
|
| 216 | + <ion-tab-button tab="schedule" class="e2eTabTwoButton" layout="icon-bottom"> |
| 217 | + <ion-label>Tab Two</ion-label> |
| 218 | + <ion-icon name="globe"></ion-icon> |
| 219 | + <ion-badge size="xxsmall" vertical="bottom" color="primary"> |
| 220 | + <ion-icon name="star"></ion-icon> |
| 221 | + </ion-badge> |
| 222 | + </ion-tab-button> |
| 223 | + |
| 224 | + <ion-tab-button tab="tab-three" layout="icon-bottom"> |
| 225 | + <ion-label>Tab Three</ion-label> |
| 226 | + <ion-icon name="logo-facebook"></ion-icon> |
| 227 | + <ion-badge size="xxsmall" vertical="bottom" color="warning">999</ion-badge> |
| 228 | + </ion-tab-button> |
| 229 | + |
| 230 | + <ion-tab-button tab="tab-four" class="e2eTabFourButton" layout="icon-bottom"> |
| 231 | + <ion-label>Tab Four</ion-label> |
| 232 | + <ion-icon name="chatbox"></ion-icon> |
| 233 | + <ion-badge size="xxsmall" vertical="bottom" color="success"></ion-badge> |
| 234 | + </ion-tab-button> |
| 235 | + </ion-tab-bar> |
| 236 | + </div> |
| 237 | + </ion-list> |
177 | 238 | </ion-content> |
178 | 239 | </ion-app> |
179 | 240 | </body> |
|
0 commit comments