uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-message-demo-basic","tags":[],"filepath":"site/components/message/demo/basic.md","directory":"components/message/demo","filename":"basic","meta":{"title":"基本使用","description":"\n默认的提醒样式。\n","order":"0","filepath":"site/components/message/demo/basic.md","filename":"basic","directory":"components/message/demo","id":"components-message-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: 'handleClick',\n value: function handleClick(type) {\n _uxcore.Message[type]('\\u8FD9\\u662F\\u4E00\\u4E2A ' + type, 1.5);\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n 'div',\n { className: 'demo1' },\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(me, 'success') },\n '\\u663E\\u793A\\u6210\\u529F\\u63D0\\u793A'\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(me, 'info') },\n '\\u663E\\u793A\\u666E\\u901A\\u63D0\\u793A'\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(me, 'error') },\n '\\u663E\\u793A\\u9519\\u8BEF\\u63D0\\u793A'\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(me, 'loading') },\n '\\u663E\\u793A\\u52A0\\u8F7D\\u63D0\\u793A'\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(me, 'nw_loading') },\n '\\u663E\\u793A\\u4F01\\u4E1A\\u667A\\u80FD\\u4E8B\\u4E1A\\u90E8\\u52A0\\u8F7D\\u63D0\\u793A'\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(me, 'mask_loading') },\n '\\u663E\\u793A\\u5E26\\u906E\\u7F69\\u52A0\\u8F7D\\u63D0\\u793A'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-message-demo-basic'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Message } 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 handleClick(type) {\n Message[type](`这是一个 ${type}`, 1.5);\n }\n\n render() {\n const me = this;\n return (\n <div className=\"demo1\">\n <Button onClick={me.handleClick.bind(me, 'success')}>显示成功提示</Button>\n <Button onClick={me.handleClick.bind(me, 'info')}>显示普通提示</Button>\n <Button onClick={me.handleClick.bind(me, 'error')}>显示错误提示</Button>\n <Button onClick={me.handleClick.bind(me, 'loading')}>显示加载提示</Button>\n <Button onClick={me.handleClick.bind(me, 'nw_loading')}>显示企业智能事业部加载提示</Button>\n <Button onClick={me.handleClick.bind(me, 'mask_loading')}>显示带遮罩加载提示</Button>\n </div>\n );\n }\n}\nReactDOM.render(\n <Demo />\n, document.getElementById('components-message-demo-basic'));\n\n/* JS END CSS START*/\n</code></pre></div><style type=\"text/css\">.demo1 .kuma-button + .kuma-button {\n margin-left: 20px\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo1 .kuma-button + .kuma-button {\n margin-left: 20px\n}</code></pre></div>"},"status":"public","toc":""},{"title":"消失时间","id":"components-message-demo-duration","tags":[],"filepath":"site/components/message/demo/duration.md","directory":"components/message/demo","filename":"duration","meta":{"title":"消失时间","description":"\n可以设置每个 Message 的自动消失时间。\n","order":"1","filepath":"site/components/message/demo/duration.md","filename":"duration","directory":"components/message/demo","id":"components-message-demo-duration","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: 'handleClick',\n value: function handleClick(type) {\n _uxcore.Message[type]('\\u8FD9\\u662F\\u4E00\\u4E2A ' + type, 10); // 设定 10s 后消失\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n 'div',\n { className: 'demo1' },\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(me, 'success') },\n '\\u663E\\u793A\\u6210\\u529F\\u63D0\\u793A'\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(me, 'info') },\n '\\u663E\\u793A\\u666E\\u901A\\u63D0\\u793A'\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(me, 'error') },\n '\\u663E\\u793A\\u9519\\u8BEF\\u63D0\\u793A'\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: me.handleClick.bind(me, 'loading') },\n '\\u663E\\u793A\\u52A0\\u8F7D\\u63D0\\u793A'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-message-demo-duration'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Message } 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 handleClick(type) {\n Message[type](`这是一个 ${type}`, 10); // 设定 10s 后消失\n }\n\n render() {\n const me = this;\n return (\n <div className=\"demo1\">\n <Button onClick={me.handleClick.bind(me, 'success')}>显示成功提示</Button>\n <Button onClick={me.handleClick.bind(me, 'info')}>显示普通提示</Button>\n <Button onClick={me.handleClick.bind(me, 'error')}>显示错误提示</Button>\n <Button onClick={me.handleClick.bind(me, 'loading')}>显示加载提示</Button>\n </div>\n );\n }\n}\nReactDOM.render(\n <Demo />\n, document.getElementById('components-message-demo-duration'));\n\n/* JS END CSS START*/\n</code></pre></div><style type=\"text/css\">.demo1 .kuma-button + .kuma-button {\n margin-left: 20px\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo1 .kuma-button + .kuma-button {\n margin-left: 20px\n}</code></pre></div>"},"status":"public","toc":""},{"title":"小尺寸","id":"components-message-demo-small","tags":[],"filepath":"site/components/message/demo/small.md","directory":"components/message/demo","filename":"small","meta":{"title":"小尺寸","description":"\n小尺寸的提示。\n","order":"2","filepath":"site/components/message/demo/small.md","filename":"small","directory":"components/message/demo","id":"components-message-demo-small","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 handleClick = function handleClick(type) {\n _uxcore.Message[type]({\n content: '\\u8FD9\\u662F\\u4E00\\u4E2A ' + type,\n className: 'kuma-message-small'\n });\n};\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'demo1' },\n React.createElement(\n _uxcore.Button,\n { onClick: function onClick() {\n handleClick('success');\n } },\n '\\u663E\\u793A\\u6210\\u529F\\u63D0\\u793A'\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: function onClick() {\n handleClick('info');\n } },\n '\\u663E\\u793A\\u666E\\u901A\\u63D0\\u793A'\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: function onClick() {\n handleClick('error');\n } },\n '\\u663E\\u793A\\u9519\\u8BEF\\u63D0\\u793A'\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: function onClick() {\n handleClick('loading');\n } },\n '\\u663E\\u793A\\u52A0\\u8F7D\\u63D0\\u793A'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-message-demo-small'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Message } from 'uxcore';\nimport { Button } from 'uxcore';\n\nconst handleClick = (type) => {\n Message[type]({\n content: `这是一个 ${type}`,\n className: 'kuma-message-small',\n });\n};\n\nclass Demo extends React.Component {\n render() {\n return (\n <div className=\"demo1\">\n <Button onClick={() => { handleClick('success'); }}>显示成功提示</Button>\n <Button onClick={() => { handleClick('info'); }}>显示普通提示</Button>\n <Button onClick={() => { handleClick('error'); }}>显示错误提示</Button>\n <Button onClick={() => { handleClick('loading'); }}>显示加载提示</Button>\n </div>\n );\n }\n}\nReactDOM.render(\n <Demo />\n, document.getElementById('components-message-demo-small'));\n\n/* JS END CSS START*/\n</code></pre></div><style type=\"text/css\">.demo1 .kuma-button + .kuma-button {\n margin-left: 20px\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo1 .kuma-button + .kuma-button {\n margin-left: 20px\n}</code></pre></div>"},"status":"public","toc":""}]

基本使用

默认的提醒样式。


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

class Demo extends React.Component {

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

  handleClick(type) {
    Message[type](`这是一个 ${type}`, 1.5);
  }

  render() {
    const me = this;
    return (
      <div className="demo1">
        <Button onClick={me.handleClick.bind(me, 'success')}>显示成功提示</Button>
        <Button onClick={me.handleClick.bind(me, 'info')}>显示普通提示</Button>
        <Button onClick={me.handleClick.bind(me, 'error')}>显示错误提示</Button>
        <Button onClick={me.handleClick.bind(me, 'loading')}>显示加载提示</Button>
        <Button onClick={me.handleClick.bind(me, 'nw_loading')}>显示企业智能事业部加载提示</Button>
        <Button onClick={me.handleClick.bind(me, 'mask_loading')}>显示带遮罩加载提示</Button>
      </div>
    );
  }
}
ReactDOM.render(
  <Demo />
, document.getElementById('components-message-demo-basic'));

/* JS END CSS START*/

.demo1 .kuma-button + .kuma-button {
    margin-left: 20px
}

消失时间

可以设置每个 Message 的自动消失时间。


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

class Demo extends React.Component {

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

  handleClick(type) {
    Message[type](`这是一个 ${type}`, 10); // 设定 10s 后消失
  }

  render() {
    const me = this;
    return (
      <div className="demo1">
        <Button onClick={me.handleClick.bind(me, 'success')}>显示成功提示</Button>
        <Button onClick={me.handleClick.bind(me, 'info')}>显示普通提示</Button>
        <Button onClick={me.handleClick.bind(me, 'error')}>显示错误提示</Button>
        <Button onClick={me.handleClick.bind(me, 'loading')}>显示加载提示</Button>
      </div>
    );
  }
}
ReactDOM.render(
  <Demo />
, document.getElementById('components-message-demo-duration'));

/* JS END CSS START*/

.demo1 .kuma-button + .kuma-button {
    margin-left: 20px
}

小尺寸

小尺寸的提示。


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

const handleClick = (type) => {
  Message[type]({
    content: `这是一个 ${type}`,
    className: 'kuma-message-small',
  });
};

class Demo extends React.Component {
  render() {
    return (
      <div className="demo1">
        <Button onClick={() => { handleClick('success'); }}>显示成功提示</Button>
        <Button onClick={() => { handleClick('info'); }}>显示普通提示</Button>
        <Button onClick={() => { handleClick('error'); }}>显示错误提示</Button>
        <Button onClick={() => { handleClick('loading'); }}>显示加载提示</Button>
      </div>
    );
  }
}
ReactDOM.render(
  <Demo />
, document.getElementById('components-message-demo-small'));

/* JS END CSS START*/

.demo1 .kuma-button + .kuma-button {
    margin-left: 20px
}

API

Message.success(content, duration, onClose)
Message.error(content, duration, onClose)
Message.info(content, duration, onClose)
Message.loading(content, duration, onClose)
Message.mask_loading(content, duration, onClose) // 带遮罩全局的 loading，防止重复点击提交，duration=0代表不会消失，必须使用Message.clear()清除
Message.clear() // 清除所有的 message。

也可以这样进行传参

Message.success({
    content: 'xxx',
    duration: 1.5,
    onClose: () => {}
})

参数	类型	必填	默认值	功能/备注
content	React.Element or String	required	-	提示的内容
duration	Number	optional	1.5	多长(秒)时间消失
getContainer	function	optional	-	为 message 指定要渲染的容器

另外提供了一个全局方法用于配置

Message.config({
  multipleInstance: true,  // 是否允许同时展示多个 message, 默认为 true
    className: 'xxx',  // 在 uxcore-kuma 样式基础上定制时使用
    prefixCls: 'xxx',  // 类名前缀，不想使用 uxcore-kuma 样式时使用
})