组件演示

[{"title":"按钮类型","id":"components-button-demo-type","tags":[],"filepath":"site/components/button/demo/type.md","directory":"components/button/demo","filename":"type","meta":{"title":"按钮类型","description":"\n<p>不同类型的按钮。</p>\n","order":"1","filepath":"site/components/button/demo/type.md","filename":"type","directory":"components/button/demo","id":"components-button-demo-type","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nReactDOM.render(React.createElement(\n 'div',\n { style: { background: 'rgba(31, 56, 88, 0.4)', padding: '16px' } },\n React.createElement(\n _uxcore.Button,\n { type: 'primary' },\n 'primary'\n ),\n '\\xA0',\n React.createElement(\n _uxcore.Button,\n { type: 'secondary' },\n 'secondary'\n ),\n '\\xA0',\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n 'outline'\n ),\n '\\xA0',\n React.createElement(\n _uxcore.Button,\n { ghost: true, type: 'white' },\n 'white'\n ),\n '\\xA0',\n React.createElement(\n _uxcore.Button,\n { type: 'text' },\n 'text'\n ),\n '\\xA0'\n), document.getElementById('components-button-demo-type'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{background:'rgba(31,</span> <span class=\"hljs-attribute\">56</span>, <span class=\"hljs-attribute\">88</span>, <span class=\"hljs-attribute\">0.4</span>)', <span class=\"hljs-attribute\">padding:</span> '<span class=\"hljs-attribute\">16px</span>'}}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span>&gt;</span>primary<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>&amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>secondary<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>&amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>outline<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>&amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">ghost</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"white\"</span>&gt;</span>white<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>&amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"text\"</span>&gt;</span>text<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>&amp;nbsp;\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n , document.getElementById('components-button-demo-type'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"不同尺寸","id":"components-button-demo-size","tags":[],"filepath":"site/components/button/demo/size.md","directory":"components/button/demo","filename":"size","meta":{"title":"不同尺寸","description":"\n<p>不同尺寸的按钮。</p>\n","order":"2","filepath":"site/components/button/demo/size.md","filename":"size","directory":"components/button/demo","id":"components-button-demo-size","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nReactDOM.render(React.createElement(\n \"div\",\n null,\n React.createElement(\n _uxcore.Button,\n { size: \"small\" },\n \"small\"\n ),\n \"\\xA0\",\n React.createElement(\n _uxcore.Button,\n { size: \"middle\" },\n \"middle\"\n ),\n \"\\xA0\",\n React.createElement(\n _uxcore.Button,\n { size: \"large\" },\n \"large\"\n )\n), document.getElementById('components-button-demo-size'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"small\"</span>&gt;</span>small<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>&amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"middle\"</span>&gt;</span>middle<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>&amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"large\"</span>&gt;</span>large<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n, document.getElementById('components-button-demo-size'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"警示按钮","id":"components-button-demo-danger","tags":[],"filepath":"site/components/button/demo/danger.md","directory":"components/button/demo","filename":"danger","meta":{"title":"警示按钮","description":"\n<p>用于页面内的影响较大的操作,一般配合二次确认使用。</p>\n","order":"3","filepath":"site/components/button/demo/danger.md","filename":"danger","directory":"components/button/demo","id":"components-button-demo-danger","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nReactDOM.render(React.createElement(\n \"div\",\n null,\n React.createElement(\n _uxcore.Button,\n { danger: true, type: \"primary\" },\n \"primary\"\n ),\n \"\\xA0\",\n React.createElement(\n _uxcore.Button,\n { danger: true, type: \"secondary\" },\n \"secondary\"\n ),\n \"\\xA0\",\n React.createElement(\n _uxcore.Button,\n { danger: true, type: \"outline\" },\n \"outline\"\n )\n), document.getElementById('components-button-demo-danger'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">danger</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span>&gt;</span>primary<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>&amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">danger</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>secondary<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>&amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">danger</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>outline<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n , document.getElementById('components-button-demo-danger'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"幽灵按钮","id":"components-button-demo-ghost","tags":[],"filepath":"site/components/button/demo/ghost.md","directory":"components/button/demo","filename":"ghost","meta":{"title":"幽灵按钮","description":"\n<p>背景变为透明,常用在有色背景上。</p>\n","order":"3","filepath":"site/components/button/demo/ghost.md","filename":"ghost","directory":"components/button/demo","id":"components-button-demo-ghost","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nReactDOM.render(React.createElement(\n 'div',\n { style: { background: 'rgba(31, 56, 88, 0.4)' } },\n React.createElement(\n 'div',\n {\n style: {\n margin: '10px 0',\n padding: '10px 0'\n }\n },\n React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '12px' }, ghost: true, type: 'secondary' },\n 'secondary'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '12px' }, ghost: true, type: 'outline' },\n 'outline'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '12px' }, ghost: true, type: 'white' },\n 'white'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '12px' }, ghost: true, danger: true, type: 'secondary' },\n 'danger'\n )\n ),\n React.createElement(\n 'div',\n { style: { marginTop: 12 } },\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '12px' }, ghost: true, disabled: true, type: 'secondary' },\n 'secondary disabled'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '12px' }, ghost: true, disabled: true, type: 'outline' },\n 'outline disabled'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '12px' }, ghost: true, type: 'white', disabled: true },\n 'white disabled'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: '12px' }, ghost: true, danger: true, disabled: true, type: 'secondary' },\n 'danger'\n )\n )\n )\n), document.getElementById('components-button-demo-ghost'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">background:</span> '<span class=\"hljs-attribute\">rgba</span>(<span class=\"hljs-attribute\">31</span>, <span class=\"hljs-attribute\">56</span>, <span class=\"hljs-attribute\">88</span>, <span class=\"hljs-attribute\">0.4</span>)' }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>\n <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span>\n <span class=\"hljs-attribute\">margin:</span> '<span class=\"hljs-attribute\">10px</span> <span class=\"hljs-attribute\">0</span>',\n <span class=\"hljs-attribute\">padding:</span> '<span class=\"hljs-attribute\">10px</span> <span class=\"hljs-attribute\">0</span>',\n }}\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">ghost</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>secondary<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">ghost</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>outline<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">ghost</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"white\"</span>&gt;</span>white<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">ghost</span> <span class=\"hljs-attribute\">danger</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>danger<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginTop:</span> <span class=\"hljs-attribute\">12</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">ghost</span> <span class=\"hljs-attribute\">disabled</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>secondary disabled<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">ghost</span> <span class=\"hljs-attribute\">disabled</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>outline disabled<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">ghost</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"white\"</span> <span class=\"hljs-attribute\">disabled</span>&gt;</span>white disabled<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">ghost</span> <span class=\"hljs-attribute\">danger</span> <span class=\"hljs-attribute\">disabled</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>danger<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n, document.getElementById('components-button-demo-ghost'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"倒计时按钮","id":"components-button-demo-countdown","tags":[],"filepath":"site/components/button/demo/countdown.md","directory":"components/button/demo","filename":"countdown","meta":{"title":"倒计时按钮","description":"\n<p>倒计时</p>\n","order":"4","filepath":"site/components/button/demo/countdown.md","filename":"countdown","directory":"components/button/demo","id":"components-button-demo-countdown","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n agreeDisabled: true\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n _uxcore.Button,\n {\n size: 'middle',\n disabled: this.state.agreeDisabled,\n countDown: 10,\n onCountDownEnd: function onCountDownEnd() {\n _this2.setState({\n agreeDisabled: false\n });\n }\n },\n '\\u540C\\u610F'\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-button-demo-countdown'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n agreeDisabled: <span class=\"hljs-literal\">true</span>\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>\n <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"middle\"</span>\n <span class=\"hljs-attribute\">disabled</span>=<span class=\"hljs-value\">{this.state.agreeDisabled}</span>\n <span class=\"hljs-attribute\">countDown</span>=<span class=\"hljs-value\">{10}</span>\n <span class=\"hljs-attribute\">onCountDownEnd</span>=<span class=\"hljs-value\">{()</span> =&gt;</span> {\n this.setState({\n agreeDisabled: false,\n });\n }}\n &gt;同意<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n )</span>\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>, document.getElementById('components-button-demo-countdown'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"加载态","id":"components-button-demo-loading","tags":[],"filepath":"site/components/button/demo/loading.md","directory":"components/button/demo","filename":"loading","meta":{"title":"加载态","description":"\n<p>加载的状态</p>\n","order":"4","filepath":"site/components/button/demo/loading.md","filename":"loading","directory":"components/button/demo","id":"components-button-demo-loading","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '12px' }, loading: true, size: 'small' },\n 'small'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '12px' }, loading: true, size: 'medium' },\n 'medium'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '12px' }, loading: true, size: 'large' },\n 'large'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '12px' }, loading: true, type: 'primary' },\n 'primary'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '12px' }, loading: true, type: 'secondary' },\n 'secondary'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '12px' }, loading: true, type: 'outline' },\n 'outline'\n )\n), document.getElementById('components-button-demo-loading'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">loading</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"small\"</span>&gt;</span>small<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">loading</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"medium\"</span>&gt;</span>medium<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">loading</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"large\"</span>&gt;</span>large<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">loading</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span>&gt;</span>primary<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">loading</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>secondary<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">12px</span>' }} <span class=\"hljs-attribute\">loading</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>outline<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n, document.getElementById('components-button-demo-loading'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"禁用状态","id":"components-button-demo-status","tags":[],"filepath":"site/components/button/demo/status.md","directory":"components/button/demo","filename":"status","meta":{"title":"禁用状态","description":"\n","order":"5","filepath":"site/components/button/demo/status.md","filename":"status","directory":"components/button/demo","id":"components-button-demo-status","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nReactDOM.render(React.createElement(\n _uxcore.Button,\n { disabled: true },\n 'disabled'\n), document.getElementById('components-button-demo-status'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">disabled</span>&gt;</span>disabled<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n, document.getElementById('components-button-demo-status'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"图标按钮","id":"components-button-demo-icon","tags":[],"filepath":"site/components/button/demo/icon.md","directory":"components/button/demo","filename":"icon","meta":{"title":"图标按钮","description":"\n","order":"6","filepath":"site/components/button/demo/icon.md","filename":"icon","directory":"components/button/demo","id":"components-button-demo-icon","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '10px' }, size: 'small' },\n React.createElement(_uxcore.Icon, { name: 'xiazai' }),\n 'small'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '10px' }, size: 'medium' },\n React.createElement(_uxcore.Icon, { name: 'xiazai' }),\n 'medium'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '10px' }, size: 'large' },\n React.createElement(_uxcore.Icon, { name: 'xiazai' }),\n 'large'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '10px' }, type: 'primary' },\n React.createElement(_uxcore.Icon, { name: 'xiazai' }),\n 'primary'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '10px' }, type: 'secondary' },\n React.createElement(_uxcore.Icon, { name: 'xiazai' }),\n 'secondary'\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginRight: '10px' }, type: 'outline' },\n React.createElement(_uxcore.Icon, { name: 'xiazai' }),\n 'outline'\n )\n), document.getElementById('components-button-demo-icon'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Icon } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">10px</span>' }} <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"small\"</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /&gt;</span>small<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">10px</span>' }} <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"medium\"</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /&gt;</span>medium<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">10px</span>' }} <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"large\"</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /&gt;</span>large<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">10px</span>' }} <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /&gt;</span>primary<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">10px</span>' }} <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /&gt;</span>secondary<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginRight:</span> '<span class=\"hljs-attribute\">10px</span>' }} <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /&gt;</span>outline<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n, document.getElementById('components-button-demo-icon'));</span></code></pre></div>"},"status":"public","toc":""}]

