uxcore.js - React UI Component Set

组件演示

[{"title":"悬浮弹出","id":"components-popover-demo-hover","tags":[],"filepath":"site/components/popover/demo/hover.md","directory":"components/popover/demo","filename":"hover","meta":{"title":"悬浮弹出","description":"\n悬浮弹出。\n","order":"0","filepath":"site/components/popover/demo/hover.md","filename":"hover","directory":"components/popover/demo","id":"components-popover-demo-hover","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 HoverDemo = function (_React$Component) {\n _inherits(HoverDemo, _React$Component);\n\n function HoverDemo(props) {\n _classCallCheck(this, HoverDemo);\n\n var _this = _possibleConstructorReturn(this, (HoverDemo.__proto__ || Object.getPrototypeOf(HoverDemo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(HoverDemo, [{\n key: 'render',\n value: function render() {\n var overlay = React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n { className: 'demoContent' },\n React.createElement(\n 'span',\n null,\n '\\u8FD9\\u662F\\u4E00\\u4E2A\\u6C14\\u6CE1\\u5F39\\u7A97'\n )\n )\n );\n return React.createElement(\n 'div',\n { style: { marginLeft: 150 } },\n React.createElement(\n 'div',\n { style: { marginLeft: 78 } },\n React.createElement(\n _uxcore.Popover,\n { placement: 'topLeft', title: '上左', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n '\\u4E0A\\u5DE6'\n )\n ),\n React.createElement(\n _uxcore.Popover,\n { placement: 'top', title: '上边', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline', style: { marginLeft: 10 } },\n '\\u4E0A\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Popover,\n { placement: 'topRight', title: '上右', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline', style: { marginLeft: 10 } },\n '\\u4E0A\\u53F3'\n )\n )\n ),\n React.createElement(\n 'div',\n { style: { width: 78, float: 'left' } },\n React.createElement(\n _uxcore.Popover,\n { placement: 'leftTop', title: '左上', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n '\\u5DE6\\u4E0A'\n )\n ),\n React.createElement(\n _uxcore.Popover,\n { placement: 'left', title: '左边', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline', style: { marginTop: 5 } },\n '\\u5DE6\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Popover,\n { placement: 'leftBottom', title: '左下', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline', style: { marginTop: 5 } },\n '\\u5DE6\\u4E0B'\n )\n )\n ),\n React.createElement(\n 'div',\n { style: { width: 78, marginLeft: 310 } },\n React.createElement(\n _uxcore.Popover,\n { placement: 'rightTop', title: '右上', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n '\\u53F3\\u4E0A'\n )\n ),\n React.createElement(\n _uxcore.Popover,\n { placement: 'right', title: '右边', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline', style: { marginTop: 5 } },\n '\\u53F3\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Popover,\n { placement: 'rightBottom', title: '右下', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline', style: { marginTop: 5 } },\n '\\u53F3\\u4E0B'\n )\n )\n ),\n React.createElement(\n 'div',\n { style: { marginLeft: 78, clear: 'both' } },\n React.createElement(\n _uxcore.Popover,\n { placement: 'bottomLeft', title: '下左', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline' },\n '\\u4E0B\\u5DE6'\n )\n ),\n React.createElement(\n _uxcore.Popover,\n { placement: 'bottom', title: '下边', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline', style: { marginLeft: 10 } },\n '\\u4E0B\\u8FB9'\n )\n ),\n React.createElement(\n _uxcore.Popover,\n { placement: 'bottomRight', title: '下右', overlay: overlay },\n React.createElement(\n _uxcore.Button,\n { type: 'outline', style: { marginLeft: 10 } },\n '\\u4E0B\\u53F3'\n )\n )\n )\n );\n }\n }]);\n\n return HoverDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(HoverDemo, null), document.getElementById('components-popover-demo-hover'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { Popover } from 'uxcore';\n\nclass HoverDemo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n const overlay = (<div>\n <div className=\"demoContent\">\n <span>这是一个气泡弹窗</span>\n </div>\n </div>);\n return (\n <div style={{ marginLeft: 150 }}>\n <div style={{ marginLeft: 78 }}>\n <Popover placement=\"topLeft\" title={'上左'} overlay={overlay}>\n <Button type=\"outline\">上左</Button>\n </Popover>\n <Popover placement=\"top\" title={'上边'} overlay={overlay}>\n <Button type=\"outline\" style={{ marginLeft: 10 }}>上边</Button>\n </Popover>\n <Popover placement=\"topRight\" title={'上右'} overlay={overlay}>\n <Button type=\"outline\" style={{ marginLeft: 10 }}>上右</Button>\n </Popover>\n </div>\n <div style={{ width: 78, float: 'left' }}>\n <Popover placement=\"leftTop\" title={'左上'} overlay={overlay}>\n <Button type=\"outline\">左上</Button>\n </Popover>\n <Popover placement=\"left\" title={'左边'} overlay={overlay}>\n <Button type=\"outline\" style={{ marginTop: 5 }}>左边</Button>\n </Popover>\n <Popover placement=\"leftBottom\" title={'左下'} overlay={overlay}>\n <Button type=\"outline\" style={{ marginTop: 5 }}>左下</Button>\n </Popover>\n </div>\n <div style={{ width: 78, marginLeft: 310 }}>\n <Popover placement=\"rightTop\" title={'右上'} overlay={overlay}>\n <Button type=\"outline\" >右上</Button>\n </Popover>\n <Popover placement=\"right\" title={'右边'} overlay={overlay}>\n <Button type=\"outline\" style={{ marginTop: 5 }}>右边</Button>\n </Popover>\n <Popover placement=\"rightBottom\" title={'右下'} overlay={overlay}>\n <Button type=\"outline\" style={{ marginTop: 5 }}>右下</Button>\n </Popover>\n </div>\n <div style={{ marginLeft: 78, clear: 'both' }}>\n <Popover placement=\"bottomLeft\" title={'下左'} overlay={overlay}>\n <Button type=\"outline\">下左</Button>\n </Popover>\n <Popover placement=\"bottom\" title={'下边'} overlay={overlay}>\n <Button type=\"outline\" style={{ marginLeft: 10 }}>下边</Button>\n </Popover>\n <Popover placement=\"bottomRight\" title={'下右'} overlay={overlay}>\n <Button type=\"outline\" style={{ marginLeft: 10 }}>下右</Button>\n </Popover>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <HoverDemo />,\n document.getElementById('components-popover-demo-hover')\n);</code></pre></div><style type=\"text/css\"></style><div class=\"highlight\"><pre><code class=\"css\"></code></pre></div>"},"status":"public","toc":""},{"title":"点击弹出","id":"components-popover-demo-click","tags":[],"filepath":"site/components/popover/demo/click.md","directory":"components/popover/demo","filename":"click","meta":{"title":"点击弹出","description":"\n点击弹出。\n","order":"1","filepath":"site/components/popover/demo/click.md","filename":"click","directory":"components/popover/demo","id":"components-popover-demo-click","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 HoverDemo = function (_React$Component) {\n _inherits(HoverDemo, _React$Component);\n\n function HoverDemo(props) {\n _classCallCheck(this, HoverDemo);\n\n var _this = _possibleConstructorReturn(this, (HoverDemo.__proto__ || Object.getPrototypeOf(HoverDemo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(HoverDemo, [{\n key: 'render',\n value: function render() {\n var overlay = React.createElement(\n 'span',\n null,\n '\\u8FD9\\u662F\\u4E00\\u4E2A\\u6C14\\u6CE1\\u5F39\\u7A97'\n );\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Popover,\n { title: '\\u8FD9\\u662F\\u6807\\u9898\\uFF0C\\u53EF\\u4EE5\\u9690\\u85CF', overlay: overlay, placement: 'top', trigger: 'click' },\n React.createElement(\n _uxcore.Button,\n null,\n '\\u70B9\\u51FB\\u5F39\\u51FA'\n )\n )\n );\n }\n }]);\n\n return HoverDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(HoverDemo, null), document.getElementById('components-popover-demo-click'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { Popover } from 'uxcore';\n\nclass HoverDemo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n const overlay = <span>这是一个气泡弹窗</span>;\n return (\n <div>\n <Popover title=\"这是标题，可以隐藏\" overlay={overlay} placement=\"top\" trigger=\"click\">\n <Button>点击弹出</Button>\n </Popover>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <HoverDemo />,\n document.getElementById('components-popover-demo-click')\n);</code></pre></div>"},"status":"public","toc":""},{"title":"内置按钮","id":"components-popover-demo-button","tags":[],"filepath":"site/components/popover/demo/button.md","directory":"components/popover/demo","filename":"button","meta":{"title":"内置按钮","description":"\n有时你可能希望气泡内有确定取消的按钮可以关闭气泡，这个例子对应这种场景。\n","order":"2","filepath":"site/components/popover/demo/button.md","filename":"button","directory":"components/popover/demo","id":"components-popover-demo-button","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 HoverDemo = function (_React$Component) {\n _inherits(HoverDemo, _React$Component);\n\n function HoverDemo(props) {\n _classCallCheck(this, HoverDemo);\n\n var _this = _possibleConstructorReturn(this, (HoverDemo.__proto__ || Object.getPrototypeOf(HoverDemo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(HoverDemo, [{\n key: 'handleOk',\n value: function handleOk() {\n console.log('ok');\n }\n }, {\n key: 'handleCancel',\n value: function handleCancel() {\n console.log('cancel');\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n var overlay = React.createElement(\n 'div',\n { style: { marginBottom: '20px' } },\n React.createElement(\n 'span',\n null,\n '\\u76EE\\u6807\\u5220\\u9664\\u540E\\u5C06\\u4E0D\\u53EF\\u6062\\u590D\\uFF0C\\u5982\\u6709\\u5B50\\u76EE\\u6807\\u5C06\\u4F1A\\u5220\\u9664\\uFF01'\n )\n );\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Popover,\n { title: '\\u60A8\\u786E\\u5B9A\\u8981\\u5220\\u9664\\u8BE5\\u76EE\\u6807\\u5417\\uFF1F', overlay: overlay, placement: 'top', trigger: 'click', showButton: true },\n React.createElement(\n _uxcore.Button,\n null,\n '\\u70B9\\u51FB\\u5F39\\u51FA'\n )\n )\n );\n }\n }]);\n\n return HoverDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(HoverDemo, null), document.getElementById('components-popover-demo-button'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Button } from 'uxcore';\nimport { Popover } from 'uxcore';\n\nclass HoverDemo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n handleOk() {\n console.log('ok');\n }\n\n handleCancel() {\n console.log('cancel');\n }\n\n render() {\n const me = this;\n const overlay = <div style={{ marginBottom: '20px' }}><span>目标删除后将不可恢复，如有子目标将会删除！</span></div>;\n return (\n <div>\n <Popover title=\"您确定要删除该目标吗？\" overlay={overlay} placement=\"top\" trigger=\"click\" showButton>\n <Button>点击弹出</Button>\n </Popover>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <HoverDemo />,\n document.getElementById('components-popover-demo-button')\n);</code></pre></div><style type=\"text/css\"></style><div class=\"highlight\"><pre><code class=\"css\"></code></pre></div>"},"status":"public","toc":""}]

