mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
190 lines
10 KiB
HTML
190 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="ionic">
|
|
<head>
|
|
<script src="../../dist/js/ionic.bundle.js"></script>
|
|
<meta charset="utf-8">
|
|
<title>Tabs: Android Colors</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
|
<link href="../../dist/css/ionic.css" rel="stylesheet">
|
|
<style>
|
|
.tabs, .view{
|
|
position:relative !important;
|
|
}
|
|
.spacer{
|
|
margin-top: 100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="bar bar-header bar-positive has-tabs-top">
|
|
<h1 class="title">Android Tab Bars</h1>
|
|
</header>
|
|
|
|
<div class="tabs-background-positive tabs-color-energized tabs-top tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="tabs-light tabs-top tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="tabs-stable tabs-top tabs-background-balanced tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="tabs-positive tabs-top tabs-background-assertive tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="tabs-calm tabs-top tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="tabs-assertive tabs-top tabs-background-dark tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="tabs-balanced tabs-top tabs-background-calm tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="tabs-energized tabs-top tabs-background-royal tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="tabs-royal tabs-top tabs-background-stable tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="tabs-dark tabs-top tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="view tabs-light tabs-striped spacer">
|
|
<nav class="tabs ">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="view tabs-striped">
|
|
<nav class="tabs ">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="view tabs-stable tabs-background-balanced tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="view tabs-color-positive tabs-background-dark tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="view tabs-calm tabs-background-royal tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="view tabs-assertive tabs-background-energized tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="view tabs-color-balanced tabs-background-positive tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="view tabs-energized tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="view tabs-royal tabs-background-assertive tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
<div class="view tabs-dark tabs-striped">
|
|
<nav class="tabs">
|
|
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
|
|
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
|
|
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
|
|
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
|
|
</nav>
|
|
</div>
|
|
</body>
|
|
</html>
|