不同类型的按钮。

import { Button } from 'uxcore';

ReactDOM.render(
  <div style={{background:'rgba(31, 56, 88, 0.4)', padding: '16px'}}>
    <Button type="primary">primary</Button>&nbsp;
    <Button type="secondary">secondary</Button>&nbsp;
    <Button type="outline">outline</Button>&nbsp;
    <Button ghost type="white">white</Button>&nbsp;
    <Button type="text">text</Button>&nbsp;
  </div>
  , document.getElementById('components-button-demo-type'));

不同尺寸的按钮。

import { Button } from 'uxcore';

ReactDOM.render(
  <div>
    <Button size="small">small</Button>&nbsp;
    <Button size="middle">middle</Button>&nbsp;
    <Button size="large">large</Button>
  </div>
, document.getElementById('components-button-demo-size'));

用于页面内的影响较大的操作,一般配合二次确认使用。

import { Button } from 'uxcore';

ReactDOM.render(
  <div>
    <Button danger type="primary">primary</Button>&nbsp;
    <Button danger type="secondary">secondary</Button>&nbsp;
    <Button danger type="outline">outline</Button>
  </div>
  , document.getElementById('components-button-demo-danger'));

背景变为透明,常用在有色背景上。

import { Button } from 'uxcore';

ReactDOM.render(
  <div style={{ background: 'rgba(31, 56, 88, 0.4)' }}>
    <div
      style={{
        margin: '10px 0',
        padding: '10px 0',
      }}
    >
      <div>
        <Button style={{ marginLeft: '12px' }} ghost type="secondary">secondary</Button>
        <Button style={{ marginLeft: '12px' }} ghost type="outline">outline</Button>
        <Button style={{ marginLeft: '12px' }} ghost type="white">white</Button>
        <Button style={{ marginLeft: '12px' }} ghost danger type="secondary">danger</Button>
      </div>
      <div style={{ marginTop: 12 }}>
        <Button style={{ marginLeft: '12px' }} ghost disabled type="secondary">secondary disabled</Button>
        <Button style={{ marginLeft: '12px' }} ghost disabled type="outline">outline disabled</Button>
        <Button style={{ marginLeft: '12px' }} ghost type="white" disabled>white disabled</Button>
        <Button style={{ marginLeft: '12px' }} ghost danger disabled type="secondary">danger</Button>
      </div>
    </div>
  </div>
, document.getElementById('components-button-demo-ghost'));

