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

fix(segment-button): separate button styles from segment and fix styling

Browse Source 
- this separates the segment button styles from the segment itself
- removes unused / no longer needed styles
- fixes a bug where activated segments were not getting opacity when
they were also disabled
This commit is contained in:
Brandy Carney
2018-02-06 11:29:24 -05:00
parent 7430383267
commit dac51936bc
13 changed files with 500 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,29 +1,53 @@
# ion-segment-button
Segment buttons are a group of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. Only one segment button can be selected at a time.
Segment buttons are groups of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. A segment button can be checked by default by adding the `checked` attribute or by setting the `value` of the segment to the `value` of the segment button. Only one segment button should be selected at a time.
```html
<ion-content>
<!-- Segment buttons with icons -->
<ion-segment>
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Segment buttons with text -->
<ion-segment>
<ion-segment-button>
Friends
</ion-segment-button>
<ion-segment-button>
Enemies
</ion-segment-button>
</ion-segment>
<!-- Segment buttons with text -->
<ion-segment>
<ion-segment-button value="friends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies">
Enemies
</ion-segment-button>
</ion-segment>
</ion-content>
<!-- Segment buttons with the first checked and the last disabled -->
<ion-segment>
<ion-segment-button checked>
Paid
</ion-segment-button>
<ion-segment-button>
Free
</ion-segment-button>
<ion-segment-button disabled>
Top
</ion-segment-button>
</ion-segment>
<!-- Segment buttons with values and icons -->
<ion-segment>
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
<ion-segment-button value="bookmark">
<ion-icon name="bookmark"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Segment with a value that checks the last button -->
<ion-segment value="shared">
<ion-segment-button value="bookmarks">
Bookmarks
</ion-segment-button>
<ion-segment-button value="reading">
Reading List
</ion-segment-button>
<ion-segment-button value="shared">
Shared Links
</ion-segment-button>
</ion-segment>
```
<!-- Auto Generated Below -->

151
packages/core/src/components/segment-button/segment-button.ios.scss Normal file
View File

@ -0,0 +1,151 @@
@import "./segment-button";
@import "./segment-button.ios.vars";
// iOS Segment Button
// --------------------------------------------------
ion-segment-button {
&:first-of-type .segment-button-ios {
@include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
@include margin-horizontal(null, 0);
}
&:not(:first-of-type) .segment-button-ios {
border-left-width: 0;
}
&:last-of-type .segment-button-ios {
@include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0);
@include margin-horizontal(0, null);
border-left-width: 0;
}
}
.segment-button-ios {
flex: 1;
height: $segment-button-ios-height;
border-width: $segment-button-ios-border-width;
border-style: solid;
border-color: $segment-button-ios-background-color-activated;
font-size: $segment-button-ios-font-size;
line-height: $segment-button-ios-line-height;
color: $segment-button-ios-background-color-activated;
background-color: $segment-button-ios-background-color;
ion-icon {
font-size: $segment-button-ios-icon-size;
line-height: $segment-button-ios-icon-line-height;
}
&.segment-activated {
color: $segment-button-ios-text-color;
background-color: $segment-button-ios-background-color-activated;
transition: $segment-button-ios-transition-activated;
}
&:hover:not(.segment-activated) {
background-color: $segment-button-ios-background-color-hover;
transition: $segment-button-ios-transition-hover;
}
&:active:not(.segment-activated) {
background-color: $segment-button-ios-background-color-active;
transition: $segment-button-ios-transition-active;
}
}
// iOS Segment Button RTL
// --------------------------------------------------
[dir="rtl"] ion-segment-button {
&:first-of-type .segment-button-ios {
border-left-width: 0;
}
&:last-of-type .segment-button-ios {
border-left-width: $segment-button-ios-border-width;
}
}
// iOS Segment Button Disabled
// --------------------------------------------------
.segment-ios .segment-button-disabled {
color: $segment-button-ios-background-color-disabled;
pointer-events: none;
}
// iOS Segment Button in Toolbar
// --------------------------------------------------
.toolbar-ios ion-segment-button {
max-width: $segment-button-ios-toolbar-button-max-width;
}
.toolbar-ios .segment-button-ios {
height: $segment-button-ios-toolbar-button-height;
font-size: $segment-button-ios-toolbar-font-size;
line-height: $segment-button-ios-toolbar-line-height;
ion-icon {
font-size: $segment-button-ios-toolbar-icon-size;
line-height: $segment-button-ios-toolbar-icon-line-height;
}
}
// iOS Segment Button Mixin
// --------------------------------------------------
@mixin ios-segment-button($color-name) {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.segment-ios-#{$color-name} {
.segment-button {
border-color: $color-base;
color: $color-base;
&:hover:not(.segment-activated) {
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
}
&:active:not(.segment-activated) {
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
}
&.segment-activated {
color: $color-contrast;
background-color: $color-base;
}
}
.segment-button-disabled {
color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-medium);
}
}
}
// iOS Segment Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
@include ios-segment-button($color-name);
.toolbar-ios-#{$color-name} .segment-button-ios.segment-activated {
color: $color-base;
}
}

