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

feat(segment-button): add --indicator-height property to segment button (#19653)

Browse Source
This commit is contained in:
Nikos Douvlis
2020-01-23 22:55:57 +02:00
committed by Brandy Carney
parent b59d7647fd
commit d76a5031c4
6 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/src/components/segment-button/readme.md
View File

@ -647,6 +647,7 @@ export const SegmentButtonExample: React.FC = () => (
| `--color-hover` | Color of the segment button on hover |
| `--indicator-box-shadow` | Box shadow on the indicator for the checked segment button |
| `--indicator-color` | Color of the indicator for the checked segment button |
| `--indicator-height` | Height of the indicator for the checked segment button |
| `--indicator-transform` | Transform of the indicator for the checked segment button |
| `--indicator-transition` | Transition of the indicator for the checked segment button |
| `--margin-bottom` | Bottom margin of the segment button |

1
core/src/components/segment-button/segment-button.ios.scss
View File

@ -14,6 +14,7 @@
--border-style: solid;
--indicator-box-shadow: #{$segment-button-ios-box-shadow-checked};
--indicator-color: #{$segment-button-ios-indicator-color};
--indicator-height: 100%;
--indicator-transition: #{$segment-button-ios-transition-animated};
--indicator-transform: none;
--transition: #{$segment-button-ios-transition};

3
core/src/components/segment-button/segment-button.md.scss
View File

@ -12,6 +12,7 @@
--color-checked: #{$segment-button-md-text-color-checked};
--indicator-box-shadow: none;
--indicator-color: var(--color-checked);
--indicator-height: 2px;
--indicator-transition: #{$segment-button-md-transition-animated};
--indicator-transform: none;
--padding-top: #{$segment-button-md-padding-top};
@ -105,8 +106,6 @@
}
.segment-button-indicator-background {
height: 2px;
background: var(--indicator-color);
}

3
core/src/components/segment-button/segment-button.scss
View File

@ -32,6 +32,7 @@
*
* @prop --transition: Transition of the segment button
*
* @prop --indicator-height: Height of the indicator for the checked segment button
* @prop --indicator-box-shadow: Box shadow on the indicator for the checked segment button
* @prop --indicator-color: Color of the indicator for the checked segment button
* @prop --indicator-transition: Transition of the indicator for the checked segment button
@ -230,7 +231,7 @@ ion-ripple-effect {
.segment-button-indicator-background {
width: 100%;
height: 100%;
height: var(--indicator-height);
transform: var(--indicator-transform);