uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-badge-demo-basic","tags":[],"filepath":"site/components/badge/demo/basic.md","directory":"components/badge/demo","filename":"basic","meta":{"title":"基本使用","description":"\n","order":"0","filepath":"site/components/badge/demo/basic.md","filename":"basic","directory":"components/badge/demo","id":"components-badge-demo-basic","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 return _this;\n }\n\n _createClass(Demo, [{\n key: \"render\",\n value: function render() {\n return React.createElement(\n _uxcore.Badge,\n { count: 5 },\n React.createElement(\"a\", { href: \"#\", className: \"head-example\" })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-badge-demo-basic'));\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Badge } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <Badge count={5}>\n <a href=\"#\" className=\"head-example\" />\n </Badge>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-badge-demo-basic'));\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.head-example {\n width: 50px;\n height: 50px;\n border-radius: 3px;\n display: inline-block;\n background: #e8e8e8;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.head-example {\n width: 50px;\n height: 50px;\n border-radius: 3px;\n display: inline-block;\n background: #e8e8e8;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"小点","id":"components-badge-demo-point","tags":[],"filepath":"site/components/badge/demo/point.md","directory":"components/badge/demo","filename":"point","meta":{"title":"小点","description":"\n","order":"1","filepath":"site/components/badge/demo/point.md","filename":"point","directory":"components/badge/demo","id":"components-badge-demo-point","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 return _this;\n }\n\n _createClass(Demo, [{\n key: \"render\",\n value: function render() {\n return React.createElement(\n _uxcore.Badge,\n { dot: true },\n React.createElement(\"a\", { href: \"#\", className: \"head-example\" })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-badge-demo-point'));\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Badge } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <Badge dot>\n <a href=\"#\" className=\"head-example\" />\n </Badge>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-badge-demo-point'));\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.head-example {\n width: 50px;\n height: 50px;\n border-radius: 3px;\n display: inline-block;\n background: #e8e8e8;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.head-example {\n width: 50px;\n height: 50px;\n border-radius: 3px;\n display: inline-block;\n background: #e8e8e8;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"文字","id":"components-badge-demo-text","tags":[],"filepath":"site/components/badge/demo/text.md","directory":"components/badge/demo","filename":"text","meta":{"title":"文字","description":"\n","order":"2","filepath":"site/components/badge/demo/text.md","filename":"text","directory":"components/badge/demo","id":"components-badge-demo-text","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 return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n _uxcore.Badge,\n { text: 'NEW' },\n React.createElement('a', { href: '#', className: 'head-example' })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-badge-demo-text'));\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Badge } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <Badge text={'NEW'}>\n <a href=\"#\" className=\"head-example\" />\n </Badge>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-badge-demo-text'));\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.head-example {\n width: 50px;\n height: 50px;\n border-radius: 3px;\n display: inline-block;\n background: #e8e8e8;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.head-example {\n width: 50px;\n height: 50px;\n border-radius: 3px;\n display: inline-block;\n background: #e8e8e8;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"显示/隐藏","id":"components-badge-demo-show","tags":[],"filepath":"site/components/badge/demo/show.md","directory":"components/badge/demo","filename":"show","meta":{"title":"显示/隐藏","description":"\n","order":"3","filepath":"site/components/badge/demo/show.md","filename":"show","directory":"components/badge/demo","id":"components-badge-demo-show","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 show: true,\n count: 5\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleShow',\n value: function handleShow() {\n this.setState({\n show: !this.state.show\n });\n this.setState({\n count: this.state.count == 5 ? 0 : 5\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Badge,\n { count: this.state.count },\n React.createElement('a', { href: '#', className: 'head-example' })\n ),\n React.createElement('div', { style: {\n display: 'inline-block',\n width: 20,\n height: 20\n }\n }),\n React.createElement(\n _uxcore.Badge,\n { dot: this.state.show },\n React.createElement('a', { href: '#', className: 'head-example' })\n ),\n React.createElement(\n _uxcore.Button,\n { style: { marginLeft: 20 }, type: 'outline', onClick: this.handleShow.bind(this) },\n '\\u663E\\u793A/\\u9690\\u85CF'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-badge-demo-show'));\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Badge } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n show: true,\n count: 5,\n };\n }\n\n handleShow() {\n this.setState({\n show: !this.state.show,\n });\n this.setState({\n count: this.state.count == 5 ? 0 : 5,\n });\n }\n\n render() {\n return (\n <div>\n <Badge count={this.state.count}>\n <a href=\"#\" className=\"head-example\" />\n </Badge>\n <div style={{\n display: 'inline-block',\n width: 20,\n height: 20,\n }}\n />\n <Badge dot={this.state.show}>\n <a href=\"#\" className=\"head-example\" />\n </Badge>\n <Button style={{ marginLeft: 20 }} type=\"outline\" onClick={this.handleShow.bind(this)}>显示/隐藏</Button>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-badge-demo-show'));\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.head-example {\n width: 50px;\n height: 50px;\n border-radius: 3px;\n display: inline-block;\n background: #e8e8e8;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.head-example {\n width: 50px;\n height: 50px;\n border-radius: 3px;\n display: inline-block;\n background: #e8e8e8;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"数字增减","id":"components-badge-demo-numberplus","tags":[],"filepath":"site/components/badge/demo/numberplus.md","directory":"components/badge/demo","filename":"numberplus","meta":{"title":"数字增减","description":"\n","order":"4","filepath":"site/components/badge/demo/numberplus.md","filename":"numberplus","directory":"components/badge/demo","id":"components-badge-demo-numberplus","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 count2: 1\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handlePlus',\n value: function handlePlus() {\n this.setState({\n count2: this.state.count2 + 1\n });\n }\n }, {\n key: 'handleMinus',\n value: function handleMinus() {\n this.setState({\n count2: this.state.count2 - 1\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Badge,\n { count: this.state.count2 },\n React.createElement('a', { href: '#', className: 'head-example' })\n ),\n React.createElement(\n _uxcore.Button,\n { size: 'small', type: 'outline', onClick: this.handlePlus.bind(this), style: {\n marginRight: 10,\n marginLeft: 20\n }\n },\n '+'\n ),\n React.createElement(\n _uxcore.Button,\n { size: 'small', type: 'outline', onClick: this.handleMinus.bind(this) },\n '-'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-badge-demo-numberplus'));\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Badge } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n count2: 1,\n };\n }\n\n handlePlus() {\n this.setState({\n count2: this.state.count2 + 1,\n });\n }\n\n handleMinus() {\n this.setState({\n count2: this.state.count2 - 1,\n });\n }\n\n render() {\n return (\n <div>\n <Badge count={this.state.count2}>\n <a href=\"#\" className=\"head-example\" />\n </Badge>\n <Button size=\"small\" type=\"outline\" onClick={this.handlePlus.bind(this)} style={{\n marginRight: 10,\n marginLeft: 20,\n }}\n >+</Button>\n <Button size=\"small\" type=\"outline\" onClick={this.handleMinus.bind(this)}>-</Button>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-badge-demo-numberplus'));\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.head-example {\n width: 50px;\n height: 50px;\n border-radius: 3px;\n display: inline-block;\n background: #e8e8e8;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.head-example {\n width: 50px;\n height: 50px;\n border-radius: 3px;\n display: inline-block;\n background: #e8e8e8;\n}</code></pre></div>"},"status":"public","toc":""}]

基本使用

import { Badge } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <Badge count={5}>
        <a href="#" className="head-example" />
      </Badge>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-badge-demo-basic'));
/* JS END CSS START*/

.head-example {
    width: 50px;
    height: 50px;
    border-radius: 3px;
    display: inline-block;
    background: #e8e8e8;
}

小点

import { Badge } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <Badge dot>
        <a href="#" className="head-example" />
      </Badge>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-badge-demo-point'));
/* JS END CSS START*/

.head-example {
    width: 50px;
    height: 50px;
    border-radius: 3px;
    display: inline-block;
    background: #e8e8e8;
}

文字

import { Badge } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <Badge text={'NEW'}>
        <a href="#" className="head-example" />
      </Badge>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-badge-demo-text'));
/* JS END CSS START*/

.head-example {
    width: 50px;
    height: 50px;
    border-radius: 3px;
    display: inline-block;
    background: #e8e8e8;
}

显示/隐藏

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

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      show: true,
      count: 5,
    };
  }

  handleShow() {
    this.setState({
      show: !this.state.show,
    });
    this.setState({
      count: this.state.count == 5 ? 0 : 5,
    });
  }

  render() {
    return (
      <div>
        <Badge count={this.state.count}>
          <a href="#" className="head-example" />
        </Badge>
        <div style={{
          display: 'inline-block',
          width: 20,
          height: 20,
        }}
        />
        <Badge dot={this.state.show}>
          <a href="#" className="head-example" />
        </Badge>
        <Button style={{ marginLeft: 20 }} type="outline" onClick={this.handleShow.bind(this)}>显示/隐藏</Button>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-badge-demo-show'));
/* JS END CSS START*/

.head-example {
    width: 50px;
    height: 50px;
    border-radius: 3px;
    display: inline-block;
    background: #e8e8e8;
}

数字增减

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

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      count2: 1,
    };
  }

  handlePlus() {
    this.setState({
      count2: this.state.count2 + 1,
    });
  }

  handleMinus() {
    this.setState({
      count2: this.state.count2 - 1,
    });
  }

  render() {
    return (
      <div>
        <Badge count={this.state.count2}>
          <a href="#" className="head-example" />
        </Badge>
        <Button size="small" type="outline" onClick={this.handlePlus.bind(this)} style={{
          marginRight: 10,
          marginLeft: 20,
        }}
        >+</Button>
        <Button size="small" type="outline" onClick={this.handleMinus.bind(this)}>-</Button>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-badge-demo-numberplus'));
/* JS END CSS START*/

.head-example {
    width: 50px;
    height: 50px;
    border-radius: 3px;
    display: inline-block;
    background: #e8e8e8;
}

Props

配置项	类型	必填	默认值	功能/备注
prefixCls	string	optional	kuma-badge	类名前缀，不想使用 kuma 主题时使用
className	string	optional	-	额外类名
count	number	optional	-	展示的数字，大于 overflowCount 时显示为 overflowCount+，为 0 时隐藏
overflowCount	number	optional	99	展示封顶的数字值
dot	boolean	optional	false	不展示数字，只有一个小红点
text	string	optional	""	展示的文字