Slider
滑动输入条组件
- 滑动进度条确定当前进度的百分比。
- 可通过设置process确定初始进度百分比, 范围从0-100。
- 可通过placement设置当前进度提示框的位置, 可选top/bottoom。
- 可通过tipStay设置初始和松开按钮时提示是否消失，默认false不显示。
- 可通过range制定范围，默认0-100，必需是长度为2的数组，第一个数字表示初始，第二个数字表示终点。
- 可通过showRange判断是否在进度条前后显示范围，默认不显示。
- 可通过duration设置固定移动的距离，默认1。
- 可通过onSliderChange设置拖拽进度条松开时的回调函数。
- 可通过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} /> - onSliderChange:拖拽进度条松开时的回调函数
如:<Slider onSliderChange={(progress)=>{console.log(progress);} /> - disabled:进度条只读, 不可操作
如:<Slider disabled/>
Constructor
Slider
Slider
()
Example:
import React, { Component } from "react";
import {Slider} from "phoenix-ui";
import Code from "./code/code";
export default class slider extends Component{
constructor(props,context){
super(props,context);
this.state = {
progress: 50,
progress1: 20
}
}
onSliderChange(key, newProgress){ // progress百分比
let o = {};
o[key] = newProgress;
this.setState(o);
}
render(){
return(
<div>
<h2 className="comp-title">Slider</h2>
<h3 className="comp-type">progress(默认0) 初始进度百分比</h3>
<div className="content">
<Slider progress={25} />
</div>
<Code target="slider-progress" />
<h3 className="comp-type">placement(默认top) 进度条提示框的位置</h3>
<div className="content">
<Slider />
<Slider placement="bottom" />
</div>
<Code target="slider-placement" />
<h3 className="comp-type">tipStay(默认false) 松开进度条时是否要隐藏提示</h3>
<div className="content">
<Slider tipStay />
</div>
<Code target="slider-tipstay" />
<h3 className="comp-type">range(默认[0,100]) 范围</h3>
<div className="content">
<Slider range={[50,200]} showRange />
</div>
<Code target="slider-range" />
<h3 className="comp-type">showRange(默认false) 范围</h3>
<div className="content">
<Slider range={[25,65]} showRange />
</div>
<Code target="slider-showrange" />
<h3 className="comp-type">duration(默认1) 每次滑动的距离</h3>
<div className="content">
<Slider duration={20} />
</div>
<Code target="slider-duration" />
<h3 className="comp-type">onSliderChange 拖拽进度条松开时的回调函数</h3>
<div className="content">
<Slider progress={this.state.progress} onSliderChange={(newProgress)=>{this.onSliderChange('progress',newProgress);}} />
<div style={{textAlign:"center",padding:"1rem 0"}}>Progress: {this.state.progress}</div>
</div>
<Code target="slider-onsliderchange" />
<h3 className="comp-type">disabled 进度条只读</h3>
<div className="content">
<Slider disabled progress={10} />
</div>
<Code target="slider-disabled" />
<h3 className="comp-type">整合</h3>
<div className="content">
<Slider progress={this.state.progress1} onSliderChange={(newProgress)=>{this.onSliderChange('progress1',newProgress);}}
range={[10,50]} duration={5} showRange tipStay />
</div>
<Code target="slider-disabled" />
</div>
);
}
}方法
onSliderChange
onSliderChange
()
改变进程时的回调函数
属性
classPrefix
String
样式前缀
Default:
'slider'
componentTag
String
标签tagName
duration
Number
每次移动的固定距离，默认1
Default:
1
placement
String
进程提示的位置,默认top
Default:
'top'
progress
String
初始进程,默认0
range
Array
范围，默认0-100，可传固定范围的数组如：[25,50]
Default:
[0,100]
showRange
Boolean
是否在进度条前后显示范围
Default:
false
tipStay
Boolean
初始及松开按钮时是否显示进度
Default:
false