YouTip

Ionic tabs are horizontally arranged buttons or links used for switching navigation between pages. They can contain a combination of text and icons and are a popular navigation method on mobile devices. The following tab container uses the `tabs` class, and each tab uses the `tab-item` class. By default, the tabs are text-only and do not have icons. ### Example By default, the tab color is the default. You can set the following different color styles: `tabs-default`, `tabs-light`, `tabs-stable`, `tabs-positive`, `tabs-calm`, `tabs-balanced`, `tabs-energized`, `tabs-assertive`, `tabs-royal`, `tabs-dark`. To hide the tab bar, you can use the `tabs-item-hide` class. ### Icon Tabs Add the `tabs-icon-only` class after the `tabs` class to set icon-only tabs. ### Top Icon + Text Tabs Add the `tabs-icon-top` class after the `tabs` class to set top icon + text tabs. ### Left Icon + Text Tabs Add the `tabs-icon-left` class after the `tabs` class to set left icon + text tabs. ### Striped Style Tabs You can add `tabs-striped` to the element with the `tabs` style name to achieve Android-style tabs. You can also add `tabs-top` to place the tabs at the top of the page. The striped tab color can be controlled via `tabs-background-{color}` and `tabs-color-{color}`, where `{color}` can be: `default`, `light`, `stable`, `positive`, `calm`, `balanced`, `energized`, `assertive`, `royal`, or `dark`. Note: If you want to set a header title on the tabs, you need to use the `has-tabs-top` class. The running effect is as follows: