mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-14 16:52:26 +08:00
create page to check ionic theme segment button
This commit is contained in:
João Ferreira
400
core/src/components/segment/test/theme-ionic/index.html
Normal file
400
core/src/components/segment/test/theme-ionic/index.html
Normal file
@ -0,0 +1,400 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" theme="ionic">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Segment - theme ionic</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-segment value="Free" id="custom-radius">
|
||||||
|
<ion-segment-button value="Paid">
|
||||||
|
<ion-text>Paid</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="Free">
|
||||||
|
<ion-text>Free</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="Top">
|
||||||
|
<ion-text>Top</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-segment value="Free" class="custom-checked">
|
||||||
|
<ion-segment-button value="Paid">
|
||||||
|
<ion-text>Paid</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="Free">
|
||||||
|
<ion-text>Free</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="Top">
|
||||||
|
<ion-text>Top</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-segment class="custom-icon" value="instagram">
|
||||||
|
<ion-segment-button class="segment-button-facebook" value="facebook">
|
||||||
|
<ion-text>Facebook</ion-text>
|
||||||
|
<ion-icon name="logo-facebook"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button class="segment-button-instagram" value="instagram">
|
||||||
|
<ion-text>Instagram</ion-text>
|
||||||
|
<ion-icon name="logo-instagram"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button class="segment-button-slack" value="slack">
|
||||||
|
<ion-text>Slack</ion-text>
|
||||||
|
<ion-icon name="logo-slack"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar class="themed">
|
||||||
|
<ion-segment value="delete">
|
||||||
|
<ion-segment-button value="create">
|
||||||
|
<ion-text>Create</ion-text>
|
||||||
|
<ion-icon name="create"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="delete">
|
||||||
|
<ion-text>Delete</ion-text>
|
||||||
|
<ion-icon name="trash"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="upload">
|
||||||
|
<ion-text>Upload</ion-text>
|
||||||
|
<ion-icon name="cloud-upload"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-segment class="custom-states-color" value="disabled">
|
||||||
|
<ion-segment-button value="inactive">
|
||||||
|
<ion-text>Inactive</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="inactive2">
|
||||||
|
<ion-text>Inactive</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="disabled" disabled>
|
||||||
|
<ion-text>Disabled</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-segment class="custom-states-background" value="checked">
|
||||||
|
<ion-segment-button value="checked">
|
||||||
|
<ion-text>Checked</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="inactive">
|
||||||
|
<ion-text>Inactive</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="disabled" disabled>
|
||||||
|
<ion-text>Disabled</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-segment class="custom-color" value="dining">
|
||||||
|
<ion-segment-button value="dining">
|
||||||
|
<ion-text>Dining</ion-text>
|
||||||
|
<ion-icon name="cafe"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="travel">
|
||||||
|
<ion-text>Travel</ion-text>
|
||||||
|
<ion-icon name="airplane"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="entertainment">
|
||||||
|
<ion-text>Entertainment</ion-text>
|
||||||
|
<ion-icon name="radio"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-segment class="custom-color" color="danger" value="dining">
|
||||||
|
<ion-segment-button value="dining">
|
||||||
|
<ion-text>Dining</ion-text>
|
||||||
|
<ion-icon name="cafe"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="travel">
|
||||||
|
<ion-text>Travel</ion-text>
|
||||||
|
<ion-icon name="airplane"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="entertainment">
|
||||||
|
<ion-text>Entertainment</ion-text>
|
||||||
|
<ion-icon name="radio"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content class="ion-padding-top">
|
||||||
|
<ion-segment class="custom-active" value="active">
|
||||||
|
<ion-segment-button value="active">
|
||||||
|
<ion-text>Active</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="disabled" disabled="true">
|
||||||
|
<ion-text>Disabled</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="inactive" disabled="false">
|
||||||
|
<ion-text>Inactive</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<ion-segment class="custom-icon" value="slack">
|
||||||
|
<ion-segment-button class="segment-button-facebook" value="facebook">
|
||||||
|
<ion-text>Facebook</ion-text>
|
||||||
|
<ion-icon name="logo-facebook"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button class="segment-button-instagram" value="instagram">
|
||||||
|
<ion-text>Instagram</ion-text>
|
||||||
|
<ion-icon name="logo-instagram"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button class="segment-button-slack" value="slack">
|
||||||
|
<ion-text>Slack</ion-text>
|
||||||
|
<ion-icon name="logo-slack"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<ion-segment class="custom-color" value="dining">
|
||||||
|
<ion-segment-button value="dining">
|
||||||
|
<ion-text>Dining</ion-text>
|
||||||
|
<ion-icon name="cafe"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="travel">
|
||||||
|
<ion-text>Travel</ion-text>
|
||||||
|
<ion-icon name="airplane"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="entertainment">
|
||||||
|
<ion-text>Entertainment</ion-text>
|
||||||
|
<ion-icon name="radio"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<ion-segment class="custom-color" color="danger" value="dining">
|
||||||
|
<ion-segment-button value="dining">
|
||||||
|
<ion-text>Dining</ion-text>
|
||||||
|
<ion-icon name="cafe"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="travel">
|
||||||
|
<ion-text>Travel</ion-text>
|
||||||
|
<ion-icon name="airplane"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="entertainment">
|
||||||
|
<ion-text>Entertainment</ion-text>
|
||||||
|
<ion-icon name="radio"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<ion-segment class="custom-states-color" value="checked">
|
||||||
|
<ion-segment-button value="checked">
|
||||||
|
<ion-text>Checked</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="inactive">
|
||||||
|
<ion-text>Inactive</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="disabled" disabled>
|
||||||
|
<ion-text>Disabled</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<ion-segment class="custom-states-background" value="checked">
|
||||||
|
<ion-segment-button value="checked">
|
||||||
|
<ion-text>Checked</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="inactive">
|
||||||
|
<ion-text>Inactive</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="disabled" disabled>
|
||||||
|
<ion-text>Disabled</ion-text>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-content>
|
||||||
|
</ion-app>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-segment {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-toolbar ion-segment {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#custom-radius ion-segment-button {
|
||||||
|
--background: rgba(0, 0, 255, 0.1);
|
||||||
|
--background-checked: rgba(0, 0, 255, 0.3);
|
||||||
|
--border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Custom Checked Segment (Paid, Free, Top)
|
||||||
|
*
|
||||||
|
* This tests that the colors are able to be overridden on
|
||||||
|
* a segment inside of a toolbar
|
||||||
|
*
|
||||||
|
* Ripple color can be set on ion-segment
|
||||||
|
*
|
||||||
|
* Backgrounds / colors for the button must be set on the
|
||||||
|
* ion-segment-button
|
||||||
|
*/
|
||||||
|
.custom-checked {
|
||||||
|
--ripple-color: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ios .custom-checked ion-segment-button {
|
||||||
|
--color-checked: magenta;
|
||||||
|
--indicator-color: red;
|
||||||
|
--indicator-height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md .custom-checked ion-segment-button {
|
||||||
|
--background-hover: rgba(17, 228, 10, 0.5);
|
||||||
|
--color-checked: purple;
|
||||||
|
--color-hover: blue;
|
||||||
|
--indicator-color: red;
|
||||||
|
--indicator-height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Custom Themed Segment (Themed to Primary)
|
||||||
|
*/
|
||||||
|
.themed {
|
||||||
|
--ion-toolbar-background: #3880ff;
|
||||||
|
--ion-toolbar-color: #fff;
|
||||||
|
|
||||||
|
/* Segment */
|
||||||
|
--ion-toolbar-segment-indicator-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Material Design Segment */
|
||||||
|
.md .themed {
|
||||||
|
--ion-toolbar-segment-color: rgba(255, 255, 255, 0.6);
|
||||||
|
--ion-toolbar-segment-color-checked: #ffffff;
|
||||||
|
--ion-toolbar-segment-background-hover: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* iOS Segment */
|
||||||
|
.ios .themed {
|
||||||
|
--ion-toolbar-segment-background: rgba(255, 255, 255, 0.065);
|
||||||
|
--ion-toolbar-segment-color: #ffffff;
|
||||||
|
--ion-toolbar-segment-color-checked: #3880ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Custom Active Segment (Active, Inactive, Disabled)
|
||||||
|
*/
|
||||||
|
.custom-active {
|
||||||
|
--background: papayawhip;
|
||||||
|
|
||||||
|
--color: purple;
|
||||||
|
--color-disabled: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ios .custom-active {
|
||||||
|
--color-checked: papayawhip;
|
||||||
|
--indicator-color: navy;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md .custom-active {
|
||||||
|
--color-checked: navy;
|
||||||
|
--indicator-color: navy;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Custom Icon Segment (Facebook, Instagram, Slack)
|
||||||
|
*/
|
||||||
|
.custom-icon ion-icon {
|
||||||
|
font-size: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* MD Custom Icon Segment (Facebook, Instagram, Slack)
|
||||||
|
*/
|
||||||
|
.md .segment-button-facebook {
|
||||||
|
--background-hover: rgb(58, 61, 70, 0.04);
|
||||||
|
--color-checked: #3a3d46;
|
||||||
|
--indicator-color: #3a3d46;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md .segment-button-instagram {
|
||||||
|
--background-hover: rgb(228, 64, 95, 0.04);
|
||||||
|
--color-checked: #e4405f;
|
||||||
|
--indicator-color: #e4405f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md .segment-button-slack {
|
||||||
|
--background-hover: rgb(58, 175, 133, 0.04);
|
||||||
|
--color-checked: #3aaf85;
|
||||||
|
--indicator-color: #3aaf85;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* iOS Custom Icon Segment (Facebook, Instagram, Slack)
|
||||||
|
*/
|
||||||
|
.ios .segment-button-facebook {
|
||||||
|
--color: #3a3d46;
|
||||||
|
--color-checked: #ffffff;
|
||||||
|
--indicator-color: #3a3d46;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ios .segment-button-instagram {
|
||||||
|
--color: #e4405f;
|
||||||
|
--color-checked: #ffffff;
|
||||||
|
--indicator-color: #e4405f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ios .segment-button-slack {
|
||||||
|
--color: #3aaf85;
|
||||||
|
--color-checked: #ffffff;
|
||||||
|
--indicator-color: #3aaf85;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* This CSS should not apply */
|
||||||
|
.custom-color {
|
||||||
|
--background: purple;
|
||||||
|
--color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-states-color {
|
||||||
|
--color: red;
|
||||||
|
--color-disabled: blue;
|
||||||
|
--color-checked: indigo;
|
||||||
|
--color-hover: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-states-background ion-segment-button {
|
||||||
|
--indicator-color: transparent;
|
||||||
|
--indicator-box-shadow: none;
|
||||||
|
--color: white;
|
||||||
|
|
||||||
|
--background: red;
|
||||||
|
--background-disabled: blue;
|
||||||
|
--background-checked: indigo;
|
||||||
|
--background-hover: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-states-background ion-segment-button:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user