phoenix-ui

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimal-ui" /> <title>Slider - phoenix-ui</title> <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="../assets/css/main.css" id="site_styles"> <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> </head> <body class="yui3-smart" _assetsPath="../assets"> <nav class="navbar navbar-inverse navbar-fixed-top custom-navbar" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand mainlogo" href=""> <img alt="phoenix-ui" src="../assets/css/logo.png" title="phoenix-ui"> phoenix-ui </a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="index.html">主页</a> </li> </ul> <div class="navbar-form navbar-right filterAPi" autocomplete="off"> <input type="text" id='txtSearchAPI' class="form-control search-query" placeholder="Search for API" /> <ul id="filterList" class="filterItems dropdown-menu" role="menu"></ul> </div> </div> </div> </nav> <div id="sidebar"> <h3>模块/类</h3> <div id="api-tabview-filter"> <input id='txtSearch' type="search" class="form-control" placeholder="Type to filter Modules/Classes"> </div> <dl id="sidebar_list"> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/基础组件.html">基础组件</a> </dt> <dd> <ul> <li> <a href="../classes/Button.html">Button</a> <ul> </ul> </li> <li> <a href="../classes/ButtonGroup.html">ButtonGroup</a> <ul> </ul> </li> <li> <a href="../classes/Star.html">Star</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/布局组件.html">布局组件</a> </dt> <dd> <ul> <li> <a href="../classes/Row.html">Row</a> <ul> </ul> </li> <li> <a href="../classes/TableView.html">TableView</a> <ul> </ul> </li> <li> <a href="../classes/Col.html">Col</a> <ul> </ul> </li> <li> <a href="../classes/Grid.html">Grid</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/弹出框组件.html">弹出框组件</a> </dt> <dd> <ul> <li> <a href="../classes/Alert.html">Alert</a> <ul> </ul> </li> <li> <a href="../classes/Dialog.html">Dialog</a> <ul> </ul> </li> <li> <a href="../classes/Prompt.html">Prompt</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/提示组件.html">提示组件</a> </dt> <dd> <ul> <li> <a href="../classes/Popover.html">Popover</a> <ul> </ul> </li> <li> <a href="../classes/Whisper.html">Whisper</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/操作类组件.html">操作类组件</a> </dt> <dd> <ul> <li> <a href="../classes/ImageList.html">ImageList</a> <ul> </ul> </li> <li> <a href="../classes/LoadingList.html">LoadingList</a> <ul> </ul> </li> <li> <a href="../classes/Popup.html">Popup</a> <ul> </ul> </li> <li> <a href="../classes/Slider.html">Slider</a> <ul> </ul> </li> <li> <a href="../classes/Steps.html">Steps</a> <ul> </ul> </li> <li> <a href="../classes/Toast.html">Toast</a> <ul> </ul> </li> <li> <a href="../classes/Accordion.html">Accordion</a> <ul> </ul> </li> <li> <a href="../classes/Swipe.html">Swipe</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/标签组件.html">标签组件</a> </dt> <dd> <ul> <li> <a href="../classes/Icon.html">Icon</a> <ul> </ul> </li> <li> <a href="../classes/Badge.html">Badge</a> <ul> </ul> </li> <li> <a href="../classes/Label.html">Label</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/菜单组件.html">菜单组件</a> </dt> <dd> <ul> <li> <a href="../classes/Menu.html">Menu</a> <ul> </ul> </li> <li> <a href="../classes/MenuBody.html">MenuBody</a> <ul> </ul> </li> <li> <a href="../classes/MenuHeader.html">MenuHeader</a> <ul> </ul> </li> <li> <a href="../classes/MenuItem.html">MenuItem</a> <ul> </ul> </li> <li> <a href="../classes/MenuList.html">MenuList</a> <ul> </ul> </li> <li> <a href="../classes/MenuNav.html">MenuNav</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/表单组件.html">表单组件</a> </dt> <dd> <ul> <li> <a href="../classes/Input.html">Input</a> <ul> </ul> </li> <li> <a href="../classes/Switch.html">Switch</a> <ul> </ul> </li> <li> <a href="../classes/FormGroup.html">FormGroup</a> <ul> </ul> </li> <li> <a href="../classes/TextArea.html">TextArea</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/辅助组件.html">辅助组件</a> </dt> <dd> <ul> <li> <a href="../classes/Drag.html">Drag</a> <ul> </ul> </li> <li> <a href="../classes/Animate.html">Animate</a> <ul> </ul> </li> </ul> </dd> <dt> <span class="glyphicon glyphicon-minus"></span> <a href="../modules/选项卡.html">选项卡</a> </dt> <dd> <ul> <li> <a href="../classes/Tab.html">Tab</a> <ul> </ul> </li> <li> <a href="../classes/Tabset.html">Tabset</a> <ul> </ul> </li> </ul> </dd> </dl> <div class="icon-sidebar-btn icon-sidebar-btn-open"><span class="glyphicon glyphicon-chevron-left"></span>收起</div> </div> <div class="stdoc-content"> <div class="apidocs"> <div id="docs-main"> <div class="content"> <div class="page-header"> <h1>Slider</h1> </div> <div class="well well-small sign-left3"> <div class="stdoc-code"><p>滑动输入条组件<br/></p> <ul> <li>滑动进度条确定当前进度的百分比。</li> <li>可通过设置process确定初始进度百分比, 范围从0-100。</li> <li>可通过placement设置当前进度提示框的位置, 可选top/bottoom。</li> <li>可通过tipStay设置初始和松开按钮时提示是否消失，默认false不显示。</li> <li>可通过range制定范围，默认0-100，必需是长度为2的数组，第一个数字表示初始，第二个数字表示终点。</li> <li>可通过showRange判断是否在进度条前后显示范围，默认不显示。</li> <li>可通过duration设置固定移动的距离，默认1。</li> <li>可通过onSliderChange设置拖拽进度条松开时的回调函数。</li> <li>可通过disabled设置进度条只读。</li> <li>使用Slider前确保父级是有宽度的元素；使用flex需要加一层宽度100%的外壳。</li> </ul> <p>主要属性和接口：</p> <ul> <li>process:初始进度百分比, 默认0 <br/> 如: <code><Slider progress={10}/></code></li> <li>placement:进度提示框的位置, 默认top <br/> 如: <code><Slider placement="bottom" /></code></li> <li>tipStay:初始和松开按钮时提示是否消失，默认false <br/> 如: <code><Slider tipStay /></code></li> <li>range:范围，默认[0,100]。 <br/> 如: <code><Slider range={[20,50]} /></code></li> <li>showRange:是否在进度条前后显示范围，默认不显示。 <br/> 如: <code><Slider showRange /></code></li> <li>duration:固定移动的距离，默认1。 <br/> 如: <code><Slider duration={20} /></code></li> <li>onSliderChange:拖拽进度条松开时的回调函数 <br/> 如: <code><Slider onSliderChange={(progress)=>{console.log(progress);} /></code></li> <li>disabled:进度条只读, 不可操作 <br/> 如: <code><Slider disabled/></code></li> </ul> </div> </div> <div class="well well-small sign-left2 container-fluid" id="classesItems"> <div class="row"> <div class="index-section methods col-sm-4"> <h3>方法</h3> <ul class="index-list methods extends"> <li class="index-item method"> <a href="#" data-tabid="#method" data-anchor="#method_onSliderChange" data-tablink="onSliderChange">onSliderChange</a> </li> </ul> </div> <div class="index-section properties col-sm-4"> <h3>属性</h3> <ul class="index-list properties extends"> <li class="index-item property"> <a href="#" data-tabid="#property" data-anchor="#property_classPrefix" data-tablink="classPrefix">classPrefix</a> </li> <li class="index-item property"> <a href="#" data-tabid="#property" data-anchor="#property_componentTag" data-tablink="componentTag">componentTag</a> </li> <li class="index-item property"> <a href="#" data-tabid="#property" data-anchor="#property_duration" data-tablink="duration">duration</a> </li> <li class="index-item property"> <a href="#" data-tabid="#property" data-anchor="#property_placement" data-tablink="placement">placement</a> </li> <li class="index-item property"> <a href="#" data-tabid="#property" data-anchor="#property_progress" data-tablink="progress">progress</a> </li> <li class="index-item property"> <a href="#" data-tabid="#property" data-anchor="#property_range" data-tablink="range">range</a> </li> <li class="index-item property"> <a href="#" data-tabid="#property" data-anchor="#property_showRange" data-tablink="showRange">showRange</a> </li> <li class="index-item property"> <a href="#" data-tabid="#property" data-anchor="#property_tipStay" data-tablink="tipStay">tipStay</a> </li> </ul> </div> <div class="index-section events col-sm-4"> <h3>事件</h3> </div> </div> </div> <div class=""> <ul id="itemTab" class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#class">详情</a></li> <li class=""><a data-toggle="tab" href="#method">方法</a></li> <li class=""><a data-toggle="tab" href="#property">属性</a></li> </ul> <div class="tab-content"> <div id="class" class="tab-pane active"> <div class="well well-small classDetail sign-left1"> <div class="extends"> Extends Component </div> <div class="foundat"> Defined in: <a href="../files/src_Slider.js.html#l8"><code>src/Slider.js:8</code></a> </div> Module: <a href="../modules/操作类组件.html">操作类组件</a> <p>Available since 1.0.0</p> </div> <div class="constructor"> <h2>Constructor</h2> <div id="method_Slider" class="method item"> <h3 class="name">Slider</h3> <code> Slider <span class="paren">()</span> </code> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_Slider.js.html#l8"><code>src/Slider.js:8</code></a> </p> <p>Available since 1.0.0</p> </div> <div class="description well well-small sign-left3"> </div> <div class="example app-example"> <h4>Example:</h4> <ul class="nav nav-tabs example-list"> <li role="presentation" class="active" data-demo="https://future-team.github.io/phoenix-ui/examples/index.html#/slider" _no='0'> <a>展示</a></li> </ul> <div class="example-content showdemo "> <div class="stdoc-code"><pre class="code prettyprint"><code>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> ); } }</code></pre> </div> </div> <div class="btn-method-box"> <button class="btn btn-info btn-viewDemo" type="button">查看示例</button> <button class="btn btn-info btn-editDemo" type="button">编辑代码</button> </div> <div class="device"></div> </div> </div> </div> </div> <div id="method" class="tab-pane"> <h2 class="off-left">方法</h2> <div id="method_onSliderChange" class="method item"> <h3 class="name">onSliderChange</h3> <code> onSliderChange <span class="paren">()</span> </code> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_Slider.js.html#l105"><code>src/Slider.js:105</code></a> </p> </div> <div class="description well well-small sign-left3"> <div class="stdoc-code"><p>改变进程时的回调函数</p> </div> </div> </div> </div> <div id="property" class="tab-pane"> <h2 class="off-left">属性</h2> <div id="property_classPrefix" class="property item"> <h3 class="name"><code>classPrefix</code></h3> <span class="type">String</span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_Slider.js.html#l51"><code>src/Slider.js:51</code></a> </p> </div> <div class="description"> <div class="stdoc-code"><p>样式前缀</p> </div> </div> <p><strong>Default:</strong></p> <code> 'slider'</code> </div> <div id="property_componentTag" class="property item"> <h3 class="name"><code>componentTag</code></h3> <span class="type">String</span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_Slider.js.html#l58"><code>src/Slider.js:58</code></a> </p> </div> <div class="description"> <div class="stdoc-code"><p>标签tagName</p> </div> </div> </div> <div id="property_duration" class="property item"> <h3 class="name"><code>duration</code></h3> <span class="type">Number</span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_Slider.js.html#l91"><code>src/Slider.js:91</code></a> </p> </div> <div class="description"> <div class="stdoc-code"><p>每次移动的固定距离，默认1</p> </div> </div> <p><strong>Default:</strong></p> <code> 1</code> </div> <div id="property_placement" class="property item"> <h3 class="name"><code>placement</code></h3> <span class="type">String</span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_Slider.js.html#l70"><code>src/Slider.js:70</code></a> </p> </div> <div class="description"> <div class="stdoc-code"><p>进程提示的位置,默认top</p> </div> </div> <p><strong>Default:</strong></p> <code> 'top'</code> </div> <div id="property_progress" class="property item"> <h3 class="name"><code>progress</code></h3> <span class="type">String</span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_Slider.js.html#l64"><code>src/Slider.js:64</code></a> </p> </div> <div class="description"> <div class="stdoc-code"><p>初始进程,默认0</p> </div> </div> </div> <div id="property_range" class="property item"> <h3 class="name"><code>range</code></h3> <span class="type">Array</span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_Slider.js.html#l77"><code>src/Slider.js:77</code></a> </p> </div> <div class="description"> <div class="stdoc-code"><p>范围，默认0-100，可传固定范围的数组如：[25,50]</p> </div> </div> <p><strong>Default:</strong></p> <code> [0,100]</code> </div> <div id="property_showRange" class="property item"> <h3 class="name"><code>showRange</code></h3> <span class="type">Boolean</span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_Slider.js.html#l84"><code>src/Slider.js:84</code></a> </p> </div> <div class="description"> <div class="stdoc-code"><p>是否在进度条前后显示范围</p> </div> </div> <p><strong>Default:</strong></p> <code> false</code> </div> <div id="property_tipStay" class="property item"> <h3 class="name"><code>tipStay</code></h3> <span class="type">Boolean</span> <div class="meta"> <p class="foundat"> Defined in <a href="../files/src_Slider.js.html#l98"><code>src/Slider.js:98</code></a> </p> </div> <div class="description"> <div class="stdoc-code"><p>初始及松开按钮时是否显示进度</p> </div> </div> <p><strong>Default:</strong></p> <code> false</code> </div> </div> </div> </div> </div> </div> </div> </div> <a id="gotoTop" class='well well-small' href='#'> </a> <script src="../assets/vendor/jquery/jquery-1.8.2.js"></script> <script src="../assets/vendor/bootstrap/js/bootstrap.js"></script> <script src="../assets/vendor/prettify/prettify-min.js"></script> <script src="../assets/js/config.js"></script> <script src="../assets/js/doc.js"></script> </body> </html>