mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
removed div.track from toggle
This commit is contained in:
Adam Bradley
118
dist/css/ionic-scoped.css
vendored
118
dist/css/ionic-scoped.css
vendored
@ -177,13 +177,14 @@
|
||||
/**
|
||||
* List refreser elements
|
||||
*/
|
||||
/* the checkmark within the box */
|
||||
/* what the background looks like when its checked */
|
||||
/* what the checkmark looks like when its checked */
|
||||
/* the overall container of the toggle */
|
||||
/* hide the actual <input type="checkbox"> */
|
||||
/* the background of the toggle's track area */
|
||||
/* also the track appearance when the toggle is "off" */
|
||||
/* the handle (circle) thats inside the toggle's track area */
|
||||
/* also the appearance when the handle is "off" */
|
||||
/* When the toggle is "on" */
|
||||
/* The track when the toggle is "on" */
|
||||
/* the handle when the toggle is "on" */
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0.7; }
|
||||
@ -2121,62 +2122,81 @@
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 7px 7px;
|
||||
cursor: pointer; }
|
||||
.ionic .checkbox input {
|
||||
position: relative;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
/* what the checkbox looks like when its not checked */
|
||||
/* the checkmark within the box */
|
||||
/* what it looks like when it is checked */ }
|
||||
.ionic .checkbox input {
|
||||
display: none; }
|
||||
.ionic .checkbox .handle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
-webkit-appearance: none; }
|
||||
.ionic .checkbox input:before {
|
||||
/* what the checkbox looks like when its not checked */
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #049cdb;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
content: ' ';
|
||||
transition: background-color 0.1s ease-in-out; }
|
||||
.ionic .checkbox .handle:after {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
left: 14px;
|
||||
width: 14px;
|
||||
height: 7px;
|
||||
border: 1px solid white;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transition: opacity 0.05s ease-in-out;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
.ionic .checkbox input:checked + .handle {
|
||||
background: #049cdb; }
|
||||
.ionic .checkbox input:checked + .handle:after {
|
||||
opacity: 1; }
|
||||
.ionic .checkbox input:after {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
left: 26%;
|
||||
display: table;
|
||||
width: 14px;
|
||||
height: 7px;
|
||||
border: 1px solid white;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
content: ' ';
|
||||
opacity: 0;
|
||||
transition: opacity 0.05s ease-in-out;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
.ionic .checkbox input:checked:before {
|
||||
border: 0;
|
||||
background: #049cdb; }
|
||||
.ionic .checkbox input:checked:after {
|
||||
opacity: 1; }
|
||||
.ionic .toggle {
|
||||
position: relative;
|
||||
display: inline-block; }
|
||||
.ionic .toggle input[type="checkbox"] {
|
||||
display: none; }
|
||||
.ionic .toggle .track {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
.ionic .toggle input {
|
||||
/* set the actual checkbox input to have a width/height */
|
||||
/* but hide its appearance, then use :after to style it */
|
||||
width: 54px;
|
||||
height: 32px;
|
||||
border: solid 2px #e5e5e5;
|
||||
border-radius: 20px;
|
||||
background-color: #e5e5e5;
|
||||
cursor: pointer;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.1s;
|
||||
transition-property: background-color, border; }
|
||||
border: 0;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
/* the track appearance when the toggle is "off" */ }
|
||||
.ionic .toggle input:after {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid 2px #e5e5e5;
|
||||
border-radius: 20px;
|
||||
background-color: #e5e5e5;
|
||||
content: ' ';
|
||||
cursor: pointer;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.1s;
|
||||
transition-property: background-color, border; }
|
||||
.ionic .toggle .handle {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 2px;
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
transition: -webkit-transform 0.1s ease-in-out;
|
||||
/* used to create a larger hit area to slide the handle */ }
|
||||
/* used to create a larger (but hidden) hit area to slide the handle */ }
|
||||
.ionic .toggle .handle:before {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
@ -2184,14 +2204,12 @@
|
||||
display: table;
|
||||
padding: 17px 30px;
|
||||
content: " "; }
|
||||
.ionic .toggle :checked + .track {
|
||||
/* the track when the toggle is "on" */
|
||||
.ionic .toggle input:checked:after {
|
||||
border-color: #5f85ef;
|
||||
background-color: #5f85ef;
|
||||
/* the handle when the toggle is "on" */ }
|
||||
.ionic .toggle :checked + .track .handle {
|
||||
background-color: white;
|
||||
-webkit-transform: translate3d(22px, 0, 0); }
|
||||
background-color: #5f85ef; }
|
||||
.ionic .toggle input:checked + .handle {
|
||||
background-color: white;
|
||||
-webkit-transform: translate3d(22px, 0, 0); }
|
||||
.ionic .radio-buttton-list .list-item-content {
|
||||
/* give some room to the right for the checkmark icon */
|
||||
padding-right: 60px; }
|
||||
|
||||
124
dist/css/ionic.css
vendored
124
dist/css/ionic.css
vendored
@ -2591,72 +2591,94 @@ input[type="checkbox"][readonly] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 7px 7px;
|
||||
cursor: pointer; }
|
||||
|
||||
.checkbox input {
|
||||
position: relative;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
/* what the checkbox looks like when its not checked */
|
||||
/* the checkmark within the box */
|
||||
/* what it looks like when it is checked */ }
|
||||
.checkbox input {
|
||||
display: none; }
|
||||
.checkbox .handle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
-webkit-appearance: none; }
|
||||
.checkbox input:before {
|
||||
/* what the checkbox looks like when its not checked */
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #049cdb;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
content: ' ';
|
||||
transition: background-color 0.1s ease-in-out; }
|
||||
.checkbox .handle:after {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
left: 14px;
|
||||
width: 14px;
|
||||
height: 7px;
|
||||
border: 1px solid white;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
transition: opacity 0.05s ease-in-out;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
.checkbox input:checked + .handle {
|
||||
background: #049cdb; }
|
||||
.checkbox input:checked + .handle:after {
|
||||
opacity: 1; }
|
||||
|
||||
/* the checkmark within the box */
|
||||
.checkbox input:after {
|
||||
position: absolute;
|
||||
top: 37%;
|
||||
left: 26%;
|
||||
display: table;
|
||||
width: 14px;
|
||||
height: 7px;
|
||||
border: 1px solid white;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
content: ' ';
|
||||
opacity: 0;
|
||||
transition: opacity 0.05s ease-in-out;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
|
||||
/* what the background looks like when its checked */
|
||||
.checkbox input:checked:before {
|
||||
border: 0;
|
||||
background: #049cdb; }
|
||||
|
||||
/* what the checkmark looks like when its checked */
|
||||
.checkbox input:checked:after {
|
||||
opacity: 1; }
|
||||
|
||||
/* the overall container of the toggle */
|
||||
.toggle {
|
||||
position: relative;
|
||||
display: inline-block; }
|
||||
|
||||
/* hide the actual <input type="checkbox"> */
|
||||
.toggle input[type="checkbox"] {
|
||||
display: none; }
|
||||
|
||||
/* the background of the toggle's track area */
|
||||
/* also the track appearance when the toggle is "off" */
|
||||
.toggle .track {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
.toggle input {
|
||||
/* set the actual checkbox input to have a width/height */
|
||||
/* but hide its appearance, then use :after to style it */
|
||||
width: 54px;
|
||||
height: 32px;
|
||||
border: solid 2px #e5e5e5;
|
||||
border-radius: 20px;
|
||||
background-color: #e5e5e5;
|
||||
cursor: pointer;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.1s;
|
||||
transition-property: background-color, border; }
|
||||
border: 0;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
/* the track appearance when the toggle is "off" */ }
|
||||
.toggle input:after {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid 2px #e5e5e5;
|
||||
border-radius: 20px;
|
||||
background-color: #e5e5e5;
|
||||
content: ' ';
|
||||
cursor: pointer;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.1s;
|
||||
transition-property: background-color, border; }
|
||||
|
||||
/* the handle (circle) thats inside the toggle's track area */
|
||||
/* also the appearance when the handle is "off" */
|
||||
.toggle .handle {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 2px;
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
transition: -webkit-transform 0.1s ease-in-out;
|
||||
/* used to create a larger hit area to slide the handle */ }
|
||||
/* used to create a larger (but hidden) hit area to slide the handle */ }
|
||||
.toggle .handle:before {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
@ -2665,15 +2687,15 @@ input[type="checkbox"][readonly] {
|
||||
padding: 17px 30px;
|
||||
content: " "; }
|
||||
|
||||
/* When the toggle is "on" */
|
||||
.toggle :checked + .track {
|
||||
/* the track when the toggle is "on" */
|
||||
/* The track when the toggle is "on" */
|
||||
.toggle input:checked:after {
|
||||
border-color: #5f85ef;
|
||||
background-color: #5f85ef;
|
||||
/* the handle when the toggle is "on" */ }
|
||||
.toggle :checked + .track .handle {
|
||||
background-color: white;
|
||||
-webkit-transform: translate3d(22px, 0, 0); }
|
||||
background-color: #5f85ef; }
|
||||
|
||||
/* the handle when the toggle is "on" */
|
||||
.toggle input:checked + .handle {
|
||||
background-color: white;
|
||||
-webkit-transform: translate3d(22px, 0, 0); }
|
||||
|
||||
.radio-buttton-list .list-item-content {
|
||||
/* give some room to the right for the checkmark icon */
|
||||
|
||||
13
dist/js/ionic-angular.js
vendored
13
dist/js/ionic-angular.js
vendored
@ -692,28 +692,21 @@ angular.module('ionic.ui.toggle', [])
|
||||
replace: true,
|
||||
require: '?ngModel',
|
||||
scope: true,
|
||||
template: '<div class="toggle">' +
|
||||
' <input type="checkbox">'+
|
||||
' <div class="track">' +
|
||||
' <div class="handle"></div>' +
|
||||
' </div>' +
|
||||
'</div>',
|
||||
template: '<div class="toggle"><input type="checkbox"><div class="handle"></div></div>',
|
||||
|
||||
link: function($scope, $element, $attr, ngModel) {
|
||||
var checkbox, track, handle;
|
||||
var checkbox, handle;
|
||||
|
||||
if(!ngModel) { return; }
|
||||
|
||||
checkbox = $element.children().eq(0);
|
||||
track = $element.children().eq(1);
|
||||
handle = track.children().eq(0);
|
||||
|
||||
if(!checkbox.length || !track.length || !handle.length) { return; }
|
||||
if(!checkbox.length || !handle.length) { return; }
|
||||
|
||||
$scope.toggle = new ionic.views.Toggle({
|
||||
el: $element[0],
|
||||
checkbox: checkbox[0],
|
||||
track: track[0],
|
||||
handle: handle[0]
|
||||
});
|
||||
|
||||
|
||||
18
dist/js/ionic.js
vendored
18
dist/js/ionic.js
vendored
@ -2875,20 +2875,8 @@ ionic.views.TabBar.prototype = {
|
||||
ionic.views.Toggle = function(opts) {
|
||||
this.el = opts.el;
|
||||
this.checkbox = opts.checkbox;
|
||||
this.track = opts.track;
|
||||
this.handle = opts.handle;
|
||||
this.openPercent = -1;
|
||||
|
||||
/*
|
||||
// remember that this element, and all its children are apart of a component
|
||||
// and assign the component instance to each element so the lookups
|
||||
// only has to go through this process just once
|
||||
this.el.isComponent = true;
|
||||
this.track.component = this;
|
||||
this.track.isComponent = true;
|
||||
this.handle.component = this;
|
||||
this.handle.isComponent = true;
|
||||
*/
|
||||
};
|
||||
|
||||
ionic.views.Toggle.prototype = {
|
||||
@ -2898,8 +2886,8 @@ ionic.views.TabBar.prototype = {
|
||||
},
|
||||
|
||||
drag: function(e) {
|
||||
var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2);
|
||||
var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2);
|
||||
var slidePageLeft = this.checkbox.offsetLeft + (this.handle.offsetWidth / 2);
|
||||
var slidePageRight = this.checkbox.offsetLeft + this.checkbox.offsetWidth - (this.handle.offsetWidth / 2);
|
||||
|
||||
if(e.pageX >= slidePageRight - 4) {
|
||||
this.val(true);
|
||||
@ -2920,7 +2908,7 @@ ionic.views.TabBar.prototype = {
|
||||
} else if(openPercent === 100) {
|
||||
this.val(true);
|
||||
} else {
|
||||
var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
|
||||
var openPixel = Math.round( (openPercent / 100) * this.checkbox.offsetWidth - (this.handle.offsetWidth) );
|
||||
openPixel = (openPixel < 1 ? 0 : openPixel);
|
||||
this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
|
||||
}
|
||||
|
||||
13
js/ext/angular/src/directive/ionicToggle.js
vendored
13
js/ext/angular/src/directive/ionicToggle.js
vendored
@ -8,28 +8,21 @@ angular.module('ionic.ui.toggle', [])
|
||||
replace: true,
|
||||
require: '?ngModel',
|
||||
scope: true,
|
||||
template: '<div class="toggle">' +
|
||||
' <input type="checkbox">'+
|
||||
' <div class="track">' +
|
||||
' <div class="handle"></div>' +
|
||||
' </div>' +
|
||||
'</div>',
|
||||
template: '<div class="toggle"><input type="checkbox"><div class="handle"></div></div>',
|
||||
|
||||
link: function($scope, $element, $attr, ngModel) {
|
||||
var checkbox, track, handle;
|
||||
var checkbox, handle;
|
||||
|
||||
if(!ngModel) { return; }
|
||||
|
||||
checkbox = $element.children().eq(0);
|
||||
track = $element.children().eq(1);
|
||||
handle = track.children().eq(0);
|
||||
|
||||
if(!checkbox.length || !track.length || !handle.length) { return; }
|
||||
if(!checkbox.length || !handle.length) { return; }
|
||||
|
||||
$scope.toggle = new ionic.views.Toggle({
|
||||
el: $element[0],
|
||||
checkbox: checkbox[0],
|
||||
track: track[0],
|
||||
handle: handle[0]
|
||||
});
|
||||
|
||||
|
||||
@ -18,12 +18,11 @@
|
||||
var opts = {
|
||||
el: el,
|
||||
checkbox: el.querySelector("input[type='checkbox']"),
|
||||
track: el.querySelector(".track"),
|
||||
handle: el.querySelector(".handle")
|
||||
};
|
||||
|
||||
// validate its a well formed toggle with the required pieces
|
||||
if(!opts.checkbox || !opts.track || !opts.handle) return;
|
||||
if(!opts.checkbox || !opts.handle) return;
|
||||
|
||||
// initialize an instance of a Toggle
|
||||
el.component = new ionic.views.Toggle(opts);
|
||||
|
||||
@ -4,20 +4,8 @@
|
||||
ionic.views.Toggle = function(opts) {
|
||||
this.el = opts.el;
|
||||
this.checkbox = opts.checkbox;
|
||||
this.track = opts.track;
|
||||
this.handle = opts.handle;
|
||||
this.openPercent = -1;
|
||||
|
||||
/*
|
||||
// remember that this element, and all its children are apart of a component
|
||||
// and assign the component instance to each element so the lookups
|
||||
// only has to go through this process just once
|
||||
this.el.isComponent = true;
|
||||
this.track.component = this;
|
||||
this.track.isComponent = true;
|
||||
this.handle.component = this;
|
||||
this.handle.isComponent = true;
|
||||
*/
|
||||
};
|
||||
|
||||
ionic.views.Toggle.prototype = {
|
||||
@ -27,8 +15,8 @@
|
||||
},
|
||||
|
||||
drag: function(e) {
|
||||
var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2);
|
||||
var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2);
|
||||
var slidePageLeft = this.checkbox.offsetLeft + (this.handle.offsetWidth / 2);
|
||||
var slidePageRight = this.checkbox.offsetLeft + this.checkbox.offsetWidth - (this.handle.offsetWidth / 2);
|
||||
|
||||
if(e.pageX >= slidePageRight - 4) {
|
||||
this.val(true);
|
||||
@ -49,7 +37,7 @@
|
||||
} else if(openPercent === 100) {
|
||||
this.val(true);
|
||||
} else {
|
||||
var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
|
||||
var openPixel = Math.round( (openPercent / 100) * this.checkbox.offsetWidth - (this.handle.offsetWidth) );
|
||||
openPixel = (openPixel < 1 ? 0 : openPixel);
|
||||
this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
|
||||
}
|
||||
|
||||
@ -4,35 +4,43 @@
|
||||
|
||||
/* the overall container of the toggle */
|
||||
.toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* hide the actual <input type="checkbox"> */
|
||||
.toggle input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* the background of the toggle's track area */
|
||||
/* also the track appearance when the toggle is "off" */
|
||||
.toggle .track {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
.toggle input {
|
||||
/* set the actual checkbox input to have a width/height */
|
||||
/* but hide its appearance, then use :after to style it */
|
||||
width: $toggle-width;
|
||||
height: $toggle-height;
|
||||
border: solid $toggle-border-width $toggle-off-border-color;
|
||||
border-radius: $toggle-border-radius;
|
||||
background-color: $toggle-off-bg-color;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: $toggle-transition-duration;
|
||||
transition-property: background-color, border;
|
||||
/* the track appearance when the toggle is "off" */
|
||||
&:after {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid $toggle-border-width $toggle-off-border-color;
|
||||
border-radius: $toggle-border-radius;
|
||||
background-color: $toggle-off-bg-color;
|
||||
content: ' ';
|
||||
cursor: pointer;
|
||||
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: $toggle-transition-duration;
|
||||
transition-property: background-color, border;
|
||||
}
|
||||
}
|
||||
|
||||
/* the handle (circle) thats inside the toggle's track area */
|
||||
/* also the appearance when the handle is "off" */
|
||||
.toggle .handle {
|
||||
position: absolute;
|
||||
top: ($toggle-height - $toggle-handle-height) + $toggle-border-width;
|
||||
left: $toggle-border-width;
|
||||
display: block;
|
||||
width: $toggle-handle-width;
|
||||
height: $toggle-handle-height;
|
||||
@ -40,7 +48,7 @@
|
||||
background-color: $toggle-handle-off-bg-color;
|
||||
transition: -webkit-transform $toggle-transition-duration ease-in-out;
|
||||
|
||||
/* used to create a larger hit area to slide the handle */
|
||||
/* used to create a larger (but hidden) hit area to slide the handle */
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
@ -51,17 +59,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* When the toggle is "on" */
|
||||
.toggle :checked + .track {
|
||||
|
||||
/* the track when the toggle is "on" */
|
||||
/* The track when the toggle is "on" */
|
||||
.toggle input:checked:after {
|
||||
border-color: $toggle-on-border-color;
|
||||
background-color: $toggle-on-bg-color;
|
||||
}
|
||||
|
||||
/* the handle when the toggle is "on" */
|
||||
.handle {
|
||||
background-color: $toggle-handle-on-bg-color;
|
||||
-webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
|
||||
}
|
||||
.toggle input:checked + .handle {
|
||||
background-color: $toggle-handle-on-bg-color;
|
||||
-webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
<p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
|
||||
<p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p>
|
||||
<p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon-star"></i> Input: Checkbox</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star-half-empty"></i> Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star"></i> Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p>
|
||||
<p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>
|
||||
<p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p>
|
||||
@ -51,7 +51,5 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="../dist/js/ionic.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -22,18 +22,14 @@
|
||||
Airplane Mode
|
||||
<label class="toggle" id="airplaneMode">
|
||||
<input type="checkbox" name="airplaneMode">
|
||||
<div class="track">
|
||||
<div class="handle"></div>
|
||||
</div>
|
||||
<div class="handle"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item">
|
||||
Do Not Disturb
|
||||
<label class="toggle" id="doNotDisturb">
|
||||
<input type="checkbox" name="doNotDisturb" checked="checked">
|
||||
<div class="track">
|
||||
<div class="handle"></div>
|
||||
</div>
|
||||
<div class="handle"></div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
@ -57,7 +53,6 @@
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="../dist/js/ionic.js"></script>
|
||||
<script src="../dist/js/ionic-simple.js"></script>
|
||||
|
||||
|
||||
<!-- for testing only -->
|
||||
|
||||
Reference in New Issue
Block a user