悬浮弹出

悬浮弹出。

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

class HoverDemo extends React.Component {

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

  render() {
    const overlay = (<div>
      <div className="demoContent">
        <span>这是一个气泡弹窗</span>
      </div>
    </div>);
    return (
      <div style={{ marginLeft: 150 }}>
        <div style={{ marginLeft: 78 }}>
          <Popover placement="topLeft" title={'上左'} overlay={overlay}>
            <Button type="outline">上左</Button>
          </Popover>
          <Popover placement="top" title={'上边'} overlay={overlay}>
            <Button type="outline" style={{ marginLeft: 10 }}>上边</Button>
          </Popover>
          <Popover placement="topRight" title={'上右'} overlay={overlay}>
            <Button type="outline" style={{ marginLeft: 10 }}>上右</Button>
          </Popover>
        </div>
        <div style={{ width: 78, float: 'left' }}>
          <Popover placement="leftTop" title={'左上'} overlay={overlay}>
            <Button type="outline">左上</Button>
          </Popover>
          <Popover placement="left" title={'左边'} overlay={overlay}>
            <Button type="outline" style={{ marginTop: 5 }}>左边</Button>
          </Popover>
          <Popover placement="leftBottom" title={'左下'} overlay={overlay}>
            <Button type="outline" style={{ marginTop: 5 }}>左下</Button>
          </Popover>
        </div>
        <div style={{ width: 78, marginLeft: 310 }}>
          <Popover placement="rightTop" title={'右上'} overlay={overlay}>
            <Button type="outline" >右上</Button>
          </Popover>
          <Popover placement="right" title={'右边'} overlay={overlay}>
            <Button type="outline" style={{ marginTop: 5 }}>右边</Button>
          </Popover>
          <Popover placement="rightBottom" title={'右下'} overlay={overlay}>
            <Button type="outline" style={{ marginTop: 5 }}>右下</Button>
          </Popover>
        </div>
        <div style={{ marginLeft: 78, clear: 'both' }}>
          <Popover placement="bottomLeft" title={'下左'} overlay={overlay}>
            <Button type="outline">下左</Button>
          </Popover>
          <Popover placement="bottom" title={'下边'} overlay={overlay}>
            <Button type="outline" style={{ marginLeft: 10 }}>下边</Button>
          </Popover>
          <Popover placement="bottomRight" title={'下右'} overlay={overlay}>
            <Button type="outline" style={{ marginLeft: 10 }}>下右</Button>
          </Popover>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <HoverDemo />,
  document.getElementById('components-popover-demo-hover')
);

点击弹出

点击弹出。

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

class HoverDemo extends React.Component {

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

  render() {
    const overlay = <span>这是一个气泡弹窗</span>;
    return (
      <div>
        <Popover title="这是标题，可以隐藏" overlay={overlay} placement="top" trigger="click">
          <Button>点击弹出</Button>
        </Popover>
      </div>
    );
  }
}

ReactDOM.render(
  <HoverDemo />,
  document.getElementById('components-popover-demo-click')
);

内置按钮

有时你可能希望气泡内有确定取消的按钮可以关闭气泡，这个例子对应这种场景。

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

class HoverDemo extends React.Component {

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

  handleOk() {
    console.log('ok');
  }

  handleCancel() {
    console.log('cancel');
  }

  render() {
    const me = this;
    const overlay = <div style={{ marginBottom: '20px' }}><span>目标删除后将不可恢复，如有子目标将会删除！</span></div>;
    return (
      <div>
        <Popover title="您确定要删除该目标吗？" overlay={overlay} placement="top" trigger="click" showButton>
          <Button>点击弹出</Button>
        </Popover>
      </div>
    );
  }
}

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

Props

配置项	类型	必填	默认值	功能/备注
overlay	string	required	-	弹窗内容
overlayClassName	string	optional	-	弹窗的额外类名
visible	boolean	optional	-	是否展开弹窗内容，如果不填则自动处理；填写则需要手动处理
title	string	optional	-	弹窗标题，不传入则没有标题栏
placement	string	optional	top	弹窗从那个方向弹出
prefixCls	string	optional	kuma-popup	类名前缀，用于定制化
trigger	string	optional	hover	触发弹窗的方式，有 hover 和 click 两种
showButton	boolean	optional	false	是否显示内置按钮
onOk	function(hideCallback)	optional	noop	内置的确定按钮的回调，当想要关闭 popover 时需调用 hideCallback
onCancel	function	optional	noop	内置的取消按钮的回调
okText	string	optional	"确定"	内置的确定按钮显示的文案
cancelText	string	optional	"取消"	内置的取消按钮显示的文案
onVisibleChange	function(isDisplay)	optional	noop	显示状态发生改变的回调，isDisplay表示弹窗是否展开