javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(range): add ticks attribute (#17718)

Browse Source 
closes #17717
This commit is contained in:
Seth Lilly
2019-03-26 14:33:16 -04:00
committed by Brandy Carney
parent 583c43127b
commit 016fa16d44
11 changed files with 105 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/src/directives/proxies.ts
View File

@ -586,7 +586,7 @@ export class IonRadioGroup {
proxyInputs(IonRadioGroup, ['allowEmptySelection', 'name', 'value']); proxyInputs(IonRadioGroup, ['allowEmptySelection', 'name', 'value']);
export declare interface IonRange extends StencilComponents<'IonRange'> {} export declare interface IonRange extends StencilComponents<'IonRange'> {}
@Component({ selector: 'ion-range', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value'] }) @Component({ selector: 'ion-range', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value'] })
export class IonRange { export class IonRange {
ionChange!: EventEmitter<CustomEvent>; ionChange!: EventEmitter<CustomEvent>;
ionFocus!: EventEmitter<CustomEvent>; ionFocus!: EventEmitter<CustomEvent>;
@ -598,7 +598,7 @@ export class IonRange {
proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']); proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
} }
} }
proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value']); proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value']);
export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {} export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {}
@Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] }) @Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] })

1
core/api.txt
View File

@ -805,6 +805,7 @@ ion-range,prop,name,string,'',false,false
ion-range,prop,pin,boolean,false,false,false ion-range,prop,pin,boolean,false,false,false
ion-range,prop,snaps,boolean,false,false,false ion-range,prop,snaps,boolean,false,false,false
ion-range,prop,step,number,1,false,false ion-range,prop,step,number,1,false,false
ion-range,prop,ticks,boolean,true,false,false
ion-range,prop,value,number | { lower: number; upper: number; },0,false,false ion-range,prop,value,number | { lower: number; upper: number; },0,false,false
ion-range,event,ionBlur,void,true ion-range,event,ionBlur,void,true
ion-range,event,ionChange,RangeChangeEventDetail,true ion-range,event,ionChange,RangeChangeEventDetail,true

8
core/src/components.d.ts vendored
View File

@ -3332,6 +3332,10 @@ export namespace Components {
*/ */
'step': number; 'step': number;
/** /**
* If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
*/
'ticks': boolean;
/**
* the value of the range. * the value of the range.
*/ */
'value': RangeValue; 'value': RangeValue;
@ -3394,6 +3398,10 @@ export namespace Components {
*/ */
'step'?: number; 'step'?: number;
/** /**
* If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
*/
'ticks'?: boolean;
/**
* the value of the range. * the value of the range.
*/ */
'value'?: RangeValue; 'value'?: RangeValue;

8
core/src/components/range/range.tsx
View File

@ -105,6 +105,12 @@ export class Range implements ComponentInterface {
*/ */
@Prop() step = 1; @Prop() step = 1;
/**
* If `true`, tick marks are displayed based on the step value.
* Only applies when `snaps` is `true`.
*/
@Prop() ticks = true;
/** /**
* If `true`, the user cannot interact with the range. * If `true`, the user cannot interact with the range.
*/ */
@ -393,7 +399,7 @@ export class Range implements ComponentInterface {
const end = isRTL ? 'left' : 'right'; const end = isRTL ? 'left' : 'right';
const ticks = []; const ticks = [];
if (this.snaps) { if (this.snaps && this.ticks) {
for (let value = min; value <= max; value += step) { for (let value = min; value <= max; value += step) {
const ratio = valueToRatio(value, min, max); const ratio = valueToRatio(value, min, max);

65
core/src/components/range/readme.md
View File

@ -32,17 +32,21 @@ left or right of the range.
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="20" max="80" step="2"> <ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon> <ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon> <ion-icon slot="end" name="sunny"></ion-icon>
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range> <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range> <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item> </ion-item>
@ -65,17 +69,21 @@ left or right of the range.
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="20" max="80" step="2"> <ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon> <ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon> <ion-icon slot="end" name="sunny"></ion-icon>
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range> <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range> <ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item> </ion-item>
@ -104,17 +112,21 @@ const Example: React.SFC<{}> = () => (
</IonRange> </IonRange>
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonRange min={20} max={80} step={2}> <IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" /> <IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" /> <IonIcon slot="end" name="sunny" />
</IonRange> </IonRange>
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange> <IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange>
</IonItem> </IonItem>
<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></IonRange>
</IonItem>
<IonItem> <IonItem>
<IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange> <IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange>
</IonItem> </IonItem>
@ -141,17 +153,21 @@ export default Example;
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="20" max="80" step="2"> <ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon> <ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon> <ion-icon slot="end" name="sunny"></ion-icon>
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range> <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range> <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item> </ion-item>
@ -176,6 +192,7 @@ export default Example;
| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` | | `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` |
| `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. | `boolean` | `false` | | `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. | `boolean` | `false` |
| `step` | `step` | Specifies the value granularity. | `number` | `1` | | `step` | `step` | Specifies the value granularity. | `number` | `1` |
| `ticks` | `ticks` | If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`. | `boolean` | `true` |
| `value` | `value` | the value of the range. | `number \| { lower: number; upper: number; }` | `0` | | `value` | `value` | the value of the range. | `number \| { lower: number; upper: number; }` | `0` |

3
core/src/components/range/test/basic/index.html
View File

@ -98,6 +98,9 @@
<ion-item> <ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" id="range"></ion-range> <ion-range min="1000" max="2000" step="100" snaps="true" id="range"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dual-knobs="true" id="multiKnob"></ion-range> <ion-range dual-knobs="true" id="multiKnob"></ion-range>
</ion-item> </ion-item>

3
core/src/components/range/test/preview/index.html
View File

@ -92,6 +92,9 @@
<ion-item> <ion-item>
<ion-range min="1000" max="2000" steps="100" snaps="true" id="range"></ion-range> <ion-range min="1000" max="2000" steps="100" snaps="true" id="range"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" steps="100" snaps="true" ticks="false"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dual-knobs="true" id="multiKnob"></ion-range> <ion-range dual-knobs="true" id="multiKnob"></ion-range>
</ion-item> </ion-item>

18
core/src/components/range/usage/angular.md
View File

@ -11,21 +11,23 @@
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="20" max="80" step="2"> <ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon> <ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon> <ion-icon slot="end" name="sunny"></ion-icon>
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range> <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range> <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item> </ion-item>
</ion-list> </ion-list>
``` ```

16
core/src/components/range/usage/javascript.md
View File

@ -11,17 +11,21 @@
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="20" max="80" step="2"> <ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon> <ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon> <ion-icon slot="end" name="sunny"></ion-icon>
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range> <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range> <ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item> </ion-item>

16
core/src/components/range/usage/react.md
View File

@ -17,17 +17,21 @@ const Example: React.SFC<{}> = () => (
</IonRange> </IonRange>
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonRange min={20} max={80} step={2}> <IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" /> <IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" /> <IonIcon slot="end" name="sunny" />
</IonRange> </IonRange>
</IonItem> </IonItem>
<IonItem> <IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange> <IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange>
</IonItem> </IonItem>
<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></IonRange>
</IonItem>
<IonItem> <IonItem>
<IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange> <IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange>
</IonItem> </IonItem>

18
core/src/components/range/usage/vue.md
View File

@ -12,22 +12,24 @@
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="20" max="80" step="2"> <ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon> <ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon> <ion-icon slot="end" name="sunny"></ion-icon>
</ion-range> </ion-range>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range> <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item> </ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>
<ion-item> <ion-item>
<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range> <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item> </ion-item>
</ion-list> </ion-list>
</template> </template>
``` ```