uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-alert-demo-basic","tags":[],"filepath":"site/components/alert/demo/basic.md","directory":"components/alert/demo","filename":"basic","meta":{"title":"基本使用","description":"\n默认的提醒样式。\n","order":"0","filepath":"site/components/alert/demo/basic.md","filename":"basic","directory":"components/alert/demo","id":"components-alert-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 'div',\n null,\n React.createElement(_uxcore.Alert, { className: 'alert1', message: ' 这是一个 message', type: 'message' }),\n React.createElement(_uxcore.Alert, { message: ' 这是一个 success', type: 'success' }),\n React.createElement(_uxcore.Alert, { message: ' 这是一个 warning', type: 'warning' }),\n React.createElement(_uxcore.Alert, { message: ' 这是一个 error', type: 'error' })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-alert-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Alert } from 'uxcore';\nimport { Button } 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 <div>\n <Alert className=\"alert1\" message={' 这是一个 message'} type=\"message\" />\n <Alert message={' 这是一个 success'} type=\"success\" />\n <Alert message={' 这是一个 warning'} type=\"warning\" />\n <Alert message={' 这是一个 error'} type=\"error\" />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-alert-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"带有外部容器","id":"components-alert-demo-container","tags":[],"filepath":"site/components/alert/demo/container.md","directory":"components/alert/demo","filename":"container","meta":{"title":"带有外部容器","description":"\n","order":"1","filepath":"site/components/alert/demo/container.md","filename":"container","directory":"components/alert/demo","id":"components-alert-demo-container","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 'div',\n null,\n React.createElement(_uxcore.Alert, { className: 'alert1', message: ' 这是一个 message', type: 'message', hasContainer: true }),\n React.createElement(_uxcore.Alert, { message: ' 这是一个 success', type: 'success', hasContainer: true }),\n React.createElement(_uxcore.Alert, { message: ' 这是一个 warning', type: 'warning', hasContainer: true }),\n React.createElement(_uxcore.Alert, { message: ' 这是一个 error', type: 'error', hasContainer: true })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-alert-demo-container'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Alert } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n render() {\n return (\n <div>\n <Alert className=\"alert1\" message={' 这是一个 message'} type=\"message\" hasContainer />\n <Alert message={' 这是一个 success'} type=\"success\" hasContainer />\n <Alert message={' 这是一个 warning'} type=\"warning\" hasContainer />\n <Alert message={' 这是一个 error'} type=\"error\" hasContainer />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-alert-demo-container'));\n\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">\n.kuma-alert-container {\n margin-bottom: 10px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">\n.kuma-alert-container {\n margin-bottom: 10px;\n}</code></pre></div>"},"status":"public","toc":""},{"title":"可关闭","id":"components-alert-demo-closable","tags":[],"filepath":"site/components/alert/demo/closable.md","directory":"components/alert/demo","filename":"closable","meta":{"title":"可关闭","description":"\n","order":"2","filepath":"site/components/alert/demo/closable.md","filename":"closable","directory":"components/alert/demo","id":"components-alert-demo-closable","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: 'handleShow',\n value: function handleShow() {\n this.refs.alert.toggleShow();\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(_uxcore.Alert, { ref: 'alert', message: ' 这是一个 message', type: 'message', closable: true }),\n React.createElement(\n _uxcore.Button,\n { onClick: this.handleShow.bind(this) },\n '\\u624B\\u52A8\\u5207\\u6362\\u662F\\u5426\\u663E\\u793A'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-alert-demo-closable'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Alert } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n handleShow() {\n this.refs.alert.toggleShow();\n }\n\n render() {\n return (\n <div>\n <Alert ref=\"alert\" message={' 这是一个 message'} type=\"message\" closable />\n <Button onClick={this.handleShow.bind(this)}>手动切换是否显示</Button>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-alert-demo-closable'));</code></pre></div>"},"status":"public","toc":""},{"title":"带链接","id":"components-alert-demo-link","tags":[],"filepath":"site/components/alert/demo/link.md","directory":"components/alert/demo","filename":"link","meta":{"title":"带链接","description":"\n","order":"3","filepath":"site/components/alert/demo/link.md","filename":"link","directory":"components/alert/demo","id":"components-alert-demo-link","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 'div',\n null,\n React.createElement(_uxcore.Alert, { message: React.createElement(\n 'span',\n null,\n ' \\u8FD9\\u662F\\u4E00\\u4E2A message ',\n React.createElement(\n 'a',\n null,\n '[\\u4E0D\\u518D\\u63D0\\u793A]'\n )\n ), type: 'message', closable: true })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-alert-demo-link'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Alert } from 'uxcore';\nimport { Button } 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 <div>\n <Alert message={<span> 这是一个 message <a>[不再提示]</a></span>} type=\"message\" closable />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-alert-demo-link'));</code></pre></div>"},"status":"public","toc":""},{"title":"带有描述性文字","id":"components-alert-demo-message","tags":[],"filepath":"site/components/alert/demo/message.md","directory":"components/alert/demo","filename":"message","meta":{"title":"带有描述性文字","description":"\n","order":"4","filepath":"site/components/alert/demo/message.md","filename":"message","directory":"components/alert/demo","id":"components-alert-demo-message","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 'div',\n null,\n React.createElement(_uxcore.Alert, { message: ' 这是一个 message', description: '\\u8FD9\\u91CC\\u662F\\u63CF\\u8FF0', type: 'message' })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-alert-demo-message'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Alert } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n render() {\n return (\n <div>\n <Alert message={' 这是一个 message'} description=\"这里是描述\" type=\"message\" />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-alert-demo-message'));</code></pre></div>"},"status":"public","toc":""}]

