mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
feat(range): add ability to add labels to the left/right of range
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
@ -1,6 +1,7 @@
|
||||
import {App} from 'ionic-angular';
|
||||
import {Component} from '@angular/core';
|
||||
import {ionicBootstrap} from 'ionic-angular';
|
||||
|
||||
@App({
|
||||
@Component({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class ApiDemoApp {
|
||||
@ -13,3 +14,5 @@ class ApiDemoApp {
|
||||
console.log("Changed", ev);
|
||||
}
|
||||
}
|
||||
|
||||
ionicBootstrap(ApiDemoApp);
|
||||
|
||||
@ -9,9 +9,10 @@
|
||||
<ion-badge item-right>{{brightness}}</ion-badge>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-icon item-left small name="sunny"></ion-icon>
|
||||
<ion-range [(ngModel)]="brightness"></ion-range>
|
||||
<ion-icon item-right name="sunny"></ion-icon>
|
||||
<ion-range [(ngModel)]="brightness">
|
||||
<ion-icon range-left small name="sunny"></ion-icon>
|
||||
<ion-icon range-right name="sunny"></ion-icon>
|
||||
</ion-range>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
@ -21,9 +22,10 @@
|
||||
<ion-badge item-right secondary>{{saturation}}</ion-badge>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-note item-left>-200</ion-note>
|
||||
<ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary></ion-range>
|
||||
<ion-note item-right>200</ion-note>
|
||||
<ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary>
|
||||
<ion-label range-left>-200</ion-label>
|
||||
<ion-label range-right>200</ion-label>
|
||||
</ion-range>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
@ -33,9 +35,10 @@
|
||||
<ion-badge item-right danger>{{warmth}}</ion-badge>
|
||||
</ion-list-header>
|
||||
<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>
|
||||
<ion-icon item-right danger name="thermometer"></ion-icon>
|
||||
<ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger>
|
||||
<ion-icon range-left small danger name="thermometer"></ion-icon>
|
||||
<ion-icon range-right danger name="thermometer"></ion-icon>
|
||||
</ion-range>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
@ -46,9 +49,10 @@
|
||||
<ion-badge item-right dark>{{structure.upper}}</ion-badge>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-note item-left>0</ion-note>
|
||||
<ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark></ion-range>
|
||||
<ion-note item-right>100</ion-note>
|
||||
<ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark>
|
||||
<ion-label range-left>-0</ion-label>
|
||||
<ion-label range-right>100</ion-label>
|
||||
</ion-range>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
@ -10,9 +10,13 @@
|
||||
<link md-href="../output.md.css" rel="stylesheet">
|
||||
<link wp-href="../output.wp.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="/dist/demos/scrollbar-fix.js"></script>
|
||||
|
||||
<script src="../../js/es6-shim.min.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>
|
||||
System.config({
|
||||
map: {
|
||||
@ -36,12 +40,8 @@
|
||||
});
|
||||
</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="../../js/Rx.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
"components/menu/menu",
|
||||
"components/modal/modal",
|
||||
"components/popover/popover",
|
||||
"components/range/range",
|
||||
"components/refresher/refresher",
|
||||
"components/scroll/scroll",
|
||||
"components/show-hide-when/show-hide-when",
|
||||
|
||||
@ -12,4 +12,5 @@ ion-icon {
|
||||
|
||||
ion-icon[small] {
|
||||
font-size: 1.1em;
|
||||
min-height: 1.1em;
|
||||
}
|
||||
|
||||
@ -32,37 +32,30 @@ $range-ios-pin-color: $text-ios-color !default;
|
||||
$range-ios-pin-font-size: 12px !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 {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
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 {
|
||||
padding-top: $range-ios-padding-vertical + $range-ios-pin-font-size;
|
||||
}
|
||||
|
||||
.range-slider {
|
||||
position: relative;
|
||||
|
||||
height: $range-ios-slider-height;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.range-bar {
|
||||
|
||||
@ -31,24 +31,7 @@ $range-md-pin-font-size: 12px !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 {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
padding: $range-md-padding-vertical $range-md-padding-horizontal;
|
||||
}
|
||||
|
||||
@ -57,11 +40,7 @@ ion-range {
|
||||
}
|
||||
|
||||
.range-slider {
|
||||
position: relative;
|
||||
|
||||
height: $range-md-slider-height;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.range-bar {
|
||||
|
||||
42
src/components/range/range.scss
Normal file
42
src/components/range/range.scss
Normal 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;
|
||||
}
|
||||
@ -106,6 +106,13 @@ export class RangeKnob {
|
||||
* the slider knob. It can accept dual knobs, but by default one knob
|
||||
* 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 can be passed to the range through the `min`
|
||||
@ -135,15 +142,18 @@ export class RangeKnob {
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-note item-left>-200</ion-note>
|
||||
* <ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary></ion-range>
|
||||
* <ion-note item-right>200</ion-note>
|
||||
* <ion-range min="-200" max="200" [(ngModel)]="saturation" secondary>
|
||||
* <ion-label range-left>-200</ion-label>
|
||||
* <ion-label range-right>200</ion-label>
|
||||
* </ion-range>
|
||||
* </ion-item>
|
||||
*
|
||||
* <ion-item>
|
||||
* <ion-label>step=2, {{singleValue3}}</ion-label>
|
||||
* <ion-range min="20" max="80" step="2" [(ngModel)]="singleValue3"></ion-range>
|
||||
* </ion-item>
|
||||
* <ion-item>
|
||||
* <ion-range min="20" max="80" step="2" [(ngModel)]="brightness">
|
||||
* <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>
|
||||
@ -163,13 +173,15 @@ export class RangeKnob {
|
||||
@Component({
|
||||
selector: 'ion-range',
|
||||
template:
|
||||
'<ng-content select="[range-left]"></ng-content>' +
|
||||
'<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-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" [upper]="true" *ngIf="_dual"></div>' +
|
||||
'</div>',
|
||||
'</div>' +
|
||||
'<ng-content select="[range-right]"></ng-content>',
|
||||
host: {
|
||||
'[class.range-disabled]': '_disabled',
|
||||
'[class.range-pressed]': '_pressed',
|
||||
|
||||
@ -32,24 +32,7 @@ $range-wp-pin-font-size: 12px !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 {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
padding: $range-wp-padding-vertical $range-wp-padding-horizontal;
|
||||
}
|
||||
|
||||
@ -58,11 +41,7 @@ ion-range {
|
||||
}
|
||||
|
||||
.range-slider {
|
||||
position: relative;
|
||||
|
||||
height: $range-wp-slider-height;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.range-bar {
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import {App, Page} from '../../../../../src';
|
||||
import {Component} from '@angular/core';
|
||||
import {ionicBootstrap} from '../../../../../src';
|
||||
|
||||
|
||||
@Page({
|
||||
@Component({
|
||||
templateUrl: 'page1.html'
|
||||
})
|
||||
class Page1 {
|
||||
@ -18,10 +19,11 @@ class Page1 {
|
||||
|
||||
}
|
||||
|
||||
|
||||
@App({
|
||||
@Component({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
rootPage = Page1;
|
||||
}
|
||||
|
||||
ionicBootstrap(E2EApp);
|
||||
|
||||
@ -28,15 +28,19 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<div item-left>{{singleValue2}}</div>
|
||||
<ion-label>init=150, min=-200, max=200</ion-label>
|
||||
<ion-range min="-200" max="200" [(ngModel)]="singleValue2" secondary></ion-range>
|
||||
<div item-right>{{singleValue2}}</div>
|
||||
<ion-range min="-200" max="200" [(ngModel)]="singleValue2" secondary>
|
||||
<ion-label range-left>-200</ion-label>
|
||||
<ion-label range-right>200</ion-label>
|
||||
</ion-range>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user