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

Merge branch 'stable' into release-4.1.0

Browse Source
This commit is contained in:
Brandy Carney
2019-03-06 11:21:30 -05:00
committed by GitHub
parent f139400ede 2b5fe0c2bf
commit 98a8c88479
2 changed files with 2 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -488,7 +488,8 @@ interface RangeKnob {
handleKeyboard: (name: KnobName, isIncrease: boolean) => void;
}
function renderKnob(isRTL: boolean, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard }: RangeKnob) {
function renderKnob({ knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard }: RangeKnob) {
const isRTL = document.dir === 'rtl';
const start = isRTL ? 'right' : 'left';
const knobStyle = () => {

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

@ -83,83 +83,6 @@ left or right of the range.
```
### React
```tsx
import React from 'react';
import { IonList, IonItem, IonRange, IonLabel, IonIcon } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<IonList>
<IonItem>
<IonRange color="danger" pin={true}></IonRange>
</IonItem>
<IonItem>
<IonRange min={-200} max={200} color="secondary">
<IonLabel slot="start">-200</IonLabel>
<IonLabel slot="end">200</IonLabel>
</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 dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange>
</IonItem>
</IonList>
);
export default Example;
```
### Vue
```html
<template>
<ion-list>
<ion-item>
<ion-range color="danger" pin="true"></ion-range>
</ion-item>
<ion-item>
<ion-range min="-200" max="200" color="secondary">
<ion-label slot="start">-200</ion-label>
<ion-label slot="end">200</ion-label>
</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 dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
</ion-list>
</template>
```
## Properties