javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(range): add more range docs

Browse Source
This commit is contained in:
mhartington
2018-03-05 17:11:30 -05:00
parent 056ec4b666
commit 3035d18a26
1 changed files with 44 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
packages/core/src/components/range/readme.md
View File

@@ -1,10 +1,50 @@
# ion-range-knob
# ion-range
The Range slider lets users select from a range of values by moving
the slider knob. It can accept dual knobs, but by default one knob
controls the value of the range.
### Range Labels
Labels can be placed on either side of the range by adding the
`slot="start"` or `slot="end"` to the element. The element doesn't have to
be an `ion-label`, it can be added to any element to place it to the
left or right of the range. See [usage](#usage) below for examples.
### Usage
```html
<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 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>
```
<!-- Auto Generated Below -->
## Properties
#### color
@@ -15,7 +55,6 @@ The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app).
#### debounce
number
@@ -23,42 +62,34 @@ number
How long, in milliseconds, to wait to trigger the
`ionChange` event after each change in the range value. Default `0`.
#### disabled
boolean
#### dualKnobs
boolean
Show two knobs. Defaults to `false`.
#### max
number
Maximum integer value of the range. Defaults to `100`.
#### min
number
Minimum integer value of the range. Defaults to `0`.
#### mode
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### pin
boolean
@@ -66,7 +97,6 @@ boolean
If true, a pin with integer value is shown when the knob
is pressed. Defaults to `false`.
#### snaps
boolean
@@ -74,21 +104,18 @@ boolean
If true, the knob snaps to tick marks evenly spaced based
on the step property value. Defaults to `false`.
#### step
number
Specifies the value granularity. Defaults to `1`.
#### value
any
the value of the range.
## Attributes
#### color
@@ -99,7 +126,6 @@ The color to use from your Sass `$colors` map.
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
For more information, see [Theming your App](/docs/theming/theming-your-app).
#### debounce
number
@@ -107,42 +133,34 @@ number
How long, in milliseconds, to wait to trigger the
`ionChange` event after each change in the range value. Default `0`.
#### disabled
boolean
#### dual-knobs
boolean
Show two knobs. Defaults to `false`.
#### max
number
Maximum integer value of the range. Defaults to `100`.
#### min
number
Minimum integer value of the range. Defaults to `0`.
#### mode
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### pin
boolean
@@ -150,7 +168,6 @@ boolean
If true, a pin with integer value is shown when the knob
is pressed. Defaults to `false`.
#### snaps
boolean
@@ -158,43 +175,36 @@ boolean
If true, the knob snaps to tick marks evenly spaced based
on the step property value. Defaults to `false`.
#### step
number
Specifies the value granularity. Defaults to `1`.
#### value
any
the value of the range.
## Events
#### ionBlur
Emitted when the range loses focus.
#### ionChange
Emitted when the value property has changed.
#### ionFocus
Emitted when the range has focus.
#### ionStyle
Emitted when the styles change.
## Methods
#### ratio()
@@ -203,15 +213,12 @@ Returns the ratio of the knob's is current location, which is a number
between `0` and `1`. If two knobs are used, this property represents
the lower value.
#### ratioUpper()
Returns the ratio of the upper value's is current location, which is
a number between `0` and `1`. If there is only one knob, then this
will return `null`.
---
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*
_Built with [StencilJS](https://stenciljs.com/)_