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

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/api.txt
View File

@ -969,6 +969,7 @@ ion-segment-button,css-prop,--color-disabled
ion-segment-button,css-prop,--color-hover ion-segment-button,css-prop,--color-hover
ion-segment-button,css-prop,--indicator-box-shadow ion-segment-button,css-prop,--indicator-box-shadow
ion-segment-button,css-prop,--indicator-color ion-segment-button,css-prop,--indicator-color
ion-segment-button,css-prop,--indicator-height
ion-segment-button,css-prop,--indicator-transform ion-segment-button,css-prop,--indicator-transform
ion-segment-button,css-prop,--indicator-transition ion-segment-button,css-prop,--indicator-transition
ion-segment-button,css-prop,--margin-bottom ion-segment-button,css-prop,--margin-bottom

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 | | `--color-hover` | Color of the segment button on hover |
| `--indicator-box-shadow` | Box shadow on the indicator for the checked segment button | | `--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-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-transform` | Transform of the indicator for the checked segment button |
| `--indicator-transition` | Transition 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 | | `--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; --border-style: solid;
--indicator-box-shadow: #{$segment-button-ios-box-shadow-checked}; --indicator-box-shadow: #{$segment-button-ios-box-shadow-checked};
--indicator-color: #{$segment-button-ios-indicator-color}; --indicator-color: #{$segment-button-ios-indicator-color};
--indicator-height: 100%;
--indicator-transition: #{$segment-button-ios-transition-animated}; --indicator-transition: #{$segment-button-ios-transition-animated};
--indicator-transform: none; --indicator-transform: none;
--transition: #{$segment-button-ios-transition}; --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}; --color-checked: #{$segment-button-md-text-color-checked};
--indicator-box-shadow: none; --indicator-box-shadow: none;
--indicator-color: var(--color-checked); --indicator-color: var(--color-checked);
--indicator-height: 2px;
--indicator-transition: #{$segment-button-md-transition-animated}; --indicator-transition: #{$segment-button-md-transition-animated};
--indicator-transform: none; --indicator-transform: none;
--padding-top: #{$segment-button-md-padding-top}; --padding-top: #{$segment-button-md-padding-top};
@ -105,8 +106,6 @@
} }
.segment-button-indicator-background { .segment-button-indicator-background {
height: 2px;
background: var(--indicator-color); 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 --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-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-color: Color of the indicator for the checked segment button
* @prop --indicator-transition: Transition 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 { .segment-button-indicator-background {
width: 100%; width: 100%;
height: 100%; height: var(--indicator-height);
transform: var(--indicator-transform); transform: var(--indicator-transform);

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

@ -197,24 +197,27 @@
* This tests that the colors are able to be overridden on * This tests that the colors are able to be overridden on
* a segment inside of a toolbar * a segment inside of a toolbar
* *
* Indicator color / ripple color can be set on ion-segment * Ripple color can be set on ion-segment
* *
* Backgrounds / colors for the button must be set on the * Backgrounds / colors for the button must be set on the
* ion-segment-button * ion-segment-button
*/ */
.custom-checked { .custom-checked {
--ripple-color: purple; --ripple-color: purple;
--indicator-color: purple;
} }
.ios .custom-checked ion-segment-button { .ios .custom-checked ion-segment-button {
--color-checked: white; --color-checked: magenta;
--indicator-color: red;
--indicator-height: 50%;
} }
.md .custom-checked ion-segment-button { .md .custom-checked ion-segment-button {
--background-hover: rgba(17, 228, 10, 0.5); --background-hover: rgba(17, 228, 10, 0.5);
--color-checked: purple; --color-checked: purple;
--color-hover: blue; --color-hover: blue;
--indicator-color: red;
--indicator-height: 5px;
} }
/* /*