云社区 博客 博客详情
云社区 博客 博客详情

Welink React-ui表单组件Slider

云会议运营喵大人 发表于 2020-02-21 18:38:40 02-21 18:38
云会议运营喵大人 发表于 2020-02-21 18:38:40 2020/02/21
0
0

【摘要】 Slider滑块。List UI 提供与WeLink规范一致的视图。 组件提供了滑动前、滑动中、数值提示的样式。参数说明参数类型默认值说明maxnumber100最大值minnumber0最小值stepnumber1滑块中两个数之间的偏移量showValuebooltrue是否显示值disabledboolfalse是否禁止滑动valuenumber-滑块值defaultValuenumbe...

Slider


滑块。List UI 提供与WeLink规范一致的视图。 组件提供了滑动前、滑动中、数值提示的样式。

参数说明

参数类型默认值说明
maxnumber100最大值
minnumber0最小值
stepnumber1滑块中两个数之间的偏移量
showValuebooltrue是否显示值
disabledboolfalse是否禁止滑动
valuenumber-滑块值
defaultValuenumber0滑块初始值
onChangefunc-滑块值更改的回调时间
snapToValuebool-滑块值更改、传递值和事件实例时是否回调

import React from 'react';
import {
  Slider, CellsTitle, Button, ButtonArea
} from '@wecode/react-weui';
const _style = { marginLeft: '10px' };
class SliderDemo extends React.Component {

  state = {
    controlValue: 50
  };

  render() {
    const { controlValue } = this.state;
    return (
      <section>
        <CellsTitle>Basic Example</CellsTitle>
        <Slider min={1} max={5} step={1} onChange={value => console.log(value)} />
        <CellsTitle>Disabled Example</CellsTitle>
        <Slider disabled onChange={value => console.log(value)} />
        <CellsTitle>Controlled Example</CellsTitle>
        <Slider
          max={100}
          step={2}
          value={controlValue}
          onChange={value => this.setState({ controlValue: value })}
        />
        <ButtonArea>
          <Button
            size="small"
            onClick={() => {
              if (controlValue >= 10) {
                this.setState({ controlValue: controlValue - 10 });
              }
            }}
          >
            - 10
          </Button>
          <Button
            style={_style}
            size="small"
            onClick={() => {
              if (controlValue <= 90) {
                this.setState({ controlValue: controlValue + 10 });
              }
            }}
          >
            + 10
          </Button>
        </ButtonArea>
        <br />
        <CellsTitle>No snap & No show value</CellsTitle>
        <Slider snapToValue={false} showValue={false} />
      </section>
    );
  }
}
export default SliderDemo;


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请发送邮件至:huaweicloud.bbs@huawei.com;如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消