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

feat(segment): adds global variable for targeting segment in toolbar (#16344)

Browse Source 
adds the following variables

```
--ion-toolbar-color-unchecked
--ion-toolbar-color-checked
```
This commit is contained in:
Brandy Carney
2018-11-16 13:19:01 -05:00
committed by GitHub
parent ac3e065b3e
commit 10971cc3ca
8 changed files with 54 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,6 +50,13 @@
line-height: $segment-button-ios-toolbar-line-height;
}
:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
--background-checked: var(--color);
--border-color: var(--color);
--color: #{var(--ion-toolbar-color-unchecked, $segment-button-ios-text-color)};
--color-checked: #{var(--ion-toolbar-color-checked, $segment-button-ios-text-color-checked)};
}
// Segment: Color Toolbar
// --------------------------------------------------

10
core/src/components/segment/segment.md.scss
View File

@ -26,6 +26,16 @@
color: #{current-color(base)};
}
// Segment: Default Toolbar
// --------------------------------------------------
:host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
--color: #{var(--ion-toolbar-color-unchecked, $segment-button-md-text-color)};
--color-checked: #{var(--ion-toolbar-color-checked, $segment-button-md-text-color-checked)};
}
// Segment: Toolbar Color
// --------------------------------------------------

1
core/src/components/segment/segment.md.vars.scss
View File

@ -1,4 +1,5 @@
@import "../../themes/ionic.globals.md";
@import "../segment-button/segment-button.md.vars";
// Material Design Segment
// --------------------------------------------------

30
core/src/components/segment/test/toolbar/index.html
View File

@ -32,6 +32,20 @@
</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">
@ -243,6 +257,22 @@
Segment in Toolbar
</ion-content>
<style>
.themed {
--ion-toolbar-background: #3880ff;
}
.ios .themed {
--ion-toolbar-color-unchecked: #fff;
--ion-toolbar-color-checked: #3880ff;
}
.md .themed {
--ion-toolbar-color-unchecked: rgba(255, 255, 255, 0.6);
--ion-toolbar-color-checked: #fff;
}
</style>
</ion-app>
</body>