210 lines
6.5 KiB
HTML
210 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Segment - Colors</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 - Colors</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content class="ion-padding">
|
|
<!-- Default NO COLOR -->
|
|
<ion-segment value="free">
|
|
<ion-segment-button value="paid">
|
|
Paid
|
|
</ion-segment-button>
|
|
<ion-segment-button value="free">
|
|
Free
|
|
</ion-segment-button>
|
|
<ion-segment-button value="top">
|
|
Top
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<div class="customize-all">
|
|
<ion-segment value="free">
|
|
<ion-segment-button value="paid">
|
|
Custom
|
|
</ion-segment-button>
|
|
<ion-segment-button value="free">
|
|
Colors
|
|
</ion-segment-button>
|
|
<ion-segment-button value="top">
|
|
All
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment color="primary" value="reading-list">
|
|
<ion-segment-button value="bookmarks">
|
|
Bookmarks
|
|
</ion-segment-button>
|
|
<ion-segment-button value="reading-list">
|
|
Reading List
|
|
</ion-segment-button>
|
|
<ion-segment-button value="shared-links">
|
|
Shared Links
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment color="secondary" value="active">
|
|
<ion-segment-button value="active">
|
|
Active
|
|
</ion-segment-button>
|
|
<ion-segment-button value="disabled" disabled="true">
|
|
Disabled
|
|
</ion-segment-button>
|
|
<ion-segment-button value="inactive" disabled="false">
|
|
Inactive
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment color="tertiary" value="all">
|
|
<ion-segment-button value="all">
|
|
All
|
|
</ion-segment-button>
|
|
<ion-segment-button value="missed">
|
|
Missed
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment color="success" value="330">
|
|
<ion-segment-button value="330">
|
|
<ion-label>330ml</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="440">
|
|
<ion-label>440ml</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="500">
|
|
<ion-label>500ml</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="custom">
|
|
<ion-icon name="create"></ion-icon>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment color="warning" value="reading-list">
|
|
<ion-segment-button value="bookmarks">
|
|
<ion-icon name="book"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="reading-list">
|
|
<ion-icon name="glasses"></ion-icon>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="shared-links">
|
|
<ion-icon name="at"></ion-icon>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment color="danger" value="bookmarks">
|
|
<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-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-segment color="medium" value="seg1">
|
|
<ion-segment-button value="seg1">
|
|
<ion-label>Seg 1</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="seg2">
|
|
<ion-label>Seg 2</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="seg3">
|
|
<ion-label>Seg 3</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment color="dark" value="seg22">
|
|
<ion-segment-button value="seg21">
|
|
<ion-label>Seg 2 1</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="seg22">
|
|
<ion-label>Seg 2 2</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="seg23">
|
|
<ion-label>Seg 2 3</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment disabled color="danger" value="seg22">
|
|
<ion-segment-button value="seg21">
|
|
<ion-label>Seg 2 1</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="seg22">
|
|
<ion-label>Seg 2 2</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="seg23">
|
|
<ion-label>Seg 2 3</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
|
|
<ion-segment disabled color="medium" value="seg22">
|
|
<ion-segment-button value="seg21">
|
|
<ion-label>Seg 2 1</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="seg22">
|
|
<ion-label>Seg 2 2</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="seg23">
|
|
<ion-label>Seg 2 3</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</div>
|
|
</ion-content>
|
|
|
|
<style>
|
|
ion-content ion-segment {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.md .customize-all ion-segment-button {
|
|
--color: red;
|
|
--background: rgba(0, 0, 0, 0.2);
|
|
--ripple-color: red;
|
|
--indicator-color: red;
|
|
}
|
|
|
|
.ios .customize-all ion-segment {
|
|
--background: rgba(51, 17, 17, 0.15);
|
|
}
|
|
|
|
.ios .customize-all ion-segment-button {
|
|
--color: purple;
|
|
--indicator-color: lightpink;
|
|
}
|
|
|
|
</style>
|
|
</ion-app>
|
|
</body>
|
|
|
|
</html>
|