uxcore.js - React UI Component Set

组件演示

[{"title":"按钮类型","id":"components-button-demo-type","tags":[],"filepath":"site/components/button/demo/type.md","directory":"components/button/demo","filename":"type","meta":{"title":"按钮类型","description":"\n不同类型的按钮。\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\">import { Button } from 'uxcore';\n\nReactDOM.render(\n <div style={{background:'rgba(31, 56, 88, 0.4)', padding: '16px'}}>\n <Button type=\"primary\">primary</Button>&nbsp;\n <Button type=\"secondary\">secondary</Button>&nbsp;\n <Button type=\"outline\">outline</Button>&nbsp;\n <Button ghost type=\"white\">white</Button>&nbsp;\n <Button type=\"text\">text</Button>&nbsp;\n </div>\n , document.getElementById('components-button-demo-type'));</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不同尺寸的按钮。\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\">import { Button } from 'uxcore';\n\nReactDOM.render(\n <div>\n <Button size=\"small\">small</Button>&nbsp;\n <Button size=\"middle\">middle</Button>&nbsp;\n <Button size=\"large\">large</Button>\n </div>\n, document.getElementById('components-button-demo-size'));</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用于页面内的影响较大的操作，一般配合二次确认使用。\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\">import { Button } from 'uxcore';\n\nReactDOM.render(\n <div>\n <Button danger type=\"primary\">primary</Button>&nbsp;\n <Button danger type=\"secondary\">secondary</Button>&nbsp;\n <Button danger type=\"outline\">outline</Button>\n </div>\n , document.getElementById('components-button-demo-danger'));</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背景变为透明，常用在有色背景上。\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\">import { Button } from 'uxcore';\n\nReactDOM.render(\n <div style={{ background: 'rgba(31, 56, 88, 0.4)' }}>\n <div\n style={{\n margin: '10px 0',\n padding: '10px 0',\n }}\n >\n <div>\n <Button style={{ marginLeft: '12px' }} ghost type=\"secondary\">secondary</Button>\n <Button style={{ marginLeft: '12px' }} ghost type=\"outline\">outline</Button>\n <Button style={{ marginLeft: '12px' }} ghost type=\"white\">white</Button>\n <Button style={{ marginLeft: '12px' }} ghost danger type=\"secondary\">danger</Button>\n </div>\n <div style={{ marginTop: 12 }}>\n <Button style={{ marginLeft: '12px' }} ghost disabled type=\"secondary\">secondary disabled</Button>\n <Button style={{ marginLeft: '12px' }} ghost disabled type=\"outline\">outline disabled</Button>\n <Button style={{ marginLeft: '12px' }} ghost type=\"white\" disabled>white disabled</Button>\n <Button style={{ marginLeft: '12px' }} ghost danger disabled type=\"secondary\">danger</Button>\n </div>\n </div>\n </div>\n, document.getElementById('components-button-demo-ghost'));</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倒计时\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\">import { Button } from 'uxcore';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n agreeDisabled: true\n };\n }\n\n render() {\n return (\n <Button\n size=\"middle\"\n disabled={this.state.agreeDisabled}\n countDown={10}\n onCountDownEnd={() => {\n this.setState({\n agreeDisabled: false,\n });\n }}\n >同意</Button>\n )\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-button-demo-countdown'));</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加载的状态\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\">import { Button } from 'uxcore';\n\nReactDOM.render(\n <div>\n <Button style={{ marginRight: '12px' }} loading size=\"small\">small</Button>\n <Button style={{ marginRight: '12px' }} loading size=\"medium\">medium</Button>\n <Button style={{ marginRight: '12px' }} loading size=\"large\">large</Button>\n <Button style={{ marginRight: '12px' }} loading type=\"primary\">primary</Button>\n <Button style={{ marginRight: '12px' }} loading type=\"secondary\">secondary</Button>\n <Button style={{ marginRight: '12px' }} loading type=\"outline\">outline</Button>\n </div>\n, document.getElementById('components-button-demo-loading'));</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\">import { Button } from 'uxcore';\n\nReactDOM.render(\n <Button disabled>disabled</Button>\n, document.getElementById('components-button-demo-status'));</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\">import { Button } from 'uxcore';\nimport { Icon } from 'uxcore';\n\nReactDOM.render(\n <div>\n <Button style={{ marginRight: '10px' }} size=\"small\"><Icon name=\"xiazai\" />small</Button>\n <Button style={{ marginRight: '10px' }} size=\"medium\"><Icon name=\"xiazai\" />medium</Button>\n <Button style={{ marginRight: '10px' }} size=\"large\"><Icon name=\"xiazai\" />large</Button>\n <Button style={{ marginRight: '10px' }} type=\"primary\"><Icon name=\"xiazai\" />primary</Button>\n <Button style={{ marginRight: '10px' }} type=\"secondary\"><Icon name=\"xiazai\" />secondary</Button>\n <Button style={{ marginRight: '10px' }} type=\"outline\"><Icon name=\"xiazai\" />outline</Button>\n </div>\n, document.getElementById('components-button-demo-icon'));</code></pre></div>"},"status":"public","toc":""}]

按钮类型

不同类型的按钮。

import { Button } from 'uxcore';

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

不同尺寸

不同尺寸的按钮。

import { Button } from 'uxcore';

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

警示按钮

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

import { Button } from 'uxcore';

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

幽灵按钮

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

import { Button } from 'uxcore';

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

倒计时按钮

倒计时

import { Button } from 'uxcore';

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

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

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

加载态

加载的状态

import { Button } from 'uxcore';

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

禁用状态

import { Button } from 'uxcore';

ReactDOM.render(
  <Button disabled>disabled</Button>
, document.getElementById('components-button-demo-status'));

图标按钮

import { Button } from 'uxcore';
import { Icon } from 'uxcore';

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

props

参数	说明	类型	默认值
size	按钮大小(`large` `medium or middle` `small`)	string	medium
type	类型(`primary` `secondary` `outline` `white` `text`)	string	blue
disabled	是否禁用(`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