javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): allow background to be set on iOS segment in a toolbar (#20350)

Browse Source
This commit is contained in:
Brandy Carney
2020-01-31 15:48:55 -05:00
committed by GitHub
parent 023ed07f97
commit 0f31624104
2 changed files with 58 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/segment/segment.ios.scss
View File

@ -42,7 +42,7 @@
// Default Segment, In a Toolbar
:host(.in-toolbar:not(.ion-color)) {
background: var(--ion-toolbar-segment-background, $segment-ios-background-color);
background: var(--ion-toolbar-segment-background, var(--background));
}

62
core/src/components/segment/test/custom/index.html
View File

@ -4,12 +4,14 @@
<head>
<meta charset="UTF-8">
<title>Segment - Custom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<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>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<ion-app>
@ -88,9 +90,9 @@
<ion-label>Disabled</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-toolbar>
<ion-toolbar>
<ion-toolbar>
<ion-segment class="custom-states-background" value="checked">
<ion-segment-button value="checked">
<ion-label>Checked</ion-label>
@ -102,7 +104,41 @@
<ion-label>Disabled</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-toolbar>
<ion-toolbar>
<ion-segment class="custom-color" value="dining">
<ion-segment-button value="dining">
<ion-label>Dining</ion-label>
<ion-icon name="cafe"></ion-icon>
</ion-segment-button>
<ion-segment-button value="travel">
<ion-label>Travel</ion-label>
<ion-icon name="airplane"></ion-icon>
</ion-segment-button>
<ion-segment-button value="entertainment">
<ion-label>Entertainment</ion-label>
<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-label>Dining</ion-label>
<ion-icon name="cafe"></ion-icon>
</ion-segment-button>
<ion-segment-button value="travel">
<ion-label>Travel</ion-label>
<ion-icon name="airplane"></ion-icon>
</ion-segment-button>
<ion-segment-button value="entertainment">
<ion-label>Entertainment</ion-label>
<ion-icon name="radio"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding-top">
@ -134,6 +170,21 @@
</ion-segment-button>
</ion-segment>
<ion-segment class="custom-color" value="dining">
<ion-segment-button value="dining">
<ion-label>Dining</ion-label>
<ion-icon name="cafe"></ion-icon>
</ion-segment-button>
<ion-segment-button value="travel">
<ion-label>Travel</ion-label>
<ion-icon name="airplane"></ion-icon>
</ion-segment-button>
<ion-segment-button value="entertainment">
<ion-label>Entertainment</ion-label>
<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-label>Dining</ion-label>
@ -341,6 +392,7 @@
.custom-states-background ion-segment-button:hover {
opacity: 1;
}
</style>
</html>