react-progress-button, 用于内联进度指示器的简单 react.js 组件

分享于 

5分钟阅读

GitHub

  繁體 雙語
Simple react.js component for an inline progress indicator
  • 源代码名称:react-progress-button
  • 源代码网址:http://www.github.com/mathieudutour/react-progress-button
  • react-progress-button源代码文档
  • react-progress-button源代码下载
  • Git URL:
    git://www.github.com/mathieudutour/react-progress-button.git
    Git Clone代码到本地:
    git clone http://www.github.com/mathieudutour/react-progress-button
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/mathieudutour/react-progress-button
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    react-progress-button

    build statusnpm versionDependency StatusdevDependency Status

    简单的响应循环进度按钮的组件。

    演示程序

    Demo

    安装

    npm install react-progress-button --save

    示例

    控制用法:

    importProgressButtonfrom'react-progress-button'constApp=React.createClass({
     getInitialState () {
     return {
     buttonState:'' }
     },
     render () {
     return (
     <div><ProgressButton onClick={this.handleClick} state={this.state.buttonState}> Go!</ProgressButton></div> )
     },
     handleClick () {
     this.setState({buttonState:'loading'})
     // make asynchronous callsetTimeout(() => {
     this.setState({buttonState:'success'})
     }, 3000)
     }
    })

    源代码

    使用承诺:

    如果通过 onClick 方法传递的函数返回一个诺,或者是作为 loading 方法的参数传递。

    importProgressButtonfrom'react-progress-button'constApp=React.createClass({
     render () {
     return (
     <div><ProgressButton onClick={this.handleClick}> Go!</ProgressButton></div> )
     },
     handleClick() {
     returnnewPromise(function(resolve, reject) {
     setTimeout(resolve, 3000)
     })
     }
    });

    源代码

    API

    道具

    所有道具都是可选的。所有的道具都将传递给顶级元素。

    控制

    true 如果你控制按钮状态( 通过提供 props.stateprops.onClick )。 false 允许按钮按承诺管理它的状态。

    classNamespace

    CSS类的命名空间,默认值为 pb- 例如 CSS类是 pb-button

    durationError

    当出现错误时,返回正常状态之前的持续时间( ms ),默认值为 1200

    durationSuccess

    当成功发生时,返回到正常状态之前的持续时间( ms ),默认值为 500

    按钮在单击时调用;如果该按钮返回一个诺,则组件将根据of的结果转换成成功/错误。

    onError

    返回到正常状态后返回正常状态的函数

    命令行格式

    当成功后返回正常状态时调用的函数

    状态

    如果不希望使用函数,则为按钮状态。 可以是 ''loadingsuccesserror 或者 disabled

    类型

    按钮( 可以'提交'例如)的类型。

    表单

    要提交( 如果按钮不直接为 inside,则为)的表单的Id。

    shouldAllowClickOnLoading

    单击事件在加载状态时是否应该冒泡

    方法

    负载( )

    将按钮置于加载状态。

    禁用( )

    将按钮置于禁用状态。

    notLoading ( ),启用( )

    将按钮置于正常状态。

    成功( [callback, dontGoBackToNormal] )

    将按钮置于成功状态。 返回到正常状态时调用回调或者 onSuccess prop。

    错误( [callback] )

    将按钮置于错误状态。 返回到正常状态时调用回调或者 onerror prop。

    样式

    查看 react-progress-button.css 关于如何设置这里组件样式的想法。

    如果你使用 web pack,你将需要安装 css-loader 并包括

    
     {
    
    
     test:/.css$/,
    
    
     loader:"style!css"
    
    
     }
    
    
    
    

    在你的jsx文件中,你可以在你的文件中导入 import"../node_modules/react-progress-button/react-progress-button.css"; 虽然路径取决于jsx的嵌套深度。 如果希望自己主题,将CSS复制到方便位置,并指向复制路径,这是 repo的一部分,与 node_modules 中的原始内容不同。

    许可证

    MIT


    COM  react  component  进度  Indic  指示器  
    相关文章