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

refactor(range): rename steps back to step, fix icon and slot name

Browse Source 
Adds documentation for breaking changes for range.
This commit is contained in:
Brandy Carney
2017-11-03 12:20:23 -04:00
parent 73137e002d
commit e9358fb495
5 changed files with 62 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components.d.ts vendored
View File

@ -2212,7 +2212,7 @@ declare global {
min?: number,
pin?: boolean,
snaps?: boolean,
steps?: number,
step?: number,
value?: any
}
}

3
packages/core/src/components/icon/icon.scss
View File

@ -9,7 +9,8 @@ ion-icon {
font-size: 1.2em;
}
ion-icon[small] {
ion-icon[small],
ion-icon[small][slot] {
min-height: 1.1em;
font-size: 1.1em;

14
packages/core/src/components/range/range.tsx
View File

@ -114,7 +114,7 @@ export class Range implements BaseInputComponent {
/**
* @input {number} Specifies the value granularity. Defaults to `1`.
*/
@Prop() steps: number = 1;
@Prop() step: number = 1;
/**
* @input {string} the value of the range.
@ -196,7 +196,7 @@ export class Range implements BaseInputComponent {
createTicks() {
if (this.snaps) {
for (let value = this.min; value <= this.max; value += this.steps) {
for (let value = this.min; value <= this.max; value += this.step) {
let ratio = this.valueToRatio(value);
this.ticks.push({
ratio,
@ -226,14 +226,14 @@ export class Range implements BaseInputComponent {
}
valueToRatio(value: number) {
value = Math.round((value - this.min) / this.steps) * this.steps;
value = Math.round((value - this.min) / this.step) * this.step;
value = value / (this.max - this.min);
return clamp(0, value, 1);
}
ratioToValue(ratio: number) {
ratio = Math.round((this.max - this.min) * ratio);
ratio = Math.round(ratio / this.steps) * this.steps + this.min;
ratio = Math.round(ratio / this.step) * this.step + this.min;
return clamp(this.min, ratio, this.max);
}
@ -329,7 +329,7 @@ export class Range implements BaseInputComponent {
@Listen('ionIncrease, ionDecrease')
keyChng(ev: RangeEvent) {
const step = this.steps;
const step = this.step;
if (ev.detail.knob === 'knobB') {
if (!!ev.detail.isIncrease) {
this.valB += step;
@ -404,7 +404,7 @@ export class Range implements BaseInputComponent {
protected render() {
return [
<slot name='range-start'></slot>,
<slot name='start'></slot>,
<ion-gesture
{...{
disableScroll: true,
@ -462,7 +462,7 @@ export class Range implements BaseInputComponent {
: null}
</div>
</ion-gesture>,
<slot name='range-end'></slot>
<slot name='end'></slot>
];
}
}

22
packages/core/src/components/range/test/basic.html
View File

@ -24,9 +24,6 @@
<ion-item>
<ion-range value="20"></ion-range>
</ion-item>
<ion-item>
<ion-range value="40" color="secondary"></ion-range>
</ion-item>
<ion-item>
<ion-range value="60" color="light"></ion-range>
</ion-item>
@ -34,7 +31,14 @@
<ion-range value="80" color="dark"></ion-range>
</ion-item>
<ion-item>
<ion-range value="100" color="danger"></ion-range>
<ion-range pin="true" color="secondary" value="86">
<ion-icon small name="ios-sunny-outline" slot="start"></ion-icon>
<ion-icon name="ios-sunny" slot="end"></ion-icon>
</ion-range>
<ion-range pin="true" color="danger" value="54">
<ion-icon small name="ios-thermometer-outline" slot="start"></ion-icon>
<ion-icon name="ios-thermometer" slot="end"></ion-icon>
</ion-range>
</ion-item>
</ion-list>
@ -60,19 +64,15 @@
<ion-item>
<ion-range pin="true"></ion-range>
</ion-item>
<ion-item>
<ion-range min="-200" max="200" steps="10" snaps="true" pin="true"></ion-range>
</ion-item>
<ion-item>
<ion-range min="1000" max="2000" steps="100" snaps="true" id="range"></ion-range>
</ion-item>
<ion-item>
<ion-range dual-knobs="true" id="multiKnob"></ion-range>
</ion-item>
<ion-item>
<ion-range color="danger">
<ion-icon small name="thermometer" slot="range-start"></ion-icon>
<ion-icon name="thermometer" slot="range-end"></ion-icon>
</ion-range>
</ion-item>
</ion-list>
<ion-button onclick="elTest()">Test</ion-button>