Skip to content

Commit

Permalink
添加剪切板
Browse files Browse the repository at this point in the history
  • Loading branch information
zhaoyuu committed Dec 27, 2016
1 parent 160b0a1 commit ec85947
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 15 deletions.
37 changes: 23 additions & 14 deletions demo/index.js
View file
Expand Up @@ -4,8 +4,13 @@ import { Panel } from 'bee-panel';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Button from '../src';
import ReactZeroClipboard from 'react-zeroclipboard';


var zclipProps = {
swfPath: 'http://bee.tinper.org/clipboard/ZeroClipboard.swf'
};

const CARET = <i className="uf uf-chevronarrowdown"></i>;

const CARETUP = <i className="uf uf-chevronarrowup"></i>;
Expand Down Expand Up @@ -37,17 +42,17 @@ class Demo1 extends Component {
*/

class Demo2 extends Component {
render () {
render() {
return (
<div className="demoPadding">
<Col md={6} xs={12}>
<Button shape="block" colors="primary">块状按钮</Button>
</Col>
<Col md={6} xs={12}>
<Button shape="round" colors="primary">圆形边按钮</Button>
<Button shape="squared" colors="warning">方形按钮</Button>
<Button shape="floating" colors="primary">圆形按钮</Button>
</Col>
<Col md={6} xs={12}>
<Button shape="block" colors="primary">块状按钮</Button>
</Col>
<Col md={6} xs={12}>
<Button shape="round" colors="primary">圆形边按钮</Button>
<Button shape="squared" colors="warning">方形按钮</Button>
<Button shape="floating" colors="primary">圆形按钮</Button>
</Col>
</div>
)
}
Expand Down Expand Up @@ -104,20 +109,21 @@ class Demo4 extends Component {
*/

class Demo5 extends Component {
constructor(props){
constructor(props) {
super(props);
}
handleClick(){

handleClick() {
alert("谢谢你点我")
}

render () {
render() {
return (
<Button colors="primary" onClick={ this.handleClick }>事件按钮</Button>
<Button colors="primary" onClick={ this.handleClick }>事件按钮</Button>
)
}
}
var DemoArray = [{"example":<Demo1 />,"title":" 默认按钮","code":"/**\n *\n * @title 默认按钮\n * @description 基础按钮\n *\n */\n\nclass Demo1 extends Component {\n render () {\n return (\n <div className=\"demoPadding\">\n <Button>Default</Button>\n <Button disabled>disabled</Button>\n <Button shape=\"border\">border</Button>\n </div>\n )\n }\n}\n"},{"example":<Demo2 />,"title":" 不同形状的按钮","code":"/**\n *\n * @title 不同形状的按钮\n * @description 通过`shape`属性控制按钮大小\n *\n */\n\nclass Demo2 extends Component {\n render () {\n return (\n <div className=\"demoPadding\">\n <Col md={6} xs={12}>\n <Button shape=\"block\" colors=\"primary\">块状按钮</Button>\n </Col>\n <Col md={6} xs={12}>\n <Button shape=\"round\" colors=\"primary\">圆形边按钮</Button>\n <Button shape=\"squared\" colors=\"warning\">方形按钮</Button>\n <Button shape=\"floating\" colors=\"primary\">圆形按钮</Button>\n </Col>\n </div>\n )\n }\n}\n"},{"example":<Demo3 />,"title":" 不同颜色的按钮","code":"/**\n *\n * @title 不同颜色的按钮\n * @description 通过`colors`属性控制按钮颜色\n *\n */\n\nclass Demo3 extends Component {\n\n render () {\n return (\n <div className=\"demoPadding\">\n <Button colors=\"success\">success</Button>\n <Button colors=\"info\">info</Button>\n <Button colors=\"warning\">warning</Button>\n <Button colors=\"danger\">danger</Button>\n <div className=\"divider\"></div>\n <Button shape=\"border\" colors=\"success\">success</Button>\n <Button shape=\"border\" colors=\"warning\">info</Button>\n <Button shape=\"border\" colors=\"info\">warning</Button>\n <Button shape=\"border\" colors=\"danger\">danger</Button>\n </div>\n )\n }\n}\n"},{"example":<Demo4 />,"title":" 不同大小的按钮","code":"/**\n *\n * @title 不同大小的按钮\n * @description 通过`size`属性控制按钮大小\n *\n */\n\nclass Demo4 extends Component {\n render () {\n return (\n <div className=\"demoPadding\">\n <Button size=\"sm\" colors=\"primary\">小按钮</Button>\n <Button colors=\"primary\">默认</Button>\n <Button size=\"lg\" colors=\"primary\">大按钮</Button>\n <Button size=\"xg\" colors=\"primary\">巨大按钮</Button>\n </div>\n )\n }\n}\n"},{"example":<Demo5 />,"title":" 事件按钮","code":"/**\n *\n * @title 事件按钮\n * @description 点击按钮触发事件\n *\n */\n\nclass Demo5 extends Component {\n constructor(props){\n super(props);\n }\n handleClick(){\n alert(\"谢谢你点我\")\n }\n\n render () {\n return (\n <Button colors=\"primary\" onClick={ this.handleClick }>事件按钮</Button>\n )\n }\n}\n"}]
var DemoArray = [{"example":<Demo1 />,"title":" 默认按钮","code":"/**\n *\n * @title 默认按钮\n * @description 基础按钮\n *\n */\n\nclass Demo1 extends Component {\n render () {\n return (\n <div className=\"demoPadding\">\n <Button>Default</Button>\n <Button disabled>disabled</Button>\n <Button shape=\"border\">border</Button>\n </div>\n )\n }\n}\n","desc":" 基础按钮"},{"example":<Demo2 />,"title":" 不同形状的按钮","code":"/**\n *\n * @title 不同形状的按钮\n * @description 通过`shape`属性控制按钮大小\n *\n */\n\nclass Demo2 extends Component {\n render() {\n return (\n <div className=\"demoPadding\">\n <Col md={6} xs={12}>\n <Button shape=\"block\" colors=\"primary\">块状按钮</Button>\n </Col>\n <Col md={6} xs={12}>\n <Button shape=\"round\" colors=\"primary\">圆形边按钮</Button>\n <Button shape=\"squared\" colors=\"warning\">方形按钮</Button>\n <Button shape=\"floating\" colors=\"primary\">圆形按钮</Button>\n </Col>\n </div>\n )\n }\n}\n","desc":" 通过`shape`属性控制按钮大小"},{"example":<Demo3 />,"title":" 不同颜色的按钮","code":"/**\n *\n * @title 不同颜色的按钮\n * @description 通过`colors`属性控制按钮颜色\n *\n */\n\nclass Demo3 extends Component {\n\n render () {\n return (\n <div className=\"demoPadding\">\n <Button colors=\"success\">success</Button>\n <Button colors=\"info\">info</Button>\n <Button colors=\"warning\">warning</Button>\n <Button colors=\"danger\">danger</Button>\n <div className=\"divider\"></div>\n <Button shape=\"border\" colors=\"success\">success</Button>\n <Button shape=\"border\" colors=\"warning\">info</Button>\n <Button shape=\"border\" colors=\"info\">warning</Button>\n <Button shape=\"border\" colors=\"danger\">danger</Button>\n </div>\n )\n }\n}\n","desc":" 通过`colors`属性控制按钮颜色"},{"example":<Demo4 />,"title":" 不同大小的按钮","code":"/**\n *\n * @title 不同大小的按钮\n * @description 通过`size`属性控制按钮大小\n *\n */\n\nclass Demo4 extends Component {\n render () {\n return (\n <div className=\"demoPadding\">\n <Button size=\"sm\" colors=\"primary\">小按钮</Button>\n <Button colors=\"primary\">默认</Button>\n <Button size=\"lg\" colors=\"primary\">大按钮</Button>\n <Button size=\"xg\" colors=\"primary\">巨大按钮</Button>\n </div>\n )\n }\n}\n","desc":" 通过`size`属性控制按钮大小"},{"example":<Demo5 />,"title":" 事件按钮","code":"/**\n *\n * @title 事件按钮\n * @description 点击按钮触发事件\n *\n */\n\nclass Demo5 extends Component {\n constructor(props) {\n super(props);\n }\n\n handleClick() {\n alert(\"谢谢你点我\")\n }\n\n render() {\n return (\n <Button colors=\"primary\" onClick={ this.handleClick }>事件按钮</Button>\n )\n }\n}\n","desc":" 点击按钮触发事件"}]


class Demo extends Component {
Expand Down Expand Up @@ -161,6 +167,9 @@ class Demo extends Component {
<h3>{ title }</h3>
<p>{ desc }</p>
<Panel collapsible expanded={ this.state.open } colors='bordered' header={ header } footer={footer} footerStyle = {{padding: 0}}>
<ReactZeroClipboard text={code} {...zclipProps}>
<span className="input-group-addon" style={{cursor: 'pointer'}}>Copy</span>
</ReactZeroClipboard>
<pre><code className="hljs javascript">{ code }</code></pre>
</Panel>
</Col>
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Expand Up @@ -45,6 +45,7 @@
"es5-shim": "~4.1.10",
"react": "~0.14.0",
"react-addons-test-utils": "15.3.2",
"react-dom": "~0.14.0"
"react-dom": "~0.14.0",
"react-zeroclipboard": "^3.2.2"
}
}

0 comments on commit ec85947

Please sign in to comment.