296 lines
9.8 KiB
HTML
296 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Segment - Toolbar</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
|
<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></head>
|
|
|
|
<body>
|
|
<ion-app>
|
|
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>Segment - Toolbar</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar>
|
|
<ion-segment value="Top">
|
|
<ion-segment-button value="Paid">
|
|
<ion-label>Paid</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Free">
|
|
<ion-label>Free</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Top">
|
|
<ion-label>Top</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar class="themed">
|
|
<ion-segment value="Top">
|
|
<ion-segment-button value="Paid">
|
|
<ion-label>Paid</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Free">
|
|
<ion-label>Free</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Top">
|
|
<ion-label>Top</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar color="primary">
|
|
<ion-segment value="Free">
|
|
<ion-segment-button value="Paid">
|
|
<ion-label>Paid</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Free">
|
|
<ion-label>Free</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Top">
|
|
<ion-label>Top</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar color="secondary">
|
|
<ion-segment value="Top">
|
|
<ion-segment-button value="Paid">
|
|
<ion-label>Paid</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Free">
|
|
<ion-label>Free</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Top">
|
|
<ion-label>Top</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar color="danger">
|
|
<ion-segment name="dynamicPropDisable" disabled>
|
|
<ion-segment-button value="Bookmarks">
|
|
<ion-label>Bookmarks</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Reading List">
|
|
<ion-label>Reading List</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="Shared Links">
|
|
<ion-label>Shared Links</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar color="dark">
|
|
<ion-segment name="dynamicAttrElem" value="active">
|
|
<ion-segment-button value="active">
|
|
<ion-label>Active</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
|
|
<ion-label>Disabled</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="inactive" disabled="false">
|
|
<ion-label>Inactive</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar>
|
|
<ion-segment value="rainy">
|
|
<ion-segment-button value="sunny">
|
|
<ion-label>Sunny</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="rainy">
|
|
<ion-label>Rainy</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar color="primary">
|
|
<ion-segment color="light" value="rainy">
|
|
<ion-segment-button value="sunny">
|
|
Sunny
|
|
</ion-segment-button>
|
|
<ion-segment-button value="rainy">
|
|
Rainy
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<!-- Label only -->
|
|
<ion-toolbar color="warning">
|
|
<ion-segment value="1">
|
|
<ion-segment-button value="1">
|
|
<ion-label>Item One</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="2">
|
|
<ion-label>Item Two</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="3">
|
|
<ion-label>Item Three</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<!-- Icon only -->
|
|
<ion-toolbar color="secondary">
|
|
<ion-segment value="heart">
|
|
<ion-segment-button value="call">
|
|
<ion-icon name="call"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="heart">
|
|
<ion-icon name="heart"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="pin">
|
|
<ion-icon name="pin"></ion-icon>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<!-- Icon top -->
|
|
<ion-toolbar color="danger">
|
|
<ion-segment value="2">
|
|
<ion-segment-button value="1">
|
|
<ion-label>Item One</ion-label>
|
|
<ion-icon name="call"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="2">
|
|
<ion-label>Item Two</ion-label>
|
|
<ion-icon name="heart"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="3">
|
|
<ion-label>Item Three</ion-label>
|
|
<ion-icon name="pin"></ion-icon>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<!-- Icon bottom -->
|
|
<ion-toolbar color="tertiary">
|
|
<ion-segment value="1">
|
|
<ion-segment-button value="1" layout="icon-bottom">
|
|
<ion-icon name="call"></ion-icon>
|
|
<ion-label>Item One</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="2" layout="icon-bottom">
|
|
<ion-icon name="heart"></ion-icon>
|
|
<ion-label>Item Two</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="3" layout="icon-bottom">
|
|
<ion-icon name="pin"></ion-icon>
|
|
<ion-label>Item Three</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<!-- Icon start -->
|
|
<ion-toolbar color="dark">
|
|
<ion-segment value="1">
|
|
<ion-segment-button value="1" layout="icon-start">
|
|
<ion-label>Item One</ion-label>
|
|
<ion-icon name="call"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="2" layout="icon-start">
|
|
<ion-label>Item Two</ion-label>
|
|
<ion-icon name="heart"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="3" layout="icon-start">
|
|
<ion-label>Item Three</ion-label>
|
|
<ion-icon name="pin"></ion-icon>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<!-- Icon end -->
|
|
<ion-toolbar color="medium">
|
|
<ion-segment value="1">
|
|
<ion-segment-button value="1" layout="icon-end">
|
|
<ion-icon name="call"></ion-icon>
|
|
<ion-label>Item One</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="2" layout="icon-end">
|
|
<ion-icon name="heart"></ion-icon>
|
|
<ion-label>Item Two</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="3" layout="icon-end">
|
|
<ion-icon name="pin"></ion-icon>
|
|
<ion-label>Item Three</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<!-- Disabled -->
|
|
<ion-toolbar color="success">
|
|
<ion-segment disabled value="1">
|
|
<ion-segment-button value="1" layout="icon-end">
|
|
<ion-icon name="call"></ion-icon>
|
|
<ion-label>Item One</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="2" layout="icon-end">
|
|
<ion-icon name="heart"></ion-icon>
|
|
<ion-label>Item Two</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="3" layout="icon-end">
|
|
<ion-icon name="pin"></ion-icon>
|
|
<ion-label>Item Three</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<!-- Color -->
|
|
<ion-toolbar color="light">
|
|
<ion-segment color="secondary" value="1">
|
|
<ion-segment-button value="1" layout="icon-end">
|
|
<ion-icon name="call"></ion-icon>
|
|
<ion-label>Item One</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="2" layout="icon-end">
|
|
<ion-icon name="heart"></ion-icon>
|
|
<ion-label>Item Two</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="3" layout="icon-end">
|
|
<ion-icon name="pin"></ion-icon>
|
|
<ion-label>Item Three</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
</ion-header>
|
|
|
|
<ion-content class="ion-padding">
|
|
Segment in Toolbar
|
|
</ion-content>
|
|
|
|
<style>
|
|
.themed {
|
|
--ion-toolbar-background: #3880ff;
|
|
}
|
|
|
|
.ios .themed {
|
|
--ion-toolbar-segment-background: rgba(255, 255, 255, 0.11);
|
|
--ion-toolbar-segment-color: #fff;
|
|
|
|
--ion-toolbar-segment-color-checked: #3880ff;
|
|
}
|
|
|
|
.md .themed {
|
|
--ion-toolbar-segment-color: rgba(255, 255, 255, 0.6);
|
|
--ion-toolbar-segment-color-checked: #fff;
|
|
|
|
--ion-toolbar-segment-indicator-color: #fff;
|
|
}
|
|
</style>
|
|
|
|
</ion-app>
|
|
</body>
|
|
|
|
</html>
|