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

chore(toggle): update core toggle

Browse Source
This commit is contained in:
Adam Bradley
2017-05-24 13:40:19 -05:00
parent 1bd14e3f24
commit d4c382239d
5 changed files with 191 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/toggle/toggle.ios.scss
View File

@ -50,12 +50,35 @@ $toggle-ios-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle
$toggle-ios-disabled-opacity: .3 !default;
/// @prop - Padding of the toggle positioned on the left in an item
$toggle-ios-item-left-padding: 6px 16px 5px 0 !default;
// deprecated
$toggle-ios-item-left-padding: null !default;
/// @prop - Padding of the toggle positioned on the right in an item
$toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
/// @prop - Padding top of the toggle positioned on the start in an item
$toggle-ios-item-start-padding-top: 6px !default;
/// @prop - Padding end of the toggle positioned on the start in an item
$toggle-ios-item-start-padding-end: 16px !default;
/// @prop - Padding bottom of the toggle positioned on the start in an item
$toggle-ios-item-start-padding-bottom: 5px !default;
/// @prop - Padding start of the toggle positioned on the start in an item
$toggle-ios-item-start-padding-start: 0 !default;
// deprecated
$toggle-ios-item-right-padding: null !default;
/// @prop - Padding top of the toggle positioned on the end in an item
$toggle-ios-item-end-padding-top: 6px !default;
/// @prop - Padding end of the toggle positioned on the end in an item
$toggle-ios-item-end-padding-end: ($item-ios-padding-end / 2) !default;
/// @prop - Padding bottom of the toggle positioned on the end in an item
$toggle-ios-item-end-padding-bottom: 5px !default;
/// @prop - Padding start of the toggle positioned on the end in an item
$toggle-ios-item-end-padding-start: $item-ios-padding-start !default;
// iOS Toggle
// -----------------------------------------
@ -76,14 +99,14 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
// -----------------------------------------
.toggle-ios .toggle-icon {
@include border-radius($toggle-ios-border-radius);
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: $toggle-ios-border-radius;
background-color: $toggle-ios-border-color-off;
transition: background-color $toggle-ios-transition-duration;
@ -95,13 +118,11 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
// -----------------------------------------
.toggle-ios .toggle-icon::before {
position: absolute;
top: $toggle-ios-border-width;
right: $toggle-ios-border-width;
bottom: $toggle-ios-border-width;
left: $toggle-ios-border-width;
@include position($toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width);
@include border-radius($toggle-ios-border-radius);
position: absolute;
border-radius: $toggle-ios-border-radius;
background-color: $toggle-ios-background-color-off;
content: "";
@ -114,14 +135,14 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
// -----------------------------------------
.toggle-ios .toggle-inner {
@include position($toggle-ios-border-width, null, null, $toggle-ios-border-width);
@include border-radius($toggle-ios-handle-border-radius);
position: absolute;
top: $toggle-ios-border-width;
left: $toggle-ios-border-width;
width: $toggle-ios-handle-width;
height: $toggle-ios-handle-height;
border-radius: $toggle-ios-handle-border-radius;
background-color: $toggle-ios-handle-background-color;
box-shadow: $toggle-ios-handle-box-shadow;
@ -157,6 +178,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
}
// iOS Toggle Background Oval: Activated and Checked
// -----------------------------------------
@ -179,7 +201,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
.toggle-ios.toggle-activated.toggle-checked .toggle-inner {
// when pressing down on the toggle and IS checked
// make the knob wider and move it left a bit
left: $toggle-ios-border-width - 6;
@include position-horizontal($toggle-ios-border-width - 6, null);
}
@ -198,8 +220,11 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
// -----------------------------------------
.item-ios .toggle-ios {
margin: $toggle-ios-media-margin;
padding: $toggle-ios-item-right-padding;
@include margin($toggle-ios-media-margin);
@include deprecated-variable(padding, $toggle-ios-item-right-padding) {
@include padding($toggle-ios-item-end-padding-top, $toggle-ios-item-end-padding-end, $toggle-ios-item-end-padding-bottom, $toggle-ios-item-end-padding-start);
}
}
.item-ios .toggle-ios[slot="start"] {

95
src/components/toggle/toggle.md.scss
View File

@ -38,8 +38,20 @@ $toggle-md-handle-background-color-off: $background-md-color !default;
/// @prop - Background color of the checked toggle handle
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;
/// @prop - Margin of the toggle
$toggle-md-media-margin: 0 !default;
// deprecated
$toggle-md-media-margin: null !default;
/// @prop - Margin top of the toggle
$toggle-md-media-margin-top: 0 !default;
/// @prop - Margin end of the toggle
$toggle-md-media-margin-end: $toggle-md-media-margin-top !default;
/// @prop - Margin bottom of the toggle
$toggle-md-media-margin-bottom: $toggle-md-media-margin-top !default;
/// @prop - Margin start of the toggle
$toggle-md-media-margin-start: $toggle-md-media-margin-end !default;
/// @prop - Transition duration of the toggle icon
$toggle-md-transition-duration: 300ms !default;
@ -47,15 +59,50 @@ $toggle-md-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle
$toggle-md-disabled-opacity: .3 !default;
/// @prop - Padding of standalone toggle
$toggle-md-padding: 12px !default;
// deprecated
$toggle-md-padding: null !default;
/// @prop - Padding of the toggle positioned on the left in an item
$toggle-md-item-left-padding: 12px 18px 12px 2px !default;
/// @prop - Padding top of standalone toggle
$toggle-md-padding-top: 12px !default;
/// @prop - Padding of the toggle positioned on the right in an item
$toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
/// @prop - Padding end of standalone toggle
$toggle-md-padding-end: $toggle-md-padding-top !default;
/// @prop - Padding bottom of standalone toggle
$toggle-md-padding-bottom: $toggle-md-padding-top !default;
/// @prop - Padding start of standalone toggle
$toggle-md-padding-start: $toggle-md-padding-end !default;
// deprecated
$toggle-md-item-left-padding: null !default;
/// @prop - Padding top of the toggle positioned on the start in an item
$toggle-md-item-start-padding-top: 12px !default;
/// @prop - Padding end of the toggle positioned on the start in an item
$toggle-md-item-start-padding-end: 18px !default;
/// @prop - Padding bottom of the toggle positioned on the start in an item
$toggle-md-item-start-padding-bottom: 12px !default;
/// @prop - Padding start the toggle positioned on the start in an item
$toggle-md-item-start-padding-start: 2px !default;
// deprecated
$toggle-md-item-right-padding: null !default;
/// @prop - Padding top of the toggle positioned on the end in an item
$toggle-md-item-end-padding-top: 12px !default;
/// @prop - Padding end of the toggle positioned on the end in an item
$toggle-md-item-end-padding-end: ($item-md-padding-end / 2) !default;
/// @prop - Padding bottom of the toggle positioned on the end in an item
$toggle-md-item-end-padding-bottom: 12px !default;
/// @prop - Padding start of the toggle positioned on the end in an item
$toggle-md-item-end-padding-start: $item-md-padding-start !default;
// Material Design Toggle
// -----------------------------------------
@ -63,14 +110,16 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
.toggle-md {
position: relative;
padding: $toggle-md-padding;
width: $toggle-md-track-width;
height: $toggle-md-track-height;
box-sizing: content-box;
contain: strict;
@include deprecated-variable(padding, $toggle-md-padding) {
@include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start);
}
}
@ -78,13 +127,14 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
// -----------------------------------------
.toggle-md .toggle-icon {
@include border-radius($toggle-md-track-height);
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: $toggle-md-track-height;
background-color: $toggle-md-track-background-color-off;
transition: background-color $toggle-md-transition-duration;
@ -97,14 +147,14 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
// -----------------------------------------
.toggle-md .toggle-inner {
@include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0);
@include border-radius($toggle-md-handle-border-radius);
position: absolute;
top: ($toggle-md-handle-height - $toggle-md-track-height) / -2;
left: 0;
width: $toggle-md-handle-width;
height: $toggle-md-handle-height;
border-radius: $toggle-md-handle-border-radius;
background-color: $toggle-md-handle-background-color-off;
box-shadow: $toggle-md-handle-box-shadow;
@ -154,18 +204,25 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
// -----------------------------------------
.item-md .toggle-md {
margin: $toggle-md-media-margin;
padding: $toggle-md-item-right-padding;
cursor: pointer;
@include deprecated-variable(margin, $toggle-md-media-margin) {
@include margin($toggle-md-media-margin-top, $toggle-md-media-margin-end, $toggle-md-media-margin-bottom, $toggle-md-media-margin-start);
}
@include deprecated-variable(padding, $toggle-md-item-right-padding) {
@include padding($toggle-md-item-end-padding-top, $toggle-md-item-end-padding-end, $toggle-md-item-end-padding-bottom, $toggle-md-item-end-padding-start);
}
}
.item-md .toggle-md[slot="start"] {
padding: $toggle-md-item-left-padding;
@include deprecated-variable(padding, $toggle-md-item-left-padding) {
@include padding($toggle-md-item-start-padding-top, $toggle-md-item-start-padding-end, $toggle-md-item-start-padding-bottom, $toggle-md-item-start-padding-start);
}
}
.item-md.item-toggle ion-label {
margin-left: 0;
@include margin-horizontal(0, null);
}

2
src/components/toggle/toggle.scss
View File

@ -10,7 +10,7 @@ ion-toggle {
contain: content;
}
ion-toggle.upgraded {
ion-toggle.hydrated {
visibility: inherit;
}

34
src/components/toggle/toggle.ts
View File

@ -12,22 +12,46 @@ import { Component, h, Ionic, Listen, Prop, Watch } from '../index';
shadow: false
})
export class Toggle implements BooleanInputComponent {
activated: boolean;
hasFocus: boolean;
activated: boolean = false;
hasFocus: boolean = false;
id: string;
labelId: string;
startX: number;
styleTmr: any;
@Prop() checked: boolean;
@Prop() disabled: boolean;
@Prop() checked: boolean = false;
@Prop() disabled: boolean = false;
@Prop() value: string;
ionViewDidLoad() {
this.emitStyle();
}
@Watch('checked')
changed(val: boolean) {
Ionic.emit(this, 'ionChange', { detail: { checked: val } });
this.emitStyle();
}
@Watch('disabled')
disableChanged() {
this.emitStyle();
}
private emitStyle() {
clearTimeout(this.styleTmr);
this.styleTmr = setTimeout(() => {
Ionic.emit(this, 'ionStyle', {
detail: {
'toggle-disabled': this.disabled,
'toggle-checked': this.checked,
'toggle-activated': this.activated,
'toggle-focus': this.hasFocus
}
});
});
}
private canStart() {
return !this.disabled;
@ -92,6 +116,7 @@ export class Toggle implements BooleanInputComponent {
if (!this.hasFocus) {
this.hasFocus = true;
Ionic.emit(this, 'ionFocus');
this.emitStyle();
}
}
@ -100,6 +125,7 @@ export class Toggle implements BooleanInputComponent {
if (this.hasFocus) {
this.hasFocus = false;
Ionic.emit(this, 'ionBlur');
this.emitStyle();
}
}

53
src/components/toggle/toggle.wp.scss
View File

@ -62,12 +62,35 @@ $toggle-wp-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle
$toggle-wp-disabled-opacity: .3 !default;
/// @prop - Padding of the toggle positioned on the left in an item
$toggle-wp-item-left-padding: 12px 18px 12px 2px !default;
// deprecated
$toggle-wp-item-left-padding: null !default;
/// @prop - Padding of the toggle positioned on the right in an item
$toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default;
/// @prop - Padding top of the toggle positioned on the start in an item
$toggle-wp-item-start-padding-top: 12px !default;
/// @prop - Padding end of the toggle positioned on the start in an item
$toggle-wp-item-start-padding-end: 18px !default;
/// @prop - Padding bottom of the toggle positioned on the start in an item
$toggle-wp-item-start-padding-bottom: 12px !default;
/// @prop - Padding start the toggle positioned on the start in an item
$toggle-wp-item-start-padding-start: 2px !default;
// deprecated
$toggle-wp-item-right-padding: null !default;
/// @prop - Padding top of the toggle positioned on the end in an item
$toggle-wp-item-end-padding-top: 12px !default;
/// @prop - Padding end of the toggle positioned on the end in an item
$toggle-wp-item-end-padding-end: ($item-wp-padding-end / 2) !default;
/// @prop - Padding bottom of the toggle positioned on the end in an item
$toggle-wp-item-end-padding-bottom: 12px !default;
/// @prop - Padding start of the toggle positioned on the end in an item
$toggle-wp-item-end-padding-start: $item-wp-padding-start !default;
// Windows Toggle
// -----------------------------------------
@ -88,6 +111,8 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
// -----------------------------------------
.toggle-wp .toggle-icon {
@include border-radius($toggle-wp-track-height);
position: relative;
display: block;
@ -95,7 +120,6 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
height: 100%;
border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off;
border-radius: $toggle-wp-track-height;
background-color: $toggle-wp-track-background-color-off;
pointer-events: none;
@ -108,14 +132,14 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
// -----------------------------------------
.toggle-wp .toggle-inner {
@include position($toggle-wp-handle-top, null, null, $toggle-wp-handle-left);
@include border-radius($toggle-wp-handle-border-radius);
position: absolute;
top: $toggle-wp-handle-top;
left: $toggle-wp-handle-left;
width: $toggle-wp-handle-width;
height: $toggle-wp-handle-height;
border-radius: $toggle-wp-handle-border-radius;
background-color: $toggle-wp-handle-background-color-off;
transition-duration: $toggle-wp-transition-duration;
@ -162,18 +186,23 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
// -----------------------------------------
.item-wp .toggle-wp {
margin: $toggle-wp-media-margin;
padding: $toggle-wp-item-right-padding;
@include margin($toggle-wp-media-margin);
cursor: pointer;
@include deprecated-variable(padding, $toggle-wp-item-right-padding) {
@include padding($toggle-wp-item-end-padding-top, $toggle-wp-item-end-padding-end, $toggle-wp-item-end-padding-bottom, $toggle-wp-item-end-padding-start);
}
}
.item-wp .toggle-wp[slot="start"] {
padding: $toggle-wp-item-left-padding;
@include deprecated-variable(padding, $toggle-wp-item-left-padding) {
@include padding($toggle-wp-item-start-padding-top, $toggle-wp-item-start-padding-end, $toggle-wp-item-start-padding-bottom, $toggle-wp-item-start-padding-start);
}
}
.item-wp.item-toggle ion-label {
margin-left: 0;
@include margin-horizontal(0, null);
}