ion-range

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4滑块组件组件ion-range对项目进行布局。

ion-range官方文档地址:https://ionicframework.com/docs/api/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.

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: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attribute color
Type string | undefined

debounce

Description

How long, in milliseconds, to wait to trigger the ionChange event after each change in the range value.

Attribute debounce
Type number
Default 0

disabled

Description

If true, the user cannot interact with the range.

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 true, a pin with integer value is shown when the knob is pressed.

Attribute pin
Type boolean
Default false

snaps

Description

If true, the knob snaps to tick marks evenly spaced based on the step property value.

Attribute snaps
Type boolean
Default false

step

Description

Specifies the value granularity.

Attribute step
Type number
Default 1

ticks

Description

If true, tick marks are displayed based on the step value. Only applies when snaps is true.

Attribute ticks
Type boolean
Default true

value

Description

the value of the range.

Attribute value
Type number | { lower: number; upper: number; }
Default 0

ion-range 事件(Events)