-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(segment): adds scrollable and layout props and updates to follow…
… the spec (#16273) Adds the ability to apply a layout to the segment button in order to better match the Material Design spec, updates the design and UI to match the spec more, and separates the segment button styles back into the proper directory. - moves the segment button css back into segment-button directory - updates the design to match the MD spec better - adds layout property to match MD spec - adds custom properties for better styling - allows for overscroll / scrolling tabs via scrollable attribute - changes the indicator to a div - will need to animate it - updates e2e tests and add spec test fixes #16232 fixes #16081 references #14853 BREAKING CHANGES Segment Button now requires the text to be wrapped in an `ion-label` element for improved styling. *Old usage:* ```html <ion-segment-button> Item One </ion-segment-button> ``` *New usage:* ```html <ion-segment-button> <ion-label>Item One</ion-label> </ion-segment-button> ``` Note: this will not technically break your app, but the styles may look wrong.
- Loading branch information
1 parent
6d59446
commit 256745c
Showing
36 changed files
with
1,697 additions
and
630 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export type SegmentButtonLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide'; |
85 changes: 85 additions & 0 deletions
85
core/src/components/segment-button/segment-button.ios.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| @import "./segment-button"; | ||
| @import "./segment-button.ios.vars"; | ||
|
|
||
| // iOS Segment Button | ||
| // -------------------------------------------------- | ||
|
|
||
| :host { | ||
| --background: #{$segment-button-ios-background-color}; | ||
| --background-hover: #{$segment-button-ios-background-color-hover}; | ||
| --background-activated: #{$segment-button-ios-background-color-activated}; | ||
| --background-checked: #{$segment-button-ios-background-color-checked}; | ||
| --border-color: #{$segment-button-ios-border-color}; | ||
| --color: #{$segment-button-ios-text-color}; | ||
| --color-activated: var(--color); | ||
| --color-checked: #{ion-color(primary, contrast)}; | ||
| --color-disabled: #{ion-color(primary, base, $segment-button-ios-opacity-disabled)}; | ||
| --color-checked-disabled: #{ion-color(primary, contrast, $segment-button-ios-opacity-disabled)}; | ||
| --border-radius: #{$segment-button-ios-border-radius}; | ||
| --border-width: #{$segment-button-ios-border-width}; | ||
| --border-style: solid; | ||
| --transition: #{$segment-button-ios-transition}; | ||
|
|
||
| min-height: #{$segment-button-ios-height}; | ||
|
|
||
| font-size: #{$segment-button-ios-font-size}; | ||
|
|
||
| line-height: #{$segment-button-ios-line-height}; | ||
| } | ||
|
|
||
|
|
||
| // Segment Button: Indicator | ||
| // -------------------------------------------------- | ||
|
|
||
| .segment-button-indicator { | ||
| display: none; | ||
| } | ||
|
|
||
|
|
||
| // Segment Button: Icon | ||
| // -------------------------------------------------- | ||
|
|
||
| ::slotted(ion-icon) { | ||
| font-size: $segment-button-ios-icon-size; | ||
| } | ||
|
|
||
|
|
||
| // Segment Button: Layout | ||
| // -------------------------------------------------- | ||
|
|
||
| // Layout: icon start | ||
| :host(.segment-button-layout-icon-start) ::slotted(ion-label) { | ||
| @include margin-horizontal(2px, 0); | ||
| } | ||
|
|
||
| // Layout: icon end | ||
| :host(.segment-button-layout-icon-end) ::slotted(ion-label) { | ||
| @include margin-horizontal(0, 2px); | ||
| } | ||
|
|
||
|
|
||
| // Segment Button: Hover | ||
| // -------------------------------------------------- | ||
|
|
||
| @media (any-hover: hover) { | ||
| :host(:hover:not(.segment-button-checked)) { | ||
| background: var(--background-hover); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Segment Button: Activated | ||
| // -------------------------------------------------- | ||
|
|
||
| :host(.activated) { | ||
| background: var(--background-activated); | ||
| } | ||
|
|
||
|
|
||
| // Segment: Checked & Activated | ||
| // -------------------------------------------------- | ||
|
|
||
| :host(.segment-button-checked.activated) { | ||
| background: var(--background-checked); | ||
| color: var(--color-checked); | ||
| } |
73 changes: 73 additions & 0 deletions
73
core/src/components/segment-button/segment-button.ios.vars.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| @import "../../themes/ionic.globals.ios"; | ||
|
|
||
| // iOS Segment Button | ||
| // -------------------------------------------------- | ||
|
|
||
| /// @prop - Background of the segment button | ||
| $segment-button-ios-background-color: transparent !default; | ||
|
|
||
| /// @prop - Background of the checked segment button | ||
| $segment-button-ios-background-color-checked: ion-color(primary, base) !default; | ||
|
|
||
| /// @prop - Opacity of the segment button on hover | ||
| $segment-button-ios-opacity-hover: .1 !default; | ||
|
|
||
| /// @prop - Opacity of the segment button when pressed | ||
| $segment-button-ios-opacity-activated: .16 !default; | ||
|
|
||
| /// @prop - Opacity of the disabled segment button | ||
| $segment-button-ios-opacity-disabled: .3 !default; | ||
|
|
||
| /// @prop - Background of the segment button on hover | ||
| $segment-button-ios-background-color-hover: ion-color(primary, base, $segment-button-ios-opacity-hover) !default; | ||
|
|
||
| /// @prop - Background of the activated segment button | ||
| $segment-button-ios-background-color-activated: ion-color(primary, base, $segment-button-ios-opacity-activated) !default; | ||
|
|
||
| /// @prop - Background of the disabled segment button | ||
| $segment-button-ios-background-color-disabled: ion-color(primary, base, $segment-button-ios-opacity-disabled) !default; | ||
|
|
||
| /// @prop - Text color of the segment button | ||
| $segment-button-ios-text-color: ion-color(primary, base) !default; | ||
|
|
||
| /// @prop - Border width of the segment button | ||
| $segment-button-ios-border-width: 1px !default; | ||
|
|
||
| /// @prop - Height of the segment button | ||
| $segment-button-ios-height: 24px !default; | ||
|
|
||
| /// @prop - Line height of the segment button | ||
| $segment-button-ios-line-height: 37px !default; | ||
|
|
||
| /// @prop - Font size of the segment button | ||
| $segment-button-ios-font-size: 13px !default; | ||
|
|
||
| /// @prop - Border radius of the segment button | ||
| $segment-button-ios-border-radius: 4px !default; | ||
|
|
||
| /// @prop - Border color of the segment button | ||
| $segment-button-ios-border-color: ion-color(primary, base) !default; | ||
|
|
||
| /// @prop - Size of an icon in the segment button | ||
| $segment-button-ios-icon-size: 26px !default; | ||
|
|
||
| /// @prop - Line height of an icon in the segment button | ||
| $segment-button-ios-icon-line-height: 28px !default; | ||
|
|
||
| /// @prop - Transition of the segment button | ||
| $segment-button-ios-transition: 100ms all linear !default; | ||
|
|
||
| /// @prop - Max width of the segment button in a toolbar | ||
| $segment-button-ios-toolbar-button-max-width: 100px !default; | ||
|
|
||
| /// @prop - Line height of the segment button in a toolbar | ||
| $segment-button-ios-toolbar-line-height: 22px !default; | ||
|
|
||
| /// @prop - Font size of the segment button in a toolbar | ||
| $segment-button-ios-toolbar-font-size: 12px !default; | ||
|
|
||
| /// @prop - Size of an icon in the segment button in a toolbar | ||
| $segment-button-ios-toolbar-icon-size: 22px !default; | ||
|
|
||
| /// @prop - Line height of an icon in the segment button in a toolbar | ||
| $segment-button-ios-toolbar-icon-line-height: 24px !default; |
Oops, something went wrong.