基本使用

默认的提醒样式。


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

class Demo extends React.Component {

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

  render() {
    return (
      <div>
        <Alert className="alert1" message={' 这是一个 message'} type="message" />
        <Alert message={' 这是一个 success'} type="success" />
        <Alert message={' 这是一个 warning'} type="warning" />
        <Alert message={' 这是一个 error'} type="error" />
      </div>
    );
  }
}

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

带有外部容器


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

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    return (
      <div>
        <Alert className="alert1" message={' 这是一个 message'} type="message" hasContainer />
        <Alert message={' 这是一个 success'} type="success" hasContainer />
        <Alert message={' 这是一个 warning'} type="warning" hasContainer />
        <Alert message={' 这是一个 error'} type="error" hasContainer />
      </div>
    );
  }
}

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

/* JS END CSS START*/


.kuma-alert-container {
    margin-bottom: 10px;
}

可关闭


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

class Demo extends React.Component {

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

  handleShow() {
    this.refs.alert.toggleShow();
  }

  render() {
    return (
      <div>
        <Alert ref="alert" message={' 这是一个 message'} type="message" closable />
        <Button onClick={this.handleShow.bind(this)}>手动切换是否显示</Button>
      </div>
    );
  }
}

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

带链接


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

class Demo extends React.Component {

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

  render() {
    return (
      <div>
        <Alert message={<span> 这是一个 message <a>[不再提示]</a></span>} type="message" closable />
      </div>
    );
  }
}

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

带有描述性文字


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

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    return (
      <div>
        <Alert message={' 这是一个 message'} description="这里是描述" type="message" />
      </div>
    );
  }
}

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

API

toggleShow: 切换 Alert 的显示状态。

Props

配置项	类型	必填	默认值	功能/备注
prefixCls	string	optional	'kuma-alert'	类名前缀，不想使用 kuma 主题时使用
iconPrefixCls	string	optional	'kuma-icon'	图标类名前缀，不想使用 kuma 主题时使用
className	string	optional	-	额外的类名
type	string	optional	'message'	警告类型，包括 message', 'error', 'warning', 'success', 'question', 'stop', 'wait'
hasContainer	bool	optional	false	是否包含外层容器
closable	bool	optional	false	是否能够关闭,此项为 true 时,将自动包含外层容器
closeText	string or react element	optional	-	将关闭图标替换成想要的文字
message	string or react element	required	-	提示文案
description	string or react element	optional	描述文字，将自动包含外层容器
onClose	function	optional	noop	在警告关闭时触发，传回 event