Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(range): add ticks attribute #17718

Merged
merged 10 commits into from Mar 26, 2019
Merged

feat(range): add ticks attribute #17718

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
336780c
feat(range): add ticks attribute
sethlilly Mar 7, 2019
a72d702
Merge branch 'master' into master
liamdebeasi Mar 11, 2019
3b0d87c
Merge branch 'master' into master
sethlilly Mar 13, 2019
ba9be0c
Merge branch 'master' into master
brandyscarney Mar 20, 2019
cef5f43
Merge branch 'master' into master
liamdebeasi Mar 22, 2019
0a03d25
Merge branch 'master' into master
brandyscarney Mar 26, 2019
45bd9ac
Update core/src/components/range/range.tsx
brandyscarney Mar 26, 2019
38afa7c
feat(range): document ticks attribute
sethlilly Mar 26, 2019
adb8289
Merge branch 'master' into master
brandyscarney Mar 26, 2019
665822a
Merge branch 'master' of github.com:sethlilly/ionic
sethlilly Mar 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions angular/src/directives/proxies.ts
View file
Open in desktop
Expand Up @@ -586,7 +586,7 @@ export class IonRadioGroup {
proxyInputs(IonRadioGroup, ['allowEmptySelection', 'name', 'value']);

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 {
ionChange!: EventEmitter<CustomEvent>;
ionFocus!: EventEmitter<CustomEvent>;
Expand All @@ -598,7 +598,7 @@ export class IonRange {
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'> {}
@Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] })
Expand Down
1 change: 1 addition & 0 deletions core/api.txt
View file
Open in desktop
Expand Up @@ -805,6 +805,7 @@ ion-range,prop,name,string,'',false,false
ion-range,prop,pin,boolean,false,false,false
ion-range,prop,snaps,boolean,false,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,event,ionBlur,void,true
ion-range,event,ionChange,RangeChangeEventDetail,true
Expand Down
8 changes: 8 additions & 0 deletions core/src/components.d.ts
View file
Open in desktop
Expand Up @@ -3332,6 +3332,10 @@ export namespace Components {
*/
'step': number;
/**
* If `false`, tick marks are not displayed. Only applies when `snaps` is `true`.
*/
'ticks': boolean;
/**
* the value of the range.
*/
'value': RangeValue;
Expand Down Expand Up @@ -3394,6 +3398,10 @@ export namespace Components {
*/
'step'?: number;
/**
* If `false`, tick marks are not displayed. Only applies when `snaps` is `true`.
*/
'ticks'?: boolean;
/**
* the value of the range.
*/
'value'?: RangeValue;
Expand Down
8 changes: 7 additions & 1 deletion core/src/components/range/range.tsx
View file
Open in desktop
Expand Up @@ -105,6 +105,12 @@ export class Range implements ComponentInterface {
*/
@Prop() step = 1;

/**
* If `false`, tick marks are not displayed.
sethlilly marked this conversation as resolved.
Show resolved Hide resolved
* Only applies when `snaps` is `true`.
*/
@Prop() ticks = true;

/**
* If `true`, the user cannot interact with the range.
*/
Expand Down Expand Up @@ -393,7 +399,7 @@ export class Range implements ComponentInterface {
const end = isRTL ? 'left' : 'right';

const ticks = [];
if (this.snaps) {
if (this.snaps && this.ticks) {
for (let value = min; value <= max; value += step) {
const ratio = valueToRatio(value, min, max);

Expand Down
65 changes: 41 additions & 24 deletions core/src/components/range/readme.md
View file
Open in desktop
Expand Up @@ -32,17 +32,21 @@ left or right of the range.
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</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-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
Expand All @@ -65,17 +69,21 @@ left or right of the range.
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</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-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
Expand Down Expand Up @@ -104,17 +112,21 @@ const Example: React.SFC<{}> = () => (
</IonRange>
</IonItem>

<IonItem>
<IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" />
</IonRange>
</IonItem>
<IonItem>
<IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" />
</IonRange>
</IonItem>

<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange>
</IonItem>

<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></IonRange>
</IonItem>

<IonItem>
<IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange>
</IonItem>
Expand All @@ -141,17 +153,21 @@ export default Example;
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</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-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
Expand All @@ -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` |
| `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` |
| `ticks` | `ticks` | If `false`, tick marks are not displayed. Only applies when `snaps` is `true`. | `boolean` | `true` |
| `value` | `value` | the value of the range. | `number \| { lower: number; upper: number; }` | `0` |


Expand Down
3 changes: 3 additions & 0 deletions core/src/components/range/test/basic/index.html
View file
Open in desktop
Expand Up @@ -98,6 +98,9 @@
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" id="range"></ion-range>
</ion-item>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false"></ion-range>
</ion-item>
<ion-item>
<ion-range dual-knobs="true" id="multiKnob"></ion-range>
</ion-item>
Expand Down
3 changes: 3 additions & 0 deletions core/src/components/range/test/preview/index.html
View file
Open in desktop
Expand Up @@ -92,6 +92,9 @@
<ion-item>
<ion-range min="1000" max="2000" steps="100" snaps="true" id="range"></ion-range>
</ion-item>
<ion-item>
<ion-range min="1000" max="2000" steps="100" snaps="true" ticks="false"></ion-range>
</ion-item>
<ion-item>
<ion-range dual-knobs="true" id="multiKnob"></ion-range>
</ion-item>
Expand Down
18 changes: 10 additions & 8 deletions core/src/components/range/usage/angular.md
View file
Open in desktop
Expand Up @@ -11,21 +11,23 @@
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</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-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
</ion-list>
```


16 changes: 10 additions & 6 deletions core/src/components/range/usage/javascript.md
View file
Open in desktop
Expand Up @@ -11,17 +11,21 @@
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</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-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
Expand Down
16 changes: 10 additions & 6 deletions core/src/components/range/usage/react.md
View file
Open in desktop
Expand Up @@ -17,17 +17,21 @@ const Example: React.SFC<{}> = () => (
</IonRange>
</IonItem>

<IonItem>
<IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" />
</IonRange>
</IonItem>
<IonItem>
<IonRange min={20} max={80} step={2}>
<IonIcon size="small" slot="start" name="sunny" />
<IonIcon slot="end" name="sunny" />
</IonRange>
</IonItem>

<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange>
</IonItem>

<IonItem>
<IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></IonRange>
</IonItem>

<IonItem>
<IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange>
</IonItem>
Expand Down
18 changes: 10 additions & 8 deletions core/src/components/range/usage/vue.md
View file
Open in desktop
Expand Up @@ -12,22 +12,24 @@
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</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-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
</ion-list>
</template>
```