mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-24 06:22:45 +08:00
refactor(range): rename steps back to step, fix icon and slot name
Adds documentation for breaking changes for range.
This commit is contained in:
Brandy Carney
@ -14,6 +14,7 @@ A list of the breaking changes introduced in Ionic Angular v4.
|
||||
- [Nav](#nav)
|
||||
- [Option](#option)
|
||||
- [Radio](#radio)
|
||||
- [Range](#range)
|
||||
- [Segment](#segment)
|
||||
- [Toolbar](#toolbar)
|
||||
- [Sass](#sass)
|
||||
@ -53,7 +54,7 @@ Button should now be written as an `<ion-button>` element. Ionic will determine
|
||||
</ion-button>
|
||||
```
|
||||
|
||||
### Icon Attributes Renamed
|
||||
### Attributes Renamed
|
||||
|
||||
Previously to style icons inside of a button the following attributes were used: `icon-left`, `icon-right`, (and with the added support of RTL) `icon-start`, `icon-end`.
|
||||
|
||||
@ -468,11 +469,49 @@ Radio group has been changed to an element. It should now be wrapped around any
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
### Order for Windows
|
||||
### Windows Mode Order
|
||||
|
||||
Previously a radio inside of an item in Windows Platform mode would align itself to the start of the item. This has been removed, `slot` should always be used to align a radio inside of an item now.
|
||||
|
||||
|
||||
## Range
|
||||
|
||||
### Attributes Renamed
|
||||
|
||||
Previously to place content inside of a range the following attributes were used: `range-left`, `range-right`, (and with the added support of RTL) `range-start`, `range-end`.
|
||||
|
||||
These have been renamed to the following:
|
||||
|
||||
| Old Property | New Property | Property Behavior |
|
||||
|-----------------------------|----------------|-----------------------------------------------------------------------|
|
||||
| `range-left`, `range-start` | `slot="start"` | Positions to the left of the range in LTR, and to the right in RTL. |
|
||||
| `range-right`, `range-end` | `slot="end"` | Positions to the right of the range in LTR, and to the left in RTL. |
|
||||
|
||||
|
||||
**Old Usage Example:**
|
||||
|
||||
```html
|
||||
<ion-range>
|
||||
<ion-icon name="sunny" range-left></ion-icon>
|
||||
<ion-icon name="sunny" range-right></ion-icon>
|
||||
</ion-range>
|
||||
|
||||
<ion-range>
|
||||
<ion-icon name="sunny" range-start></ion-icon>
|
||||
<ion-icon name="sunny" range-end></ion-icon>
|
||||
</ion-range>
|
||||
```
|
||||
|
||||
**New Usage Example:**
|
||||
|
||||
```html
|
||||
<ion-range>
|
||||
<ion-icon name="sunny" slot="start"></ion-icon>
|
||||
<ion-icon name="sunny" slot="end"></ion-icon>
|
||||
</ion-range>
|
||||
```
|
||||
|
||||
|
||||
## Segment
|
||||
|
||||
The markup hasn't changed for Segments, but now writing `<ion-segment-button>` will render a native button element inside of it.
|
||||
|
||||
2
packages/core/src/components.d.ts
vendored
2
packages/core/src/components.d.ts
vendored
@ -2212,7 +2212,7 @@ declare global {
|
||||
min?: number,
|
||||
pin?: boolean,
|
||||
snaps?: boolean,
|
||||
steps?: number,
|
||||
step?: number,
|
||||
value?: any
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user