79
packages/core/src/components/segment-button/segment-button.ios.vars.scss Normal file
View File

@ -0,0 +1,79 @@
@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 activated segment button
$segment-button-ios-background-color-activated: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background of the segment button when hovered
$segment-button-ios-background-color-hover: ion-color-alpha($colors-ios, primary, $alpha-ios-lowest) !default;
/// @prop - Background of the segment button when active
$segment-button-ios-background-color-active: ion-color-alpha($colors-ios, primary, $alpha-ios-low) !default;
/// @prop - Background of the activated segment button when active
$segment-button-ios-background-color-disabled: ion-color-alpha($colors-ios, primary, $alpha-ios-medium) !default;
/// @prop - Text color of the segment button
$segment-button-ios-text-color: ion-color($colors-ios, primary, contrast, ios) !default;
/// @prop - Transition of the activated segment button
$segment-button-ios-transition-activated: 100ms all linear !default;
/// @prop - Transition of the segment button on hover
$segment-button-ios-transition-hover: 100ms all linear !default;
/// @prop - Transition of the segment button when pressed
$segment-button-ios-transition-active: 100ms all linear !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: 32px !default;
/// @prop - Line height of the segment button
$segment-button-ios-line-height: 28px !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 - 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 - Max width of the segment button in a toolbar
$segment-button-ios-toolbar-button-max-width: 100px !default;
/// @prop - Height of the segment button in a toolbar
$segment-button-ios-toolbar-button-height: 26px !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;
/// @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-active: .16 !default;
/// @prop - Opacity of the disabled segment button
$segment-button-ios-opacity-disabled: .3 !default;

66
packages/core/src/components/segment-button/segment-button.md.scss Normal file
View File

@ -0,0 +1,66 @@
@import "./segment-button";
@import "./segment-button.md.vars";
// Material Design Segment
// --------------------------------------------------
.segment-button-md {
@include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
flex: 1;
height: $segment-button-md-height;
border-bottom-width: $segment-button-md-border-bottom-width;
border-bottom-style: solid;
border-bottom-color: $segment-button-md-border-bottom-color;
font-size: $segment-button-md-font-size;
font-weight: $segment-button-md-font-weight;
line-height: $segment-button-md-line-height;
text-transform: uppercase;
color: $segment-button-md-text-color;
background-color: transparent;
opacity: $segment-button-md-opacity;
transition: $segment-button-md-transition;
ion-icon {
font-size: $segment-button-md-icon-size;
line-height: $segment-button-md-icon-line-height;
}
&.activated,
&.segment-activated {
border-color: $segment-button-md-border-color-activated;
opacity: $segment-button-md-opacity-activated;
}
}
// Material Design Segment Button Disabled
// --------------------------------------------------
.segment-md .segment-button-disabled {
opacity: $segment-button-md-opacity-disabled;
pointer-events: none;
}
// Material Design Segment Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
$color-base: ion-color($colors-md, $color-name, base, md);
.segment-md-#{$color-name} .segment-button {
color: $color-base;
&.activated,
&.segment-activated {
border-color: $color-base;
color: $color-base;
}
}
}

