mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
41064bf2be
BREAKING CHANGES: Tab input/config options have been renamed. The following options were renamed: - `tabbarHighlight` -> `tabsHighlight` - `tabbarLayout` -> `tabsLayout` - `tabSubPages` -> `tabsHideOnSubPages` - `tabbarPlacement` -> `tabsPlacement` The previous names have been deprecated. They will still work in the current release but will be removed in the future so please update to the new names. references #7143
75 lines
2.7 KiB
HTML
75 lines
2.7 KiB
HTML
<ion-header>
|
|
|
|
<ion-navbar>
|
|
<ion-title>Tabs</ion-title>
|
|
</ion-navbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content>
|
|
<!-- Text -->
|
|
<ion-tabs>
|
|
<ion-tab tabTitle="Recents" [root]="root"></ion-tab>
|
|
<ion-tab tabTitle="Favorites" [root]="root" tabBadge="23"></ion-tab>
|
|
<ion-tab tabTitle="Settings" [root]="root"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
|
|
<!-- Icons -->
|
|
<ion-tabs selectedIndex="1" primary>
|
|
<ion-tab tabIcon="call" [root]="root"></ion-tab>
|
|
<ion-tab tabIcon="heart" [root]="root"></ion-tab>
|
|
<ion-tab tabIcon="settings" [root]="root" tabBadge="2" tabBadgeStyle="danger"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
|
|
<!-- Icons on top of text -->
|
|
<ion-tabs selectedIndex="2" secondary>
|
|
<ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab>
|
|
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="root" tabBadge="12" tabBadgeStyle="dark"></ion-tab>
|
|
<ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
|
|
<!-- Icons below text -->
|
|
<ion-tabs tabsLayout="icon-bottom" selectedIndex="1" danger>
|
|
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="47" tabBadgeStyle="light"></ion-tab>
|
|
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
|
|
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
|
|
<!-- Icons right of text -->
|
|
<ion-tabs tabsLayout="icon-right" selectedIndex="0" light>
|
|
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
|
|
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
|
|
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
|
|
<!-- Icons left of text -->
|
|
<ion-tabs tabsLayout="icon-left" dark>
|
|
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
|
|
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
|
|
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
|
|
<!-- No icons -->
|
|
<ion-tabs tabsLayout="icon-hide">
|
|
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
|
|
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="61" tabBadgeStyle="dark"></ion-tab>
|
|
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
|
|
<!-- No overflow text -->
|
|
<ion-tabs primary>
|
|
<ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark" [root]="root"></ion-tab>
|
|
<ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
|
|
<ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
|
|
</ion-tabs>
|
|
|
|
</ion-content>
|