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

feat(range): add ability to add labels to the left/right of range

Browse Source 
using `range-left` and `range-right` inside of `ion-range` will place
the element to the left or right of the range.

references #5422
This commit is contained in:
Brandy Carney
2016-05-31 20:11:07 -04:00
parent 03f4511635
commit fc819dd9c4
12 changed files with 117 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
demos/range/index.ts
View File

@ -1,6 +1,7 @@
import {App} from 'ionic-angular'; import {Component} from '@angular/core';
import {ionicBootstrap} from 'ionic-angular';
@App({ @Component({
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class ApiDemoApp { class ApiDemoApp {
@ -13,3 +14,5 @@ class ApiDemoApp {
console.log("Changed", ev); console.log("Changed", ev);
} }
} }
ionicBootstrap(ApiDemoApp);

28
demos/range/main.html
View File

@ -9,9 +9,10 @@
<ion-badge item-right>{{brightness}}</ion-badge> <ion-badge item-right>{{brightness}}</ion-badge>
</ion-list-header> </ion-list-header>
<ion-item> <ion-item>
<ion-icon item-left small name="sunny"></ion-icon> <ion-range [(ngModel)]="brightness">
<ion-range [(ngModel)]="brightness"></ion-range> <ion-icon range-left small name="sunny"></ion-icon>
<ion-icon item-right name="sunny"></ion-icon> <ion-icon range-right name="sunny"></ion-icon>
</ion-range>
</ion-item> </ion-item>
</ion-list> </ion-list>
@ -21,9 +22,10 @@
<ion-badge item-right secondary>{{saturation}}</ion-badge> <ion-badge item-right secondary>{{saturation}}</ion-badge>
</ion-list-header> </ion-list-header>
<ion-item> <ion-item>
<ion-note item-left>-200</ion-note> <ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary>
<ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary></ion-range> <ion-label range-left>-200</ion-label>
<ion-note item-right>200</ion-note> <ion-label range-right>200</ion-label>
</ion-range>
</ion-item> </ion-item>
</ion-list> </ion-list>
@ -33,9 +35,10 @@
<ion-badge item-right danger>{{warmth}}</ion-badge> <ion-badge item-right danger>{{warmth}}</ion-badge>
</ion-list-header> </ion-list-header>
<ion-item> <ion-item>
<ion-icon item-left small danger name="thermometer"></ion-icon> <ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger>
<ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger></ion-range> <ion-icon range-left small danger name="thermometer"></ion-icon>
<ion-icon item-right danger name="thermometer"></ion-icon> <ion-icon range-right danger name="thermometer"></ion-icon>
</ion-range>
</ion-item> </ion-item>
</ion-list> </ion-list>
@ -46,9 +49,10 @@
<ion-badge item-right dark>{{structure.upper}}</ion-badge> <ion-badge item-right dark>{{structure.upper}}</ion-badge>
</ion-list-header> </ion-list-header>
<ion-item> <ion-item>
<ion-note item-left>0</ion-note> <ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark>
<ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark></ion-range> <ion-label range-left>-0</ion-label>
<ion-note item-right>100</ion-note> <ion-label range-right>100</ion-label>
</ion-range>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>

10
scripts/demos/index.template.dev.html
View File

@ -10,9 +10,13 @@
<link md-href="../output.md.css" rel="stylesheet"> <link md-href="../output.md.css" rel="stylesheet">
<link wp-href="../output.wp.css" rel="stylesheet"> <link wp-href="../output.wp.css" rel="stylesheet">
<script type="text/javascript" src="/dist/demos/scrollbar-fix.js"></script> <script type="text/javascript" src="/dist/demos/scrollbar-fix.js"></script>
<script src="../../js/es6-shim.min.js"></script> <script src="../../js/es6-shim.min.js"></script>
<script src="../../js/es6-module-loader.src.js"></script> <script src="../../js/es6-module-loader.src.js"></script>
<script src="../../js/Reflect.js"></script>
<script src="../../js/zone.js"></script>
<script src="../../js/system.src.js"></script> <script src="../../js/system.src.js"></script>
<script> <script>
System.config({ System.config({
map: { map: {
@ -36,12 +40,8 @@
}); });
</script> </script>
<script src="../../js/zone.js"></script>
<script src="../../js/Reflect.js"></script>
<script src="../../js/Rx.js"></script>
<script src="../../bundles/ionic.system.js"></script> <script src="../../bundles/ionic.system.js"></script>
<script src="../../js/Rx.js"></script>
</head> </head>
<body> <body>
<ion-app> <ion-app>

1
src/components.core.scss
View File

@ -22,6 +22,7 @@
"components/menu/menu", "components/menu/menu",
"components/modal/modal", "components/modal/modal",
"components/popover/popover", "components/popover/popover",
"components/range/range",
"components/refresher/refresher", "components/refresher/refresher",
"components/scroll/scroll", "components/scroll/scroll",
"components/show-hide-when/show-hide-when", "components/show-hide-when/show-hide-when",

1
src/components/icon/icon.scss
View File

@ -12,4 +12,5 @@ ion-icon {
ion-icon[small] { ion-icon[small] {
font-size: 1.1em; font-size: 1.1em;
min-height: 1.1em;
} }

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

@ -32,37 +32,30 @@ $range-ios-pin-color: $text-ios-color !default;
$range-ios-pin-font-size: 12px !default; $range-ios-pin-font-size: 12px !default;
$range-ios-pin-padding: 8px !default; $range-ios-pin-padding: 8px !default;
.item-range .item-inner {
overflow: visible;
}
.item-range .input-wrapper {
overflow: visible;
flex-direction: column;
}
.item-range ion-range {
width: 100%;
}
ion-range { ion-range {
position: relative;
display: block;
padding: $range-ios-padding-vertical $range-ios-padding-horizontal; padding: $range-ios-padding-vertical $range-ios-padding-horizontal;
} }
[range-left],
[range-right] {
margin: 0 12px;
}
[range-left] {
margin-left: 0;
}
[range-right] {
margin-right: 0;
}
.range-has-pin { .range-has-pin {
padding-top: $range-ios-padding-vertical + $range-ios-pin-font-size; padding-top: $range-ios-padding-vertical + $range-ios-pin-font-size;
} }
.range-slider { .range-slider {
position: relative;
height: $range-ios-slider-height; height: $range-ios-slider-height;
cursor: pointer;
} }
.range-bar { .range-bar {

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

@ -31,24 +31,7 @@ $range-md-pin-font-size: 12px !default;
$range-md-pin-padding: 8px !default; $range-md-pin-padding: 8px !default;
.item-range .item-inner {
overflow: visible;
}
.item-range .input-wrapper {
overflow: visible;
flex-direction: column;
}
.item-range ion-range {
width: 100%;
}
ion-range { ion-range {
position: relative;
display: block;
padding: $range-md-padding-vertical $range-md-padding-horizontal; padding: $range-md-padding-vertical $range-md-padding-horizontal;
} }
@ -57,11 +40,7 @@ ion-range {
} }
.range-slider { .range-slider {
position: relative;
height: $range-md-slider-height; height: $range-md-slider-height;
cursor: pointer;
} }
.range-bar { .range-bar {

42
src/components/range/range.scss Normal file
View File

@ -0,0 +1,42 @@
@import "../../globals.core";
// Range
// --------------------------------------------------
.item-range .item-inner {
overflow: visible;
}
.item-range .input-wrapper {
overflow: visible;
flex-direction: column;
}
.item-range ion-range {
width: 100%;
}
ion-range {
position: relative;
display: flex;
align-items: center;
ion-label {
flex: initial;
}
ion-icon {
min-height: 2.4rem;
font-size: 2.4rem;
line-height: 1;
}
}
.range-slider {
position: relative;
flex: 1;
cursor: pointer;
}

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

@ -106,6 +106,13 @@ export class RangeKnob {
* the slider knob. It can accept dual knobs, but by default one knob * the slider knob. It can accept dual knobs, but by default one knob
* controls the value of the range. * controls the value of the range.
* *
* ### Range Labels
* Labels can be placed on either side of the range by adding the
* `range-left` or `range-right` property to the element. The element
* doesn't have to be an `ion-label`, it can be added to any element
* to place it to the left or right of the range. See [usage](#usage)
* below for examples.
*
* *
* ### Minimum and Maximum Values * ### Minimum and Maximum Values
* Minimum and maximum values can be passed to the range through the `min` * Minimum and maximum values can be passed to the range through the `min`
@ -135,15 +142,18 @@ export class RangeKnob {
* </ion-item> * </ion-item>
* *
* <ion-item> * <ion-item>
* <ion-note item-left>-200</ion-note> * <ion-range min="-200" max="200" [(ngModel)]="saturation" secondary>
* <ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary></ion-range> * <ion-label range-left>-200</ion-label>
* <ion-note item-right>200</ion-note> * <ion-label range-right>200</ion-label>
* </ion-range>
* </ion-item> * </ion-item>
* *
* <ion-item> * <ion-item>
* <ion-label>step=2, {{singleValue3}}</ion-label> * <ion-range min="20" max="80" step="2" [(ngModel)]="brightness">
* <ion-range min="20" max="80" step="2" [(ngModel)]="singleValue3"></ion-range> * <ion-icon small range-left name="sunny"></ion-icon>
* </ion-item> * <ion-icon range-right name="sunny"></ion-icon>
* </ion-range>
* </ion-item>
* *
* <ion-item> * <ion-item>
* <ion-label>step=100, snaps, {{singleValue4}}</ion-label> * <ion-label>step=100, snaps, {{singleValue4}}</ion-label>
@ -163,13 +173,15 @@ export class RangeKnob {
@Component({ @Component({
selector: 'ion-range', selector: 'ion-range',
template: template:
'<ng-content select="[range-left]"></ng-content>' +
'<div class="range-slider" #slider>' + '<div class="range-slider" #slider>' +
'<div class="range-tick" *ngFor="let t of _ticks" [style.left]="t.left" [class.range-tick-active]="t.active"></div>' + '<div class="range-tick" *ngFor="let t of _ticks" [style.left]="t.left" [class.range-tick-active]="t.active"></div>' +
'<div class="range-bar"></div>' + '<div class="range-bar"></div>' +
'<div class="range-bar range-bar-active" [style.left]="_barL" [style.right]="_barR" #bar></div>' + '<div class="range-bar range-bar-active" [style.left]="_barL" [style.right]="_barR" #bar></div>' +
'<div class="range-knob-handle"></div>' + '<div class="range-knob-handle"></div>' +
'<div class="range-knob-handle" [upper]="true" *ngIf="_dual"></div>' + '<div class="range-knob-handle" [upper]="true" *ngIf="_dual"></div>' +
'</div>', '</div>' +
'<ng-content select="[range-right]"></ng-content>',
host: { host: {
'[class.range-disabled]': '_disabled', '[class.range-disabled]': '_disabled',
'[class.range-pressed]': '_pressed', '[class.range-pressed]': '_pressed',

21
src/components/range/range.wp.scss
View File

@ -32,24 +32,7 @@ $range-wp-pin-font-size: 12px !default;
$range-wp-pin-padding: 8px !default; $range-wp-pin-padding: 8px !default;
.item-range .item-inner {
overflow: visible;
}
.item-range .input-wrapper {
overflow: visible;
flex-direction: column;
}
.item-range ion-range {
width: 100%;
}
ion-range { ion-range {
position: relative;
display: block;
padding: $range-wp-padding-vertical $range-wp-padding-horizontal; padding: $range-wp-padding-vertical $range-wp-padding-horizontal;
} }
@ -58,11 +41,7 @@ ion-range {
} }
.range-slider { .range-slider {
position: relative;
height: $range-wp-slider-height; height: $range-wp-slider-height;
cursor: pointer;
} }
.range-bar { .range-bar {

10
src/components/range/test/basic/index.ts
View File

@ -1,7 +1,8 @@
import {App, Page} from '../../../../../src'; import {Component} from '@angular/core';
import {ionicBootstrap} from '../../../../../src';
@Page({ @Component({
templateUrl: 'page1.html' templateUrl: 'page1.html'
}) })
class Page1 { class Page1 {
@ -18,10 +19,11 @@ class Page1 {
} }
@Component({
@App({
templateUrl: 'main.html' templateUrl: 'main.html'
}) })
class E2EApp { class E2EApp {
rootPage = Page1; rootPage = Page1;
} }
ionicBootstrap(E2EApp);

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

@ -28,15 +28,19 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<div item-left>{{singleValue2}}</div>
<ion-label>init=150, min=-200, max=200</ion-label> <ion-label>init=150, min=-200, max=200</ion-label>
<ion-range min="-200" max="200" [(ngModel)]="singleValue2" secondary></ion-range> <ion-range min="-200" max="200" [(ngModel)]="singleValue2" secondary>
<div item-right>{{singleValue2}}</div> <ion-label range-left>-200</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>step=2, {{singleValue3}}</ion-label> <ion-label>step=2, {{singleValue3}}</ion-label>
<ion-range min="20" max="80" step="2" [(ngModel)]="singleValue3"></ion-range> <ion-range min="20" max="80" step="2" [(ngModel)]="singleValue3">
<ion-icon small range-left name="sunny"></ion-icon>
<ion-icon range-right name="sunny"></ion-icon>
</ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>