58
packages/core/src/components/segment-button/segment-button.md.vars.scss Normal file
View File

@ -0,0 +1,58 @@
@import "../../themes/ionic.globals.md";
// Material Design Segment Button
// --------------------------------------------------
/// @prop - Text color of the segment button
$segment-button-md-text-color: $toolbar-md-color-active !default;
/// @prop - Width of the bottom border on the segment button
$segment-button-md-border-bottom-width: 2px !default;
/// @prop - Color of the bottom border on the segment button
$segment-button-md-border-bottom-color: rgba(#000, .10) !default;
/// @prop - Opacity of the segment button
$segment-button-md-opacity: .7 !default;
/// @prop - Border color of the activated segment button
$segment-button-md-border-color-activated: $toolbar-md-color-active !default;
/// @prop - Opacity of the activated segment button
$segment-button-md-opacity-activated: 1 !default;
/// @prop - Opacity of the disabled segment button
$segment-button-md-opacity-disabled: .3 !default;
/// @prop - Padding top of the segment button
$segment-button-md-padding-top: 0 !default;
/// @prop - Padding end of the segment button
$segment-button-md-padding-end: 6px !default;
/// @prop - Padding bottom of the segment button
$segment-button-md-padding-bottom: $segment-button-md-padding-top !default;
/// @prop - Padding start of the segment button
$segment-button-md-padding-start: $segment-button-md-padding-end !default;
/// @prop - Height of the segment button
$segment-button-md-height: 42px !default;
/// @prop - Line height of the segment button
$segment-button-md-line-height: 40px !default;
/// @prop - Font size of the segment button
$segment-button-md-font-size: 12px !default;
/// @prop - Font weight of the segment button
$segment-button-md-font-weight: 500 !default;
/// @prop - Transition of the segment button
$segment-button-md-transition: 100ms all linear !default;
/// @prop - Size of an icon in the segment button
$segment-button-md-icon-size: 26px !default;
/// @prop - Line height of an icon in the segment button
$segment-button-md-icon-line-height: $segment-button-md-line-height !default;

37
packages/core/src/components/segment-button/segment-button.scss Normal file
View File

@ -0,0 +1,37 @@
@import "../../themes/ionic.globals";
// Segment Button
// --------------------------------------------------
ion-segment-button {
display: flex;
flex: 1;
}
.segment-button {
@include border-radius(0);
@include margin-horizontal(0);
@include text-align(center);
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
font-kerning: none;
user-select: none;
contain: content;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
&:active,
&:focus {
outline: none;
}
}

6
packages/core/src/components/segment-button/segment-button.tsx
View File

@ -4,7 +4,11 @@ import { createThemedClasses, getElementClassMap } from '../../utils/theme';
let ids = 0;
@Component({
tag: 'ion-segment-button'
tag: 'ion-segment-button',
styleUrls: {
ios: 'segment-button.ios.scss',
md: 'segment-button.md.scss'
}
})
export class SegmentButton {
styleTmr: any;

141
packages/core/src/components/segment/segment.ios.scss
View File

@ -8,80 +8,8 @@
font-family: $segment-ios-font-family;
}
.segment-ios ion-segment-button {
&:first-of-type .segment-button {
@include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
@include margin-horizontal(null, 0);
}
&:not(:first-of-type) .segment-button {
border-left-width: 0;
}
&:last-of-type .segment-button {
@include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0);
@include margin-horizontal(0, null);
border-left-width: 0;
}
}
.segment-ios .segment-button {
flex: 1;
height: $segment-button-ios-height;
border-width: $segment-button-ios-border-width;
border-style: solid;
border-color: $segment-button-ios-background-color-activated;
font-size: $segment-button-ios-font-size;
line-height: $segment-button-ios-line-height;
color: $segment-button-ios-background-color-activated;
background-color: $segment-button-ios-background-color;
ion-icon {
font-size: $segment-button-ios-icon-size;
line-height: $segment-button-ios-icon-line-height;
}
&.segment-activated {
color: $segment-button-ios-text-color;
background-color: $segment-button-ios-background-color-activated;
transition: $segment-button-ios-transition-activated;
}
&:hover:not(.segment-activated) {
background-color: $segment-button-ios-background-color-hover;
transition: $segment-button-ios-transition-hover;
}
&:active:not(.segment-activated) {
background-color: $segment-button-ios-background-color-active;
transition: $segment-button-ios-transition-active;
}
}
[dir="rtl"] .segment-ios ion-segment-button {
&:first-of-type .segment-button {
border-left-width: 0;
}
&:last-of-type .segment-button {
border-left-width: $segment-button-ios-border-width;
}
}
.segment-ios.segment-disabled {
opacity: .4;
pointer-events: none;
}
.segment-ios .segment-button-disabled {
color: $segment-button-ios-background-color-disabled;
opacity: $segment-ios-opacity-disabled;
pointer-events: none;
}
@ -94,69 +22,4 @@
@include position(0, 0, 0, 0);
position: absolute;
}
.toolbar-ios ion-segment-button {
max-width: $segment-button-ios-toolbar-button-max-width;
}
.toolbar-ios .segment-button {
height: $segment-button-ios-toolbar-button-height;
font-size: $segment-button-ios-toolbar-font-size;
line-height: $segment-button-ios-toolbar-line-height;
ion-icon {
font-size: $segment-button-ios-toolbar-icon-size;
line-height: $segment-button-ios-toolbar-icon-line-height;
}
}
// iOS Segment Button Mixin
// --------------------------------------------------
@mixin ios-segment-button($color-name) {
$color-base: ion-color($colors-ios, $color-name, base, ios);
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
.segment-ios-#{$color-name} {
.segment-button {
border-color: $color-base;
color: $color-base;
&:hover:not(.segment-activated) {
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
}
&:active:not(.segment-activated) {
background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
}
&.segment-activated {
color: $color-contrast;
background-color: $color-base;
}
}
.segment-button-disabled {
color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-medium);
}
}
}
// iOS Segment Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-ios {
$color-base: ion-color($colors-ios, $color-name, base, ios);
@include ios-segment-button($color-name);
.toolbar-ios-#{$color-name} .segment-ios .segment-button.segment-activated {
color: $color-base;
}
}
}

