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

feat(segment): implement iOS 13 segment with animation (#19036)

Browse Source 
Changes
Closes #18663

* Converts Segment to shadow
* Enables gesture to swipe between segment buttons
* Adds indicator transition to slide the indicator between buttons
* Updates global theme variables
* Removes activated state, now handled by the gesture
* Updates iOS to latest iOS 13 UI
* Ensures customization is working for the buttons and indicator
* Updates the e2e tests
This commit is contained in:
Brandy Carney
2020-01-14 11:51:28 -05:00
committed by Liam DeBeasi
parent 8e11f79fcc
commit dc66ce48e1
27 changed files with 1278 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,14 +5,7 @@
// --------------------------------------------------
:host {
--background: #{$segment-button-md-background};
--background-checked: #{$segment-button-md-background-checked};
--background-hover: #{$segment-button-md-background-hover};
--background-activated: #{$segment-button-md-background-activated};
--color: #{$segment-button-md-text-color};
--color-checked: #{$segment-button-md-text-color-checked};
--color-checked-disabled: var(--color-checked);
--indicator-color: transparent;
--background: transparent;
}
:host(.segment-disabled) {
@ -22,25 +15,20 @@
// Segment: Color
// --------------------------------------------------
:host(.ion-color)::slotted(ion-segment-button) {
--background-activated: #{current-color(base, .16)};
:host(.ion-color) ::slotted(ion-segment-button) {
--ripple-color: #{current-color(base)};
--indicator-color: #{current-color(base)};
background: transparent;
color: $segment-button-md-text-color;
}
:host(.ion-color)::slotted(.segment-button-checked) {
--indicator-color-checked: #{current-color(base)};
color: #{current-color(base)};
}
:host(.ion-color)::slotted(.segment-button-checked.activated) {
:host(.ion-color) ::slotted(.segment-button-checked) {
color: #{current-color(base)};
}
@media (any-hover: hover) {
:host(.ion-color)::slotted(ion-segment-button:hover) {
:host(.ion-color) ::slotted(ion-segment-button:hover) {
background: #{current-color(base, .04)};
}
}
@ -48,24 +36,49 @@
// Segment: Default Toolbar
// --------------------------------------------------
:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) {
color: #{var(--ion-toolbar-color-unchecked, var(--color))};
// Default Segment, In a Toolbar
:host(.in-toolbar:not(.ion-color)) ::slotted(ion-segment-button) {
--indicator-color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};
background: #{var(--ion-toolbar-segment-background, var(--background))};
color: #{var(--ion-toolbar-segment-color, var(--color))};
}
:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(.segment-button-checked) {
--indicator-color-checked: #{var(--ion-toolbar-color-checked, var(--color-checked))};
color: #{var(--ion-toolbar-color-checked, var(--color-checked))};
// Default Segment, In a Toolbar, Checked
:host(.in-toolbar:not(.ion-color)) ::slotted(.segment-button-checked) {
background: #{var(--ion-toolbar-segment-background-checked, var(--background-checked))};
color: #{var(--ion-toolbar-segment-color-checked, var(--color-checked))};
}
// Segment: Toolbar Color
// --------------------------------------------------
:host-context(ion-toolbar.ion-color):not(.ion-color)::slotted(ion-segment-button) {
--background-hover: #{current-color(contrast, .04)};
--background-activated: #{current-color(base)};
--color: #{current-color(contrast, .6)};
--color-checked: #{current-color(contrast)};
--indicator-color-checked: #{current-color(contrast)};
// Default Segment, In a Toolbar with Color
:host(.in-toolbar-color:not(.ion-color)) ::slotted(ion-segment-button) {
color: #{current-color(contrast, .6)};
}
// Default Segment, In a Toolbar with Color, Checked
:host(.in-toolbar-color:not(.ion-color)) ::slotted(.segment-button-checked) {
color: #{current-color(contrast)};
}
// Segment: Toolbar Hover
// --------------------------------------------------
@media (any-hover: hover) {
// Default Segment, In a Toolbar with Color, Hover
:host(.in-toolbar-color:not(.ion-color)) ::slotted(ion-segment-button:hover) {
background: #{ion-color(primary, contrast, .04)};
}
}
// Segment: Scrollable
// --------------------------------------------------
:host(.segment-scrollable) ::slotted(ion-segment-button) {
min-width: $segment-button-md-min-width;
}