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

refactor(toggle): renamed ion-switch to ion-toggle

Browse Source
This commit is contained in:
Adam Bradley
2015-12-10 14:50:49 -06:00
parent 27ec57b907
commit 7f94b33c54
23 changed files with 478 additions and 468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@ -24,7 +24,6 @@
* searchbar: class `focused` has become `searchbar-focused`
##### `<ion-nav-items>` renamed to `<ion-buttons>`
* `primary` attribute `<ion-nav-items primary>` now `<ion-buttons start>`
@ -35,6 +34,12 @@
* If a menu is not given an `id`, then it is automatically assigned an id, such as `leftMenu` or `rightMenu`.
* If the menu toggle/close directives are not given a value then it tries the menu ids of `leftMenu` then `rightMenu`.
##### `<ion-switch>` renamed to `<ion-toggle>`
* Consistent naming with Ionic v1
* Reduce potential confusion with `ng-switch`
##### Bug Fixes
* **item-sliding**: fixed item-sliding, onDragEnd on mouseout of sliding element [f9199fb](https://github.com/driftyco/ionic2/commit/f9199fb3be6ce6b0a693e2e3b944b47ed8575531), closes [#702](https://github.com/driftyco/ionic2/issues/702)

48
demos/component-docs/inputs/switch/template.html
View File

@ -10,53 +10,53 @@
<ion-content>
<ion-list>
<ion-switch value="foo" checked="true">
<ion-toggle value="foo" checked="true">
Frodo Baggins
</ion-switch>
</ion-toggle>
<ion-switch energized>
<ion-toggle energized>
Sam
</ion-switch>
</ion-toggle>
<ion-switch danger checked="true">
<ion-toggle danger checked="true">
Éowyn
</ion-switch>
</ion-toggle>
<ion-switch royal checked="true">
<ion-toggle royal checked="true">
Legolas
</ion-switch>
</ion-toggle>
<ion-switch danger>
<ion-toggle danger>
Gimli
</ion-switch>
</ion-toggle>
<ion-switch dark checked="true">
<ion-toggle dark checked="true">
Saruman
</ion-switch>
</ion-toggle>
<ion-switch energized checked="true">
<ion-toggle energized checked="true">
Gandalf
</ion-switch>
</ion-toggle>
<ion-switch royal>
<ion-toggle royal>
Arwen
</ion-switch>
</ion-toggle>
<ion-switch secondary checked="true">
<ion-toggle secondary checked="true">
Treebeard
</ion-switch>
</ion-toggle>
<ion-switch royal>
<ion-toggle royal>
Boromir
</ion-switch>
</ion-toggle>
<ion-switch dark checked="true">
<ion-toggle dark checked="true">
Gollum
</ion-switch>
</ion-toggle>
<ion-switch energized>
<ion-toggle energized>
Galadriel
</ion-switch>
</ion-toggle>
</ion-list>

8
demos/component-docs/lists/icon/template.html
View File

@ -18,10 +18,10 @@
</ion-note>
</ion-item>
<ion-switch checked="false">
<ion-toggle checked="false">
<icon body item-left></icon>
Muggle Studies
</ion-switch>
</ion-toggle>
<ion-item>
<icon leaf item-left></icon>
@ -54,10 +54,10 @@
<ion-note item-right>Crucio!</ion-note>
</ion-item>
<ion-switch checked="true">
<ion-toggle checked="true">
<icon brush item-left></icon>
Quidditch Practice
</ion-switch>
</ion-toggle>
<ion-item>
<icon wine item-left></icon>

8
demos/icons/main.html
View File

@ -11,10 +11,10 @@
Favorite Icons
</ion-list-header>
<ion-switch>
<ion-toggle>
<icon wifi item-left></icon>
Wifi
</ion-switch>
</ion-toggle>
<ion-item>
<icon heart item-left></icon>
@ -32,10 +32,10 @@
</ion-note>
</ion-item>
<ion-switch checked="true">
<ion-toggle checked="true">
<icon color-wand item-left></icon>
Magic
</ion-switch>
</ion-toggle>
<ion-item>
<icon star item-left></icon>

8
demos/list/basic-list.html
View File

@ -19,10 +19,10 @@
List Header
</ion-list-header>
<ion-switch>
<ion-toggle>
<icon wifi item-left></icon>
Wifi
</ion-switch>
</ion-toggle>
<ion-item>
<icon heart item-left></icon>
@ -40,10 +40,10 @@
</ion-note>
</ion-item>
<ion-switch checked="true">
<ion-toggle checked="true">
<icon color-wand item-left></icon>
Magic
</ion-switch>
</ion-toggle>
<ion-item>
<icon star item-left></icon>

8
demos/list/inset-list.html
View File

@ -19,10 +19,10 @@
List Header
</ion-list-header>
<ion-switch>
<ion-toggle>
<icon wifi item-left></icon>
Wifi
</ion-switch>
</ion-toggle>
<ion-item>
<icon heart item-left></icon>
@ -40,10 +40,10 @@
</ion-note>
</ion-item>
<ion-switch checked="true">
<ion-toggle checked="true">
<icon color-wand item-left></icon>
Magic
</ion-switch>
</ion-toggle>
<ion-item>
<icon star item-left></icon>

8
demos/list/no-lines-list.html
View File

@ -19,10 +19,10 @@
List Header
</ion-list-header>
<ion-switch>
<ion-toggle>
<icon wifi item-left></icon>
Wifi
</ion-switch>
</ion-toggle>
<ion-item>
<icon heart item-left></icon>
@ -40,10 +40,10 @@
</ion-note>
</ion-item>
<ion-switch checked="true">
<ion-toggle checked="true">
<icon color-wand item-left></icon>
Magic
</ion-switch>
</ion-toggle>
<ion-item>
<icon star item-left></icon>

48
demos/switch/main.html
View File

@ -4,53 +4,53 @@
<ion-content>
<ion-list>
<ion-switch value="foo" checked="true">
<ion-toggle value="foo" checked="true">
Frodo Baggins
</ion-switch>
</ion-toggle>
<ion-switch energized>
<ion-toggle energized>
Sam
</ion-switch>
</ion-toggle>
<ion-switch danger checked="true">
<ion-toggle danger checked="true">
Éowyn
</ion-switch>
</ion-toggle>
<ion-switch royal checked="true">
<ion-toggle royal checked="true">
Legolas
</ion-switch>
</ion-toggle>
<ion-switch danger>
<ion-toggle danger>
Gimli
</ion-switch>
</ion-toggle>
<ion-switch dark checked="true">
<ion-toggle dark checked="true">
Saruman
</ion-switch>
</ion-toggle>
<ion-switch energized checked="true">
<ion-toggle energized checked="true">
Gandalf
</ion-switch>
</ion-toggle>
<ion-switch royal>
<ion-toggle royal>
Arwen
</ion-switch>
</ion-toggle>
<ion-switch secondary checked="true">
<ion-toggle secondary checked="true">
Treebeard
</ion-switch>
</ion-toggle>
<ion-switch royal>
<ion-toggle royal>
Boromir
</ion-switch>
</ion-toggle>
<ion-switch dark checked="true">
<ion-toggle dark checked="true">
Gollum
</ion-switch>
</ion-toggle>
<ion-switch energized>
<ion-toggle energized>
Galadriel
</ion-switch>
</ion-toggle>
</ion-list>

2
ionic/components.ios.scss
View File

@ -20,7 +20,7 @@
"components/radio/radio.ios",
"components/searchbar/searchbar.ios",
"components/segment/segment.ios",
"components/switch/switch.ios",
"components/tabs/tabs.ios",
"components/text-input/text-input.ios",
"components/toggle/toggle.ios",
"components/toolbar/toolbar.ios";

2
ionic/components.md.scss
View File

@ -21,7 +21,7 @@
"components/tap-click/ripple",
"components/searchbar/searchbar.md",
"components/segment/segment.md",
"components/switch/switch.md",
"components/tabs/tabs.md",
"components/text-input/text-input.md",
"components/toggle/toggle.md",
"components/toolbar/toolbar.md";

12
ionic/components/card/test/list/main.html
View File

@ -11,10 +11,10 @@
Card List
</ion-list-header>
<ion-switch>
<ion-toggle>
<icon wifi item-left></icon>
Wifi
</ion-switch>
</ion-toggle>
<ion-item>
<icon heart item-left></icon>
@ -44,10 +44,10 @@
Card List Without Lines
</ion-list-header>
<ion-switch>
<ion-toggle>
<icon wifi item-left></icon>
Wifi
</ion-switch>
</ion-toggle>
<ion-item>
<icon heart item-left></icon>
@ -75,10 +75,10 @@
Card With Items (No List)
</ion-card-header>
<ion-switch>
<ion-toggle>
<icon wifi item-left></icon>
Wifi
</ion-switch>
</ion-toggle>
<ion-item>
<icon heart item-left></icon>

8
ionic/components/list/test/headers/main.html
View File

@ -8,10 +8,10 @@
List Header
</ion-list-header>
<ion-switch>
<ion-toggle>
<icon wifi item-left></icon>
Wifi
</ion-switch>
</ion-toggle>
<ion-item>
<icon heart item-left></icon>
@ -38,10 +38,10 @@
List Header
</ion-list-header>
<ion-switch checked="true">
<ion-toggle checked="true">
<icon color-wand item-left></icon>
Magic
</ion-switch>
</ion-toggle>
<ion-item>
<icon star item-left></icon>

6
ionic/components/list/test/inset/main.html
View File

@ -20,9 +20,9 @@
List Link Item 2
</a>
<ion-switch checked="true">
Switch
</ion-switch>
<ion-toggle checked="true">
Toggle
</ion-toggle>
<ion-checkbox checked="true">
Checkbox

4
ionic/components/list/test/no-lines/main.html
View File

@ -6,10 +6,10 @@
List With No Lines
</ion-list-header>
<ion-switch>
<ion-toggle>
<icon wifi item-left></icon>
Wifi
</ion-switch>
</ion-toggle>
<ion-item>
<icon heart item-left></icon>

184
ionic/components/switch/switch.ios.scss
View File

@ -1,184 +0,0 @@
@import "../../globals.ios";
// iOS Switch
// --------------------------------------------------
$switch-ios-width: 51px !default;
$switch-ios-height: 32px !default;
$switch-ios-border-width: 2px !default;
$switch-ios-border-radius: $switch-ios-height / 2 !default;
$switch-ios-background-color-off: $list-ios-background-color !default;
$switch-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default;
$switch-ios-background-color-on: map-get($colors-ios, primary) !default;
$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default;
$switch-ios-handle-height: $switch-ios-handle-width !default;
$switch-ios-handle-border-radius: $switch-ios-handle-height / 2 !default;
$switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
$switch-ios-handle-background-color: $switch-ios-background-color-off !default;
$switch-ios-media-margin: 0 !default;
$switch-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
$switch-ios-transition-duration: 300ms !default;
$switch-ios-disabled-opacity: 0.5 !default;
$switch-ios-disabled-text-color: $subdued-text-ios-color !default;
// Switch
// -----------------------------------------
ion-switch {
display: block;
@include user-select-none();
&.item.activated {
background: $list-ios-background-color;
}
}
// Switch Wrapper
// -----------------------------------------
.switch-media {
margin: $switch-ios-media-margin;
padding: $switch-ios-media-padding;
cursor: pointer;
}
// Switch Background Track
// -----------------------------------------
.switch-icon {
// bg track, when not checked
position: relative;
display: block;
width: $switch-ios-width;
height: $switch-ios-height;
border-radius: $switch-ios-border-radius;
pointer-events: none;
background-color: $switch-ios-border-color-off;
transition: background-color $switch-ios-transition-duration;
}
// Switch Background Track, Inner Oval
// -----------------------------------------
.switch-icon:before {
// inner bg track's oval, when not checked
content: '';
position: absolute;
top: $switch-ios-border-width;
right: $switch-ios-border-width;
left: $switch-ios-border-width;
bottom: $switch-ios-border-width;
border-radius: $switch-ios-border-radius;
background-color: $switch-ios-background-color-off;
transform: scale3d(1, 1, 1);
transition: transform $switch-ios-transition-duration;
}
// Switch Knob
// -----------------------------------------
.switch-icon:after {
// knob, when not checked
content: '';
position: absolute;
top: $switch-ios-border-width;
left: $switch-ios-border-width;
width: $switch-ios-handle-width;
height: $switch-ios-handle-height;
border-radius: $switch-ios-handle-border-radius;
background-color: $switch-ios-handle-background-color;
box-shadow: $switch-ios-handle-box-shadow;
transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
}
// Switch Checked
// -----------------------------------------
ion-switch[aria-checked=true] {
.switch-icon {
// bg track, when checked
background-color: $switch-ios-background-color-on;
&:before {
// inner bg track's oval, when checked
transform: scale3d(0, 0, 0);
}
&:after {
// knob, when checked
transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
}
}
.switch-activated .switch-icon {
&:before {
// inner bg track's oval, when checked
transform: scale3d(0, 0, 0);
}
&:after {
// when pressing down on the switch and IS checked
// make the knob wider and move it left a bit
left: $switch-ios-border-width - 6;
// when pressing down on the switch and NOT checked
// then make the knob wider
width: $switch-ios-handle-width + 6;
}
}
}
// Switch Disabled
// -----------------------------------------
ion-switch[aria-disabled=true] {
opacity: $switch-ios-disabled-opacity;
color: $switch-ios-disabled-text-color;
pointer-events: none;
}
// iOS Switch Color Mixin
// --------------------------------------------------
@mixin switch-theme-ios($color-name, $bg-on) {
ion-switch[#{$color-name}] {
&[aria-checked=true] .switch-icon {
background-color: $bg-on;
}
}
}
// Generate iOS Switch Auxiliary Colors
// --------------------------------------------------
@each $color-name, $value in $colors-ios {
@include switch-theme-ios($color-name, $value);
}

140
ionic/components/switch/switch.md.scss
View File

@ -1,140 +0,0 @@
@import "../../globals.md";
// Material Design Switch
// --------------------------------------------------
$switch-md-active-color: map-get($colors-md, primary) !default;
$switch-md-track-width: 36px !default;
$switch-md-track-height: 14px !default;
$switch-md-track-background-color-off: $list-md-border-color !default;
$switch-md-track-background-color-on: lighten($switch-md-active-color, 25%) !default;
$switch-md-handle-width: 20px !default;
$switch-md-handle-height: 20px !default;
$switch-md-handle-background-color-off: $background-md-color !default;
$switch-md-handle-background-color-on: $switch-md-active-color !default;
$switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
$switch-md-handle-border-radius: 50% !default;
$switch-md-media-margin: 0 !default;
$switch-md-media-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
$switch-md-transition-duration: 300ms !default;
$switch-md-disabled-opacity: 0.5 !default;
$switch-md-disabled-text-color: $subdued-text-md-color !default;
// Switch
// -----------------------------------------
ion-switch {
display: block;
@include user-select-none();
}
// Switch Wrapper
// -----------------------------------------
.switch-media {
margin: $switch-md-media-margin;
padding: $switch-md-media-padding;
cursor: pointer;
}
// Switch Background Track
// -----------------------------------------
.switch-icon {
// bg track, when not checked
position: relative;
display: block;
width: $switch-md-track-width;
height: $switch-md-track-height;
pointer-events: none;
border-radius: $switch-md-track-height;
background-color: $switch-md-track-background-color-off;
transition: background-color $switch-md-transition-duration
}
// Switch Knob
// -----------------------------------------
.switch-icon:after {
// knob, when not checked
content: '';
position: absolute;
top: ($switch-md-handle-height - $switch-md-track-height) / -2;
left: 0;
width: $switch-md-handle-width;
height: $switch-md-handle-height;
border-radius: $switch-md-handle-border-radius;
box-shadow: $switch-md-handle-box-shadow;
background-color: $switch-md-handle-background-color-off;
transition-property: transform, background-color;
transition-duration: $switch-md-transition-duration;
}
// Switch Checked
// -----------------------------------------
ion-switch[aria-checked=true] .switch-icon {
// bg track, when not checked
background-color: $switch-md-track-background-color-on;
&:after {
// knob, when not checked
background-color: $switch-md-handle-background-color-on;
transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
}
}
// Switch Disabled
// -----------------------------------------
ion-switch[aria-disabled=true] {
opacity: $switch-md-disabled-opacity;
color: $switch-md-disabled-text-color;
pointer-events: none;
}
// Material Design Color Mixin
// --------------------------------------------------
@mixin switch-theme-md($color-name, $bg-on) {
ion-switch[#{$color-name}] {
&[aria-checked=true] .switch-icon {
background-color: lighten($bg-on, 25%);
}
&[aria-checked=true] .switch-icon:after {
background-color: $bg-on;
}
}
}
// Generate Material Design Switch Auxiliary Colors
// --------------------------------------------------
@each $color-name, $value in $colors-md {
@include switch-theme-md($color-name, $value);
}

2
ionic/components/switch/test/basic/e2e.ts → ionic/components/toggle/test/basic/e2e.ts
View File

@ -1,6 +1,6 @@
it('should check apple via switch element click', function() {
element(by.css('[ng-control=appleCtrl] .switch-media')).click();
element(by.css('[ng-control=appleCtrl] .toggle-media')).click();
});

0
ionic/components/switch/test/basic/index.ts → ionic/components/toggle/test/basic/index.ts
View File

26
ionic/components/switch/test/basic/main.html → ionic/components/toggle/test/basic/main.html
View File

@ -1,5 +1,5 @@
<ion-toolbar><ion-title>Switches</ion-title></ion-toolbar>
<ion-toolbar><ion-title>Toggles</ion-title></ion-toolbar>
<ion-content>
@ -8,29 +8,29 @@
<ion-list>
<ion-switch value="apple" checked="true" ng-control="appleCtrl">
<ion-toggle value="apple" checked="true" ng-control="appleCtrl">
Apple, value=apple, init checked
</ion-switch>
</ion-toggle>
<ion-switch ng-control="bananaCtrl">
<ion-toggle ng-control="bananaCtrl">
Banana, init no checked/value attributes
</ion-switch>
</ion-toggle>
<ion-switch value="cherry" disabled="true" ng-control="cherryCtrl">
<ion-toggle value="cherry" disabled="true" ng-control="cherryCtrl">
Cherry, value=cherry, init disabled
</ion-switch>
</ion-toggle>
<ion-switch value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
<ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
Grape, value=grape, init checked, disabled
</ion-switch>
</ion-toggle>
<ion-switch secondary checked="true">
<ion-toggle secondary checked="true">
Secondary color
</ion-switch>
</ion-toggle>
<ion-switch value="apple" checked="true" [(ng-model)]="myModel">
<ion-toggle value="apple" checked="true" [(ng-model)]="myModel">
I'm an NgModel
</ion-switch>
</ion-toggle>
</ion-list>

182
ionic/components/toggle/toggle.ios.scss Normal file
View File

@ -0,0 +1,182 @@
@import "../../globals.ios";
// iOS Toggle
// --------------------------------------------------
$toggle-ios-width: 51px !default;
$toggle-ios-height: 32px !default;
$toggle-ios-border-width: 2px !default;
$toggle-ios-border-radius: $toggle-ios-height / 2 !default;
$toggle-ios-background-color-off: $list-ios-background-color !default;
$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default;
$toggle-ios-background-color-on: map-get($colors-ios, primary) !default;
$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
$toggle-ios-handle-height: $toggle-ios-handle-width !default;
$toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default;
$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default;
$toggle-ios-media-margin: 0 !default;
$toggle-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
$toggle-ios-transition-duration: 300ms !default;
$toggle-ios-disabled-opacity: 0.5 !default;
$toggle-ios-disabled-text-color: $subdued-text-ios-color !default;
// Toggle
// -----------------------------------------
ion-toggle {
display: block;
@include user-select-none();
&.item.activated {
background: $list-ios-background-color;
}
}
// Toggle Wrapper
// -----------------------------------------
.toggle-media {
margin: $toggle-ios-media-margin;
padding: $toggle-ios-media-padding;
cursor: pointer;
}
// Toggle Background Track
// -----------------------------------------
.toggle-icon {
// bg track, when not checked
position: relative;
display: block;
width: $toggle-ios-width;
height: $toggle-ios-height;
border-radius: $toggle-ios-border-radius;
pointer-events: none;
background-color: $toggle-ios-border-color-off;
transition: background-color $toggle-ios-transition-duration;
}
// Toggle Background Track, Inner Oval
// -----------------------------------------
.toggle-icon:before {
// inner bg track's oval, when not checked
content: '';
position: absolute;
top: $toggle-ios-border-width;
right: $toggle-ios-border-width;
left: $toggle-ios-border-width;
bottom: $toggle-ios-border-width;
border-radius: $toggle-ios-border-radius;
background-color: $toggle-ios-background-color-off;
transform: scale3d(1, 1, 1);
transition: transform $toggle-ios-transition-duration;
}
// Toggle Knob
// -----------------------------------------
.toggle-icon:after {
// knob, when not checked
content: '';
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;
transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
}
// Toggle Checked
// -----------------------------------------
ion-toggle[aria-checked=true] {
.toggle-icon {
// bg track, when checked
background-color: $toggle-ios-background-color-on;
&:before {
// inner bg track's oval, when checked
transform: scale3d(0, 0, 0);
}
&:after {
// knob, when checked
transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
}
}
.toggle-activated .toggle-icon {
&:before {
// inner bg track's oval, when checked
transform: scale3d(0, 0, 0);
}
&:after {
// 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;
// when pressing down on the toggle and NOT checked
// then make the knob wider
width: $toggle-ios-handle-width + 6;
}
}
}
// Toggle Disabled
// -----------------------------------------
ion-toggle[aria-disabled=true] {
opacity: $toggle-ios-disabled-opacity;
color: $toggle-ios-disabled-text-color;
pointer-events: none;
}
// iOS Toggle Color Mixin
// --------------------------------------------------
@mixin ios-toggle-theme($color-name, $bg-on) {
ion-toggle[#{$color-name}] {
&[aria-checked=true] .toggle-icon {
background-color: $bg-on;
}
}
}
// Generate iOS Toggle Colors
// --------------------------------------------------
@each $color-name, $value in $colors-ios {
@include ios-toggle-theme($color-name, $value);
}

140
ionic/components/toggle/toggle.md.scss Normal file
View File

@ -0,0 +1,140 @@
@import "../../globals.md";
// Material Design Toggle
// --------------------------------------------------
$toggle-md-active-color: map-get($colors-md, primary) !default;
$toggle-md-track-width: 36px !default;
$toggle-md-track-height: 14px !default;
$toggle-md-track-background-color-off: $list-md-border-color !default;
$toggle-md-track-background-color-on: lighten($toggle-md-active-color, 25%) !default;
$toggle-md-handle-width: 20px !default;
$toggle-md-handle-height: 20px !default;
$toggle-md-handle-background-color-off: $background-md-color !default;
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;
$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
$toggle-md-handle-border-radius: 50% !default;
$toggle-md-media-margin: 0 !default;
$toggle-md-media-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
$toggle-md-transition-duration: 300ms !default;
$toggle-md-disabled-opacity: 0.5 !default;
$toggle-md-disabled-text-color: $subdued-text-md-color !default;
// Toggle
// -----------------------------------------
ion-toggle {
display: block;
@include user-select-none();
}
// Toggle Wrapper
// -----------------------------------------
.toggle-media {
margin: $toggle-md-media-margin;
padding: $toggle-md-media-padding;
cursor: pointer;
}
// Toggle Background Track
// -----------------------------------------
.toggle-icon {
// bg track, when not checked
position: relative;
display: block;
width: $toggle-md-track-width;
height: $toggle-md-track-height;
pointer-events: none;
border-radius: $toggle-md-track-height;
background-color: $toggle-md-track-background-color-off;
transition: background-color $toggle-md-transition-duration
}
// Toggle Knob
// -----------------------------------------
.toggle-icon:after {
// knob, when not checked
content: '';
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;
box-shadow: $toggle-md-handle-box-shadow;
background-color: $toggle-md-handle-background-color-off;
transition-property: transform, background-color;
transition-duration: $toggle-md-transition-duration;
}
// Toggle Checked
// -----------------------------------------
ion-toggle[aria-checked=true] .toggle-icon {
// bg track, when not checked
background-color: $toggle-md-track-background-color-on;
&:after {
// knob, when not checked
background-color: $toggle-md-handle-background-color-on;
transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
}
}
// Toggle Disabled
// -----------------------------------------
ion-toggle[aria-disabled=true] {
opacity: $toggle-md-disabled-opacity;
color: $toggle-md-disabled-text-color;
pointer-events: none;
}
// Material Design Color Mixin
// --------------------------------------------------
@mixin toggle-theme-md($color-name, $bg-on) {
ion-toggle[#{$color-name}] {
&[aria-checked=true] .toggle-icon {
background-color: lighten($bg-on, 25%);
}
&[aria-checked=true] .toggle-icon:after {
background-color: $bg-on;
}
}
}
// Generate Material Design Toggle Auxiliary Colors
// --------------------------------------------------
@each $color-name, $value in $colors-md {
@include toggle-theme-md($color-name, $value);
}

91
ionic/components/switch/switch.ts → ionic/components/toggle/toggle.ts
View File

@ -9,69 +9,69 @@ import {pointerCoord} from '../../util/dom';
* @private
*/
@Directive({
selector: '.switch-media',
selector: '.toggle-media',
host: {
'[class.switch-activated]': 'swtch.isActivated'
'[class.toggle-activated]': 'toggle.isActivated'
}
})
class MediaSwitch {
class MediaToggle {
/**
* TODO
* @param {Switch} swtch TODO
* @param {Toggle} toggle TODO
* @param {} elementRef TODO
* @param {Config} config TODO
*/
constructor(
@Host() @Inject(forwardRef(() => Switch)) swtch: Switch,
@Host() @Inject(forwardRef(() => Toggle)) toggle: Toggle,
elementRef: ElementRef
) {
swtch.switchEle = elementRef.nativeElement;
this.swtch = swtch;
toggle.toggleEle = elementRef.nativeElement;
this.toggle = toggle;
}
}
/**
* @name Switch
* @name Toggle
* @description
* A switch technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the `<label>` in order to make the entire toggle easy to tap or drag.
* Switches can also have colors assigned to them, by adding any color attribute to them.
* A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the `<label>` in order to make the entire toggle easy to tap or drag.
* Togglees can also have colors assigned to them, by adding any color attribute to them.
*
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
* @property {any} [value] - the inital value of the switch
* @property {boolean} [checked] - whether the switch it toggled or not
* @property {boolean} [disabled] - whether the switch is disabled or not
* @property {string} [id] - a unique ID for a switch
* @property {any} [value] - the inital value of the toggle
* @property {boolean} [checked] - whether the toggle it toggled or not
* @property {boolean} [disabled] - whether the toggle is disabled or not
* @property {string} [id] - a unique ID for a toggle
* @usage
* ```html
* // Create a single switch
* <ion-switch checked="true">
* // Create a single toggle
* <ion-toggle checked="true">
* Pineapple
* </ion-switch>
* </ion-toggle>
*
* // Create a list of switches:
* // Create a list of togglees:
* <ion-list>
*
* <ion-switch checked="true">
* <ion-toggle checked="true">
* Apple
* </ion-switch>
* </ion-toggle>
*
* <ion-switch checked="false">
* <ion-toggle checked="false">
* Banana
* </ion-switch>
* </ion-toggle>
*
* <ion-switch disabled="true">
* <ion-toggle disabled="true">
* Cherry
* </ion-switch>
* </ion-toggle>
*
* </ion-list>
* ```
* @demo /docs/v2/demos/switch/
* @see {@link /docs/v2/components#switch Switch Component Docs}
* @demo /docs/v2/demos/toggle/
* @see {@link /docs/v2/components#toggle Toggle Component Docs}
*/
@Component({
selector: 'ion-switch',
selector: 'ion-toggle,ion-switch',
inputs: [
'value',
'checked',
@ -97,13 +97,13 @@ class MediaSwitch {
'<ion-item-content id="{{labelId}}">' +
'<ng-content></ng-content>' +
'</ion-item-content>' +
'<div disable-activated class="switch-media">' +
'<div class="switch-icon"></div>' +
'<div disable-activated class="toggle-media">' +
'<div class="toggle-icon"></div>' +
'</div>' +
`</div>`,
directives: [MediaSwitch]
directives: [MediaToggle]
})
export class Switch {
export class Toggle {
constructor(
form: Form,
@ -111,6 +111,12 @@ export class Switch {
config: Config,
@Optional() private ngControl: NgControl
) {
// deprecated warning
if (elementRef.nativeElement.tagName == 'ION-SWITCH') {
console.warn('<ion-switch> has been renamed to <ion-toggle>, please update your HTML');
}
this.form = form;
form.register(this);
@ -120,8 +126,9 @@ export class Switch {
this.onChange = (_) => {};
this.onTouched = (_) => {};
if (ngControl) ngControl.valueAccessor = this;
if (ngControl) {
ngControl.valueAccessor = this;
}
let self = this;
function pointerMove(ev) {
@ -145,14 +152,14 @@ export class Switch {
}
this.addMoveListener = function() {
self.switchEle.addEventListener('touchmove', pointerMove);
self.switchEle.addEventListener('mousemove', pointerMove);
self.toggleEle.addEventListener('touchmove', pointerMove);
self.toggleEle.addEventListener('mousemove', pointerMove);
elementRef.nativeElement.addEventListener('mouseout', pointerOut);
};
this.removeMoveListener = function() {
self.switchEle.removeEventListener('touchmove', pointerMove);
self.switchEle.removeEventListener('mousemove', pointerMove);
self.toggleEle.removeEventListener('touchmove', pointerMove);
self.toggleEle.removeEventListener('mousemove', pointerMove);
elementRef.nativeElement.removeEventListener('mouseout', pointerOut);
};
}
@ -165,8 +172,8 @@ export class Switch {
}
/**
* Set checked state of this switch.
* @param {boolean} value Boolean to set this switch's checked state to.
* Set checked state of this toggle.
* @param {boolean} value Boolean to set this toggle's checked state to.
* @private
*/
check(value) {
@ -175,7 +182,7 @@ export class Switch {
}
/**
* Toggle the checked state of this switch.
* Toggle the checked state of this toggle.
* @private
*/
toggle(ev) {
@ -242,7 +249,7 @@ export class Switch {
*/
ngOnDestroy() {
this.removeMoveListener();
this.switchEle = this.addMoveListener = this.removeMoveListener = null;
this.toggleEle = this.addMoveListener = this.removeMoveListener = null;
this.form.deregister(this);
}
@ -250,6 +257,6 @@ export class Switch {
* @private
*/
isDisabled(ev) {
return (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) || (this.mode == 'ios' && ev.target.tagName == 'ION-SWITCH');
return (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) || (this.mode == 'ios' && ev.target.tagName == 'ion-toggle');
}
}

4
ionic/config/directives.ts
View File

@ -18,7 +18,7 @@ import {ItemSliding} from '../components/item/item-sliding';
import {Toolbar, ToolbarTitle, ToolbarItem} from '../components/toolbar/toolbar';
import {Icon} from '../components/icon/icon';
import {Checkbox} from '../components/checkbox/checkbox';
import {Switch} from '../components/switch/switch';
import {Toggle} from '../components/toggle/toggle';
import {TextInput, TextInputElement} from '../components/text-input/text-input';
import {Label} from '../components/text-input/label';
import {Segment, SegmentButton} from '../components/segment/segment';
@ -82,7 +82,7 @@ export const IONIC_DIRECTIVES = [
Checkbox,
RadioGroup,
RadioButton,
Switch,
Toggle,
TextInput,
TextInputElement,
Label,