倒计时

import { Button } from 'uxcore';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      agreeDisabled: true
    };
  }

  render() {
    return (
      <Button
        size="middle"
        disabled={this.state.agreeDisabled}
        countDown={10}
        onCountDownEnd={() => {
          this.setState({
            agreeDisabled: false,
          });
        }}
      >同意</Button>
    )
  }
}

ReactDOM.render(<Demo />, document.getElementById('components-button-demo-countdown'));

加载的状态

import { Button } from 'uxcore';

ReactDOM.render(
  <div>
    <Button style={{ marginRight: '12px' }} loading size="small">small</Button>
    <Button style={{ marginRight: '12px' }} loading size="medium">medium</Button>
    <Button style={{ marginRight: '12px' }} loading size="large">large</Button>
    <Button style={{ marginRight: '12px' }} loading type="primary">primary</Button>
    <Button style={{ marginRight: '12px' }} loading type="secondary">secondary</Button>
    <Button style={{ marginRight: '12px' }} loading type="outline">outline</Button>
  </div>
, document.getElementById('components-button-demo-loading'));
import { Button } from 'uxcore';

ReactDOM.render(
  <Button disabled>disabled</Button>
, document.getElementById('components-button-demo-status'));
import { Button } from 'uxcore';
import { Icon } from 'uxcore';

