组件演示

[{"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 null,\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), 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>&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>\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: \"medium\" },\n \"medium\"\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\">\"medium\"</span>&gt;</span>medium<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-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>
    <Button type="primary">primary</Button>&nbsp;
    <Button type="secondary">secondary</Button>&nbsp;
    <Button type="outline">outline</Button>
  </div>
  , document.getElementById('components-button-demo-type'));

不同尺寸的按钮。

import { Button } from 'uxcore';

ReactDOM.render(
  <div>
    <Button size="small">small</Button>&nbsp;
    <Button size="medium">medium</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';

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 small) string medium
type 类型(primary secondary outline) string blue
disabled 是否禁用(disabledtrue false) string false
className 增加额外的class string ''