79
packages/core/src/components/segment/segment.ios.vars.scss
View File

@ -6,80 +6,5 @@
/// @prop - Background of the segment button
$segment-ios-font-family: $font-family-ios-base !default;
// TODO either move to button or rename
// ---------------------------------------------
/// @prop - Background of the segment button
$segment-button-ios-background-color: transparent !default;
/// @prop - Background of the activated segment button
$segment-button-ios-background-color-activated: ion-color($colors-ios, primary, base, ios) !default;
/// @prop - Background of the segment button when hovered
$segment-button-ios-background-color-hover: ion-color-alpha($colors-ios, primary, $alpha-ios-lowest) !default;
/// @prop - Background of the segment button when active
$segment-button-ios-background-color-active: ion-color-alpha($colors-ios, primary, $alpha-ios-low) !default;
/// @prop - Background of the activated segment button when active
$segment-button-ios-background-color-disabled: ion-color-alpha($colors-ios, primary, $alpha-ios-medium) !default;
/// @prop - Text color of the segment button
$segment-button-ios-text-color: ion-color($colors-ios, primary, contrast, ios) !default;
/// @prop - Transition of the activated segment button
$segment-button-ios-transition-activated: 100ms all linear !default;
/// @prop - Transition of the segment button on hover
$segment-button-ios-transition-hover: 100ms all linear !default;
/// @prop - Transition of the segment button when pressed
$segment-button-ios-transition-active: 100ms all linear !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: 32px !default;
/// @prop - Line height of the segment button
$segment-button-ios-line-height: 28px !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 - 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 - Max width of the segment button in a toolbar
$segment-button-ios-toolbar-button-max-width: 100px !default;
/// @prop - Height of the segment button in a toolbar
$segment-button-ios-toolbar-button-height: 26px !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;
/// @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-active: .16 !default;
/// @prop - Opacity of the disabled segment button
$segment-button-ios-opacity-disabled: .3 !default;
/// @prop - Opacity of the disabled segment
$segment-ios-opacity-disabled: .4 !default;