ReactDOM.render(
  <div>
    <Button style={{ marginRight: '10px' }} size="small"><Icon name="xiazai" />small</Button>
    <Button style={{ marginRight: '10px' }} size="medium"><Icon name="xiazai" />medium</Button>
    <Button style={{ marginRight: '10px' }} size="large"><Icon name="xiazai" />large</Button>
    <Button style={{ marginRight: '10px' }} type="primary"><Icon name="xiazai" />primary</Button>
    <Button style={{ marginRight: '10px' }} type="secondary"><Icon name="xiazai" />secondary</Button>
    <Button style={{ marginRight: '10px' }} type="outline"><Icon name="xiazai" />outline</Button>
  </div>
, document.getElementById('components-button-demo-icon'));

props

参数 说明 类型 默认值
size 按钮大小(large medium or middle small) string medium
type 类型(primary secondary outline white text) string blue
disabled 是否禁用(disabledtrue false) string false
className 增加额外的class string ''
ghost 是否显示为幽灵按钮 bool false
danger 是否显示为危险按钮 bool false
htmlType html dom 的 type 属性(submit button reset) string button
style style 属性 object
loading loading状态, loading 为 true 时不会触发 onClick 动作 bool false
countDown 按钮倒计时功能,单位为秒(s),倒计时结束之后会触发onCountDownEnd回调函数 number undefined
onCountDownEnd 倒计时结束之后的回调函数 function noop