ion-range
Ionic4项目中我们可以使用Ionic4滑块组件组件ion-range对项目进行布局。 ion-range官方文档地址:https://ionicframework.com/docs/api/rangeThe 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.
ion-range 用法(Usage)
<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">-200ion-label>
<ion-label slot="end">200ion-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 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>
<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">-200ion-label>
<ion-label slot="end">200ion-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 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>
ion-list>
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">-200IonLabel>
<IonLabel slot="end">200IonLabel>
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>
IonList>
);
export default Example;
<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">-200ion-label>
<ion-label slot="end">200ion-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 min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary">ion-range>
ion-item>
<ion-item>
<ion-range ref="rangeDualKnobs" dual-knobs="true" min="21" max="72" step="3" snaps="true">ion-range>
ion-item>
ion-list>
template>
<script>
export default {
mounted() {
// Sets initial value for dual-knob ion-range
this.$refs.rangeDualKnobs.value = { lower: 24, upper: 42 };
}
}
script>
ion-range 属性(Properties)
color | |
---|---|
Description | The color to use from your application's color palette.
Default options are: |
Attribute | color |
Type | string | undefined |
debounce | |
Description | How long, in milliseconds, to wait to trigger the
|
Attribute | debounce |
Type | number |
Default | 0 |
disabled | |
Description | If |
Attribute | disabled |
Type | boolean |
Default | false |
dualKnobs | |
Description | Show two knobs. |
Attribute | dual-knobs |
Type | boolean |
Default | false |
max | |
Description | Maximum integer value of the range. |
Attribute | max |
Type | number |
Default | 100 |
min | |
Description | Minimum integer value of the range. |
Attribute | min |
Type | number |
Default | 0 |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
name | |
Description | The name of the control, which is submitted with the form data. |
Attribute | name |
Type | string |
Default | '' |
pin | |
Description | If |
Attribute | pin |
Type | boolean |
Default | false |
snaps | |
Description | If |
Attribute | snaps |
Type | boolean |
Default | false |
step | |
Description | Specifies the value granularity. |
Attribute | step |
Type | number |
Default | 1 |
ticks | |
Description | If |
Attribute | ticks |
Type | boolean |
Default | true |
value | |
Description | the value of the range. |
Attribute | value |
Type | number | { lower: number; upper: number; } |
Default | 0 |