80
packages/core/src/components/segment/segment.md.scss
View File

@ -8,84 +8,8 @@
font-family: $segment-md-font-family;
}
.segment-md .segment-button {
@include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
flex: 1;
width: 0;
height: $segment-button-md-height;
border-bottom-width: $segment-button-md-border-bottom-width;
border-bottom-style: solid;
border-bottom-color: $segment-button-md-border-bottom-color;
font-size: $segment-button-md-font-size;
font-weight: 500;
line-height: $segment-button-md-line-height;
text-transform: uppercase;
color: $segment-button-md-text-color-active;
background-color: transparent;
opacity: $segment-button-md-opacity;
transition: 100ms all linear;
ion-icon {
font-size: $segment-button-md-icon-size;
line-height: $segment-button-md-icon-line-height;
}
&.activated,
&.segment-activated {
border-color: $segment-button-md-border-color-activated;
opacity: $segment-button-md-opacity-activated;
}
}
.segment-md.segment-disabled,
.segment-md .segment-button-disabled {
opacity: $segment-button-md-opacity-disabled;
.segment-md.segment-disabled {
opacity: $segment-md-opacity-disabled;
pointer-events: none;
}
.toolbar {
.segment-md {
@include margin(0, auto);
}
.segment-md .segment-button.activated,
.segment-md .segment-button.segment-activated {
opacity: 1;
}
}
// Material Design Segment Button Mixin
// --------------------------------------------------
@mixin md-segment-button($color-name) {
$color-base: ion-color($colors-md, $color-name, base, md);
.segment-md-#{$color-name} .segment-button {
color: $color-base;
&.activated,
&.segment-activated {
border-color: $color-base;
color: $color-base;
opacity: 1;
}
}
}
// Material Design Segment Color Generation
// --------------------------------------------------
@each $color-name, $color-value in $colors-md {
@include md-segment-button($color-name);
}

49
packages/core/src/components/segment/segment.md.vars.scss
View File

@ -6,50 +6,5 @@
/// @prop - Background of the segment button
$segment-md-font-family: $font-family-md-base !default;
/// @prop - Text color of the activated segment button
$segment-button-md-text-color-active: $toolbar-md-color-active !default;
/// @prop - Border color of the activated segment button
$segment-button-md-border-color-activated: $toolbar-md-color-active !default;
/// @prop - Width of the bottom border on the segment button
$segment-button-md-border-bottom-width: 2px !default;
/// @prop - Color of the bottom border on the segment button
$segment-button-md-border-bottom-color: rgba(#000, .10) !default;
/// @prop - Opacity of the segment button
$segment-button-md-opacity: .7 !default;
/// @prop - Opacity of the activated segment button
$segment-button-md-opacity-activated: 1 !default;
/// @prop - Opacity of the disabled segment button
$segment-button-md-opacity-disabled: .3 !default;
/// @prop - Padding top of the segment button
$segment-button-md-padding-top: 0 !default;
/// @prop - Padding end of the segment button
$segment-button-md-padding-end: 6px !default;
/// @prop - Padding bottom of the segment button
$segment-button-md-padding-bottom: $segment-button-md-padding-top !default;
/// @prop - Padding start of the segment button
$segment-button-md-padding-start: $segment-button-md-padding-end !default;
/// @prop - Height of the segment button
$segment-button-md-height: 42px !default;
/// @prop - Line height of the segment button
$segment-button-md-line-height: 40px !default;
/// @prop - Font size of the segment button
$segment-button-md-font-size: 12px !default;
/// @prop - Size of an icon in the segment button
$segment-button-md-icon-size: 26px !default;
/// @prop - Line height of an icon in the segment button
$segment-button-md-icon-line-height: $segment-button-md-line-height !default;
/// @prop - Opacity of the disabled segment
$segment-md-opacity-disabled: .3 !default;

33
packages/core/src/components/segment/segment.scss
View File

@ -12,36 +12,3 @@ ion-segment {
width: 100%;
}
ion-segment-button {
display: flex;
flex: 1;
}
.segment-button {
@include border-radius(0);
@include margin-horizontal(0);
@include text-align(center);
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
font-kerning: none;
user-select: none;
contain: content;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
&:active,
&:focus {
outline: none;
}
}

68
packages/core/src/components/segment/test/basic/index.html
View File

@ -32,6 +32,34 @@
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment name="dynamicPropDisable" disabled color="danger">
<ion-segment-button value="Bookmarks">
Bookmarks
</ion-segment-button>
<ion-segment-button value="Reading List">
Reading List
</ion-segment-button>
<ion-segment-button value="Shared Links">
Shared Links
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment name="dynamicAttrElem" color="secondary" value="active">
<ion-segment-button value="active">
Active
</ion-segment-button>
<ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
Disabled
</ion-segment-button>
<ion-segment-button value="inactive" disabled="false">
Inactive
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment color="danger">
<ion-segment-button value="sunny">
@ -68,7 +96,7 @@
</ion-segment-button>
</ion-segment>
<ion-segment id="dynamicPropDisable" disabled color="danger">
<ion-segment name="dynamicPropDisable" disabled color="danger">
<ion-segment-button value="Bookmarks">
Bookmarks
</ion-segment-button>
@ -80,11 +108,11 @@
</ion-segment-button>
</ion-segment>
<ion-segment id="dynamicAttrElem" color="secondary" value="active">
<ion-segment name="dynamicAttrElem" color="secondary" value="active">
<ion-segment-button value="active">
Active
</ion-segment-button>
<ion-segment-button id="dynamicAttrDisable" value="disabled" disabled="true">
<ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
Disabled
</ion-segment-button>
<ion-segment-button value="inactive" disabled="false">
@ -104,26 +132,32 @@
</div>
<script>
var dynamicAttrDisable = document.getElementById('dynamicAttrDisable');
var dynamicPropDisable = document.getElementById('dynamicPropDisable');
var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
var dynamicPropDisable = document.getElementsByName('dynamicPropDisable');
function toggleDisabled() {
const attrIsDisabled = dynamicAttrDisable.getAttribute('disabled') === 'true' ? false : true;
const propIsDisabled = dynamicPropDisable.disabled === true ? false : true;
dynamicAttrDisable.setAttribute('disabled', attrIsDisabled);
dynamicPropDisable.disabled = propIsDisabled;
for (var i = 0; i < dynamicAttrDisable.length; i++) {
const attrIsDisabled = dynamicAttrDisable[i].getAttribute('disabled') === 'true' ? false : true;
dynamicAttrDisable[i].setAttribute('disabled', attrIsDisabled);
}
for (var i = 0; i < dynamicPropDisable.length; i++) {
const propIsDisabled = dynamicPropDisable[i].disabled === true ? false : true;
dynamicPropDisable[i].disabled = propIsDisabled;
}
}
function toggleValue() {
var dynamicAttrElem = document.getElementById('dynamicAttrElem');
var dynamicAttrValue = dynamicAttrElem.getAttribute('value');
var dynamicAttrElem = document.getElementsByName('dynamicAttrElem');
for (var i = 0; i < dynamicAttrElem.length; i++) {
var dynamicAttrValue = dynamicAttrElem[i].getAttribute('value');
if (dynamicAttrValue === 'active') {
dynamicAttrElem.setAttribute('value', 'inactive');
} else if (dynamicAttrValue === 'inactive') {
dynamicAttrElem.setAttribute('value', 'disabled');
} else {
dynamicAttrElem.setAttribute('value', 'active');
if (dynamicAttrValue === 'active') {
dynamicAttrElem[i].setAttribute('value', 'inactive');
} else if (dynamicAttrValue === 'inactive') {
dynamicAttrElem[i].setAttribute('value', 'disabled');
} else {
dynamicAttrElem[i].setAttribute('value', 'active');
}
}
}