组件演示
[{"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\"><<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>'}}></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span>></span>primary<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>&nbsp;\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>></span>secondary<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>&nbsp;\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>></span>outline<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>&nbsp;\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">ghost</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"white\"</span>></span>white<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>&nbsp;\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"text\"</span>></span>text<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>&nbsp;\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></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\"><<span class=\"hljs-title\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"small\"</span>></span>small<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>&nbsp;\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"middle\"</span>></span>middle<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>&nbsp;\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"large\"</span>></span>large<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></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\"><<span class=\"hljs-title\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">danger</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span>></span>primary<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>&nbsp;\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">danger</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>></span>secondary<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>&nbsp;\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">danger</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>></span>outline<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></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\"><<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>)' }}></span>\n <span class=\"hljs-tag\"><<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 ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">div</span>></span>\n <span class=\"hljs-tag\"><<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>></span>secondary<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span>outline<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>white<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span>danger<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></span>\n <span class=\"hljs-tag\"><<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> }}></span>\n <span class=\"hljs-tag\"><<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>></span>secondary disabled<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span>outline disabled<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span>white disabled<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span>danger<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></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\"><<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> =></span> {\n this.setState({\n agreeDisabled: false,\n });\n }}\n >同意<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n )</span>\n }\n}\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">Demo</span> /></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\"><<span class=\"hljs-title\">div</span>></span>\n <span class=\"hljs-tag\"><<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>></span>small<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span>medium<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span>large<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span>primary<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span>secondary<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span>outline<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></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\"><<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">disabled</span>></span>disabled<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></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\"><<span class=\"hljs-title\">div</span>></span>\n <span class=\"hljs-tag\"><<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>></span><span class=\"hljs-tag\"><<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /></span>small<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span><span class=\"hljs-tag\"><<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /></span>medium<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span><span class=\"hljs-tag\"><<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /></span>large<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span><span class=\"hljs-tag\"><<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /></span>primary<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span><span class=\"hljs-tag\"><<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /></span>secondary<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"><<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>></span><span class=\"hljs-tag\"><<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiazai\"</span> /></span>outline<span class=\"hljs-tag\"></<span class=\"hljs-title\">Button</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></span>\n, document.getElementById('components-button-demo-icon'));</span></code></pre></div>"},"status":"public","toc":""}]
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
size | 按钮大小(large medium or middle small ) |
string | medium |
type | 类型(primary secondary outline white text ) |
string | blue |
disabled | 是否禁用(disabled 或 true 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 |