Slider

滑动输入条组件

  • 滑动进度条确定当前进度的百分比。
  • 可通过设置process确定初始进度百分比, 范围从0-100。
  • 可通过tipMode选择当前查看进度的方式，可选default和tooltip。
  • 可通过placement设置当前进度提示框的位置, 可选top/bottoom(tipMode为tooltip时生效)。
  • 可通过tipStay设置初始和松开按钮时提示是否消失，默认false不显示(tipMode为tooltip时生效)。
  • 可通过range制定范围，默认0-100，必需是长度为2的数组，第一个数字表示初始，第二个数字表示终点。
  • 可通过showRange判断是否在进度条前后显示范围，默认不显示。
  • 可通过duration设置固定移动的距离，默认1。
  • 可通过slideCallback设置拖拽进度条松开时的回调函数。
  • 可通过disabled设置进度条只读。
  • 使用Slider前确保父级是有宽度的元素；使用flex需要加一层宽度100%的外壳。

主要属性和接口：

  • process:初始进度百分比, 默认0
    如: <Slider progress={10}/>
  • placement:进度提示框的位置, 默认top
    如: <Slider placement='bottom' />
  • tipStay:初始和松开按钮时提示是否消失，默认false
    如: <Slider tipStay />
  • range:范围，默认[0,100]。
    如: <Slider range={[20,50]} />
  • showRange:是否在进度条前后显示范围，默认不显示。
    如: <Slider showRange />
  • duration:固定移动的距离，默认1。
    如: <Slider duration={20} />
  • slideCallback:拖拽进度条松开时的回调函数
    如: <Slider slideCallback={(progress)=>{console.log(progress);} />
  • disabled:进度条只读, 不可操作
    如: <Slider disabled/>
Extends Component
Defined in: src/slider/index.js:12
Module: 操作类组件

Available since 1.0.0

Constructor

Slider

Slider ()

Defined in src/slider/index.js:12

Available since 1.0.0

Example:

import React, { Component } from "react"

import Slider from "phoenix-ui/lib/slider"
import Code from "./code/code"

export default class slider extends Component{

    constructor(props,context){
        super(props,context); 

        this.state = {
            progress: 50,
            progress1: 20
        }
    }

    slideCallback(newProgress){ // progress百分比
        alert(newProgress)
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">Slider</h2>
                <h3 className="comp-type">progress(默认0) 初始进度百分比</h3>
                <Slider progress={25} />
                <Code target="slider-progress" />

                <h3 className="comp-type">tipMode(默认default) 提示显示的方式</h3>
                <Slider tipMode="tooltip" />
                <Code target="slider-tipstay" />

                <h3 className="comp-type">placement(默认top) tooltip的位置</h3>
                <Slider tipMode="tooltip"/>
                <Slider tipMode="tooltip" placement="bottom" />
                <Code target="slider-placement" />

                <h3 className="comp-type">tipStay(默认false) 松开进度条时是否要隐藏tooltip</h3>
                <Slider tipMode="tooltip" tipStay />
                <Code target="slider-tipstay" />

                <h3 className="comp-type">range(默认[0,100]) 范围</h3>
                <Slider range={[50,200]} showRange />
                <Code target="slider-range" />

                <h3 className="comp-type">showRange(默认false) 范围</h3>
                <Slider range={[25,65]} showRange />
                <Code target="slider-showrange" />

                <h3 className="comp-type">duration(默认1) 每次滑动的距离</h3>
                <Slider duration={20} />
                <Code target="slider-duration" />

                <h3 className="comp-type">slideCallback 拖拽进度条松开时的回调函数</h3>
                <Slider progress={this.state.progress} slideCallback={(newProgress)=>{this.slideCallback(newProgress);}} />
                <Code target="slider-slidecallback" />

                <h3 className="comp-type">disabled 进度条只读</h3>
                <Slider disabled progress={10} />
                <Code target="slider-disabled" />
            </div>
        );
    }
}

方法

slideCallback

slideCallback
(
  • progress
)

Defined in src/slider/index.js:117

改变进程时的回调函数

参数:

progress Number

进度
参数名类型标识描述
progress Number

进度

属性

classPrefix

String

Defined in src/slider/index.js:56

样式前缀

Default:

'slider'

componentTag

String

Defined in src/slider/index.js:63

标签tagName

duration

Number

Defined in src/slider/index.js:103

每次移动的固定距离，默认1

Default:

1

placement

String

Defined in src/slider/index.js:75

进程提示的位置,默认top

Default:

'top'

progress

String

Defined in src/slider/index.js:69

初始进程,默认0

range

Array

Defined in src/slider/index.js:82

范围，默认0-100，可传固定范围的数组如：[25,50]

Default:

[0,100]

showRange

Boolean

Defined in src/slider/index.js:89

是否在进度条前后显示范围

Default:

false

tipMode

String

Defined in src/slider/index.js:96

显示提示的模式，可选[default,tooltip]

Default:

'default'

tipStay

Boolean

Defined in src/slider/index.js:110

初始及松开按钮时是否显示tooltip

Default:

false