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

fix(segment): checked can be changed dynamically

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-28 15:29:30 +02:00
parent 545d3c29a2
commit 78454b4f62
6 changed files with 30 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,11 +8,6 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen
## Properties
#### activated
boolean
#### checked
boolean
@ -58,11 +53,6 @@ The value of the segment button.
## Attributes
#### activated
boolean
#### checked
boolean

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

@ -42,18 +42,18 @@ ion-segment-button {
line-height: $segment-button-ios-icon-line-height;
}
&.segment-activated {
&.segment-checked {
color: $segment-button-ios-text-color;
background-color: $segment-button-ios-background-color-activated;
transition: $segment-button-ios-transition-activated;
}
&:hover:not(.segment-activated) {
&:hover:not(.segment-checked) {
background-color: $segment-button-ios-background-color-hover;
transition: $segment-button-ios-transition-hover;
}
&:active:not(.segment-activated) {
&:active:not(.segment-checked) {
background-color: $segment-button-ios-background-color-active;
transition: $segment-button-ios-transition-active;
}
@ -116,15 +116,15 @@ ion-segment-button {
border-color: $color-base;
color: $color-base;
&:hover:not(.segment-activated) {
&:hover:not(.segment-checked) {
background-color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-hover);
}
&:active:not(.segment-activated) {
&:active:not(.segment-checked) {
background-color: ion-color($colors-ios, $color-name, base, ios, $segment-button-ios-background-color-alpha-active);
}
&.segment-activated {
&.segment-checked {
color: $color-contrast;
background-color: $color-base;
}
@ -145,7 +145,7 @@ ion-segment-button {
@include ios-segment-button($color-name);
.toolbar-ios-#{$color-name} .segment-button-ios.segment-activated {
.toolbar-ios-#{$color-name} .segment-button-ios.segment-checked {
color: $color-base;
}
}

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

@ -31,7 +31,7 @@
}
&.activated,
&.segment-activated {
&.segment-checked {
border-color: $segment-button-md-border-color-activated;
opacity: $segment-button-md-opacity-activated;
}
@ -58,7 +58,7 @@
color: $color-base;
&.activated,
&.segment-activated {
&.segment-checked {
border-color: $color-base;
color: $color-base;
}

22
core/src/components/segment-button/segment-button.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
import { Mode } from '../../interface';
import { createThemedClasses, getElementClassMap } from '../../utils/theme';
@ -15,8 +15,6 @@ export class SegmentButton {
@Element() el!: HTMLElement;
@Prop({ mutable: true }) activated = false;
/**
* The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@ -32,7 +30,7 @@ export class SegmentButton {
/**
* If true, the segment button is selected. Defaults to `false`.
*/
@Prop() checked = false;
@Prop({mutable: true}) checked = false;
/*
* If true, the user cannot interact with the segment button. Default false.
@ -55,11 +53,11 @@ export class SegmentButton {
*/
@Event() ionSelect!: EventEmitter<void>;
/**
* Emit the click event to the parent segment
*/
private onClick() {
this.ionSelect.emit();
@Watch('checked')
checkedChanged(checked: boolean, prev: boolean) {
if (checked && !prev) {
this.ionSelect.emit();
}
}
render() {
@ -68,7 +66,7 @@ export class SegmentButton {
const buttonClasses = {
'segment-button-disabled': this.disabled,
'segment-activated': this.activated,
'segment-checked': this.checked,
...themedClasses,
...hostClasses,
};
@ -81,11 +79,11 @@ export class SegmentButton {
return [
<TagType
{...attrs}
aria-pressed={this.activated}
aria-pressed={this.checked}
class={buttonClasses}
disabled={this.disabled}
href={this.href}
onClick={this.onClick.bind(this)}>
onClick={() => this.checked = true }>
<slot></slot>
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</TagType>