210 lines
5.9 KiB
HTML
210 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Tab Bar - Preview</title>
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
|
<link rel="stylesheet" href="../../../../../css/ionic.bundle.css">
|
|
<link rel="stylesheet" href="../../../../../scripts/testing/styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<ion-app>
|
|
<ion-content>
|
|
<!-- Default -->
|
|
<ion-tab-bar selected-tab="1">
|
|
|
|
<ion-tab-button tab="1">
|
|
<ion-label>Recents</ion-label>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="2">
|
|
<ion-label>Favorites</ion-label>
|
|
<ion-badge>23</ion-badge>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="3">
|
|
<ion-label>Settings</ion-label>
|
|
</ion-tab-button>
|
|
|
|
</ion-tab-bar>
|
|
|
|
<!-- Badges -->
|
|
<ion-tab-bar selected-tab="1">
|
|
<ion-tab-button tab="1">
|
|
<ion-icon name="heart"></ion-icon>
|
|
<ion-label>Favorites</ion-label>
|
|
<ion-badge color="danger"></ion-badge>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="2">
|
|
<ion-icon name="musical-note"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="3">
|
|
<ion-icon name="today"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="4">
|
|
<ion-icon name="calendar"></ion-icon>
|
|
<ion-badge color="danger">47</ion-badge>
|
|
</ion-tab-button>
|
|
</ion-tab-bar>
|
|
|
|
<ion-tab-bar selected-tab="1">
|
|
<ion-tab-button tab="1">
|
|
<ion-icon name="musical-note"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="2" layout="icon-bottom">
|
|
<ion-icon name="heart"></ion-icon>
|
|
<ion-label>Favorites</ion-label>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="3">
|
|
<ion-icon name="today"></ion-icon>
|
|
<ion-badge color="danger">88</ion-badge>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="4">
|
|
<ion-icon name="calendar"></ion-icon>
|
|
</ion-tab-button>
|
|
</ion-tab-bar>
|
|
|
|
<ion-tab-bar selected-tab="1">
|
|
<ion-tab-button tab="1">
|
|
<ion-icon name="heart"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="2">
|
|
<ion-icon name="musical-note"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="3">
|
|
<ion-icon name="today"></ion-icon>
|
|
</ion-tab-button>
|
|
</ion-tab-bar>
|
|
|
|
|
|
<!-- Icons on top of text -->
|
|
<ion-tab-bar color="secondary" selected-tab="1">
|
|
<ion-tab-button tab="1">
|
|
<ion-label>Location</ion-label>
|
|
<ion-icon name="navigate"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="2">
|
|
<ion-badge color="danger">44</ion-badge>
|
|
<ion-icon name="heart"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="3">
|
|
<ion-label>Radio</ion-label>
|
|
<ion-icon name="musical-notes"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
</ion-tab-bar>
|
|
|
|
|
|
<!-- Icons below text -->
|
|
<ion-tab-bar color="dark" selected-tab="1">
|
|
<ion-tab-button tab="1" layout="icon-bottom">
|
|
<ion-label>Recents</ion-label>
|
|
<ion-icon name="call"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="2">
|
|
<ion-badge>16</ion-badge>
|
|
<ion-label>Favorites</ion-label>
|
|
<ion-icon name="heart"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="3" layout="icon-bottom">
|
|
<ion-label>Settings</ion-label>
|
|
<ion-icon name="settings"></ion-icon>
|
|
</ion-tab-button>
|
|
</ion-tab-bar>
|
|
|
|
|
|
<!-- Icons right of text -->
|
|
<ion-tab-bar color="danger" selected-tab="1">
|
|
<ion-tab-button tab="1" layout="icon-end">
|
|
<ion-label>Recents</ion-label>
|
|
<ion-icon name="call"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="2" layout="icon-end">
|
|
<ion-label>Favorites</ion-label>
|
|
<ion-icon name="heart"></ion-icon>
|
|
<ion-badge color="dark">33</ion-badge>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="3" layout="icon-end">
|
|
<ion-label>Settings</ion-label>
|
|
<ion-icon name="settings"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
</ion-tab-bar>
|
|
|
|
|
|
<!-- Icons left of text -->
|
|
<ion-tab-bar color="light" selected-tab="1">
|
|
<ion-tab-button tab="1" layout="icon-start">
|
|
<ion-label>Recents</ion-label>
|
|
<ion-icon name="call"></ion-icon>
|
|
<ion-badge color="danger">12</ion-badge>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="2" layout="icon-start">
|
|
<ion-label>Favorites</ion-label>
|
|
<ion-icon name="heart"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="3" layout="icon-start">
|
|
<ion-label>Settings</ion-label>
|
|
<ion-icon name="settings"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
</ion-tab-bar>
|
|
|
|
|
|
<!-- No icons -->
|
|
<ion-tab-bar color="primary" selected-tab="1">
|
|
<ion-tab-button tab="1" layout="icon-hide">
|
|
<ion-label>Recents</ion-label>
|
|
<ion-icon name="call"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="2" layout="icon-hide">
|
|
<ion-label>Favorites</ion-label>
|
|
<ion-icon name="heart"></ion-icon>
|
|
</ion-tab-button>
|
|
|
|
<ion-tab-button tab="3" layout="icon-hide">
|
|
<ion-label>Settings</ion-label>
|
|
<ion-icon name="settings"></ion-icon>
|
|
<ion-badge color="danger">2</ion-badge>
|
|
</ion-tab-button>
|
|
</ion-tab-bar>
|
|
</ion-content>
|
|
</ion-app>
|
|
|
|
<style>
|
|
ion-content {
|
|
--background: #f6f6f6;
|
|
}
|
|
|
|
ion-tab-bar {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
</style>
|
|
</body>
|
|
|
|
</html>
|