Button

vincent.bianuxcore-button 0.4.14Changelog

组件演示

[{"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\">var</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\">var</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-loading","tags":[],"filepath":"site/components/button/demo/loading.md","directory":"components/button/demo","filename":"loading","meta":{"title":"加载态","description":"\n<p>加载的状态</p>\n","order":"3","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\">var</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":"4","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\">var</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":"5","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\">var</span> Button = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'uxcore-button'</span>);\n<span class=\"hljs-keyword\">var</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":""}]

不同类型的按钮。

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

不同尺寸的按钮。

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

加载的状态

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

ReactDOM.render(
  <Button disabled>disabled</Button>
, document.getElementById('components-button-demo-status'));
var Button = require('uxcore-button');
var 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 ''