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

feat(range): range can be disabled

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2016-06-08 15:46:31 +02:00
committed by Adam Bradley
parent af289ece12
commit ccd926b8ae
4 changed files with 35 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/range/range.ios.scss
View File

@ -12,7 +12,7 @@ $range-ios-slider-height: 42px !default;
$range-ios-hit-width: 42px !default;
$range-ios-hit-height: $range-ios-slider-height !default;
$range-ios-bar-height: 1px !default;
$range-ios-bar-height: 2px !default;
$range-ios-bar-background-color: #bdbdbd !default;
$range-ios-bar-active-background-color: color($colors-ios, primary) !default;
@ -67,6 +67,8 @@ ion-range {
width: 100%;
height: $range-ios-bar-height;
border-radius: 1px;
background: $range-ios-bar-background-color;
pointer-events: none;
@ -166,6 +168,11 @@ ion-range {
transform: translate3d(0, 0, 0) scale(1);
}
.range-disabled {
opacity: 0.5;
}
// Generate iOS Range Colors
// --------------------------------------------------

13
src/components/range/range.md.scss
View File

@ -220,6 +220,19 @@ ion-range:not(.range-has-pin) .range-knob-pressed .range-knob {
@include md-range-min();
.range-disabled {
.range-bar-active {
background-color: $range-md-bar-background-color;
}
.range-knob {
transform: scale(.55);
background-color: $range-md-bar-background-color;
outline: 5px solid white;
}
}
// Generate Material Design Range Colors
// --------------------------------------------------

6
src/components/range/range.ts
View File

@ -356,6 +356,12 @@ export class Range {
* @private
*/
pointerDown(ev: UIEvent) {
// TODO: we could stop listening for events instead of checking this._disabled.
// since there are a lot of events involved, this solution is
// enough for the moment
if (this._disabled) {
return;
}
console.debug(`range, ${ev.type}`);
// prevent default so scrolling does not happen

8
src/components/range/test/basic/page1.html
View File

@ -43,6 +43,14 @@
</ion-range>
</ion-item>
<ion-item>
<ion-label>disabled</ion-label>
<ion-range min="20" max="80" step="2" [(ngModel)]="singleValue3" disabled=true>
<ion-icon small range-left name="sunny"></ion-icon>
<ion-icon range-right name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>step=100, snaps, {{singleValue4}}</ion-label>
<ion-range min="1000" max="2000" step="100" snaps="true" secondary [(ngModel)]="singleValue4"></ion-range>