Button

uxcore-button 0.4.15Changelog

组件演示

[{"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 Button = require('uxcore-button');\n\nReactDOM.render(React.createElement(\n \"div\",\n null,\n React.createElement(\n Button,\n { type: \"primary\" },\n \"primary\"\n ),\n \"\\xA0\",\n React.createElement(\n Button,\n { type: \"secondary\" },\n \"secondary\"\n ),\n \"\\xA0\",\n React.createElement(\n 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\">const</span> Button = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-button'</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 Button = require('uxcore-button');\n\nReactDOM.render(React.createElement(\n \"div\",\n null,\n React.createElement(\n Button,\n { size: \"small\" },\n \"small\"\n ),\n \"\\xA0\",\n React.createElement(\n Button,\n { size: \"medium\" },\n \"medium\"\n ),\n \"\\xA0\",\n React.createElement(\n 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\">const</span> Button = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-button'</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-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 Button = require('uxcore-button');\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 Button,\n { style: { marginLeft: '12px' }, ghost: true, type: 'secondary' },\n 'secondary'\n ),\n React.createElement(\n Button,\n { style: { marginLeft: '12px' }, ghost: true, type: 'outline' },\n 'outline'\n ),\n React.createElement(\n Button,\n { style: { marginLeft: '12px' }, ghost: true, type: 'white' },\n 'white'\n ),\n React.createElement(\n Button,\n { style: { marginLeft: '12px' }, ghost: true, disabled: true, type: 'secondary' },\n 'secondary disabled'\n ),\n React.createElement(\n Button,\n { style: { marginLeft: '12px' }, ghost: true, disabled: true, type: 'outline' },\n 'outline disabled'\n ),\n React.createElement(\n Button,\n { style: { marginLeft: '12px' }, ghost: true, type: 'white', disabled: true },\n 'white disabled'\n )\n )\n), document.getElementById('components-button-demo-ghost'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">const</span> Button = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-button'</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\">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\">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\">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 Button = require('uxcore-button');\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n React.createElement(\n Button,\n { style: { marginRight: '12px' }, loading: true, size: 'small' },\n 'small'\n ),\n React.createElement(\n Button,\n { style: { marginRight: '12px' }, loading: true, size: 'medium' },\n 'medium'\n ),\n React.createElement(\n Button,\n { style: { marginRight: '12px' }, loading: true, size: 'large' },\n 'large'\n ),\n React.createElement(\n Button,\n { style: { marginRight: '12px' }, loading: true, type: 'primary' },\n 'primary'\n ),\n React.createElement(\n Button,\n { style: { marginRight: '12px' }, loading: true, type: 'secondary' },\n 'secondary'\n ),\n React.createElement(\n 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\">const</span> Button = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-button'</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 Button = require('uxcore-button');\n\nReactDOM.render(React.createElement(\n 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\">const</span> Button = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-button'</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 Button = require('uxcore-button');\nvar Icon = require('uxcore-icon');\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n React.createElement(\n Button,\n { style: { marginRight: '10px' }, size: 'small' },\n React.createElement(Icon, { name: 'xiazai' }),\n 'small'\n ),\n React.createElement(\n Button,\n { style: { marginRight: '10px' }, size: 'medium' },\n React.createElement(Icon, { name: 'xiazai' }),\n 'medium'\n ),\n React.createElement(\n Button,\n { style: { marginRight: '10px' }, size: 'large' },\n React.createElement(Icon, { name: 'xiazai' }),\n 'large'\n ),\n React.createElement(\n Button,\n { style: { marginRight: '10px' }, type: 'primary' },\n React.createElement(Icon, { name: 'xiazai' }),\n 'primary'\n ),\n React.createElement(\n Button,\n { style: { marginRight: '10px' }, type: 'secondary' },\n React.createElement(Icon, { name: 'xiazai' }),\n 'secondary'\n ),\n React.createElement(\n Button,\n { style: { marginRight: '10px' }, type: 'outline' },\n React.createElement(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\">const</span> Button = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-button'</span>);\n<span class=\"hljs-keyword\">const</span> Icon = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-icon'</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":""}]

不同类型的按钮。

const Button = require('uxcore-button');

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'));

不同尺寸的按钮。

const Button = require('uxcore-button');

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'));

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

const Button = require('uxcore-button');

ReactDOM.render(
  <div style={{ background: 'rgba(31, 56, 88, 0.4)' }}>
    <div
      style={{
        margin: '10px 0',
        padding: '10px 0',
      }}
    >
      <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 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>
    </div>
  </div>
, document.getElementById('components-button-demo-ghost'));

加载的状态

const Button = require('uxcore-button');

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'));
const Button = require('uxcore-button');

ReactDOM.render(
  <Button disabled>disabled</Button>
, document.getElementById('components-button-demo-status'));
const Button = require('uxcore-button');
const Icon = require('uxcore-icon');

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'));

Usage

import Button from 'uxcore-button';
React.render(<div>
  <div>
    <span>{'default:'}</span>
    <Button>Confirm</Button>
  </div>
  <div>
    <span>{'size:'}</span>
    <Button size="small">small</Button>
    <Button size="medium">medium</Button>
    <Button size="large">large</Button>
  </div>
  <div>
    <span>{'status:'}</span>
    <Button disabled>disabled</Button>
  </div>
  <div>
    <span>{'type:'}</span>
    <Button type="primary">default primary</Button>
    <Button type="secondary">secondary</Button>
  </div>
  <div>
    <span>{'add event:'}</span>
    <Button onClick={function () { alert('click me'); }}>click me</Button>
  </div>
  <div>
    <h2>button group:</h2>
    <ButtonGroup>
      <Button>Left</Button>
      <Button>Middle</Button>
      <Button>Right</Button>
    </ButtonGroup>
  </div>
</div>, document.getElementById('target'));

API

props

参数 说明 类型 默认值
size 按钮大小(large medium small) string medium
type 类型(primary secondary outline) string blue
disabled 是否禁用(disabledtrue false) string false
className 增加额外的class string ''