组件演示

[{"title":"悬浮弹出","id":"components-popover-demo-hover","tags":[],"filepath":"site/components/popover/demo/hover.md","directory":"components/popover/demo","filename":"hover","meta":{"title":"悬浮弹出","description":"\n<p>悬浮弹出。</p>\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\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Popover } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">HoverDemo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> overlay = (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demoContent\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">span</span>&gt;</span>这是一个气泡弹窗<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>)</span>;\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> <span class=\"hljs-attribute\">150</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> <span class=\"hljs-attribute\">78</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"topLeft\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'上左'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>上左<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"top\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'上边'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> <span class=\"hljs-attribute\">10</span> }}&gt;</span>上边<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"topRight\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'上右'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> <span class=\"hljs-attribute\">10</span> }}&gt;</span>上右<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">78</span>, <span class=\"hljs-attribute\">float:</span> '<span class=\"hljs-attribute\">left</span>' }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"leftTop\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'左上'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>左上<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"left\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'左边'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginTop:</span> <span class=\"hljs-attribute\">5</span> }}&gt;</span>左边<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"leftBottom\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'左下'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginTop:</span> <span class=\"hljs-attribute\">5</span> }}&gt;</span>左下<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">78</span>, <span class=\"hljs-attribute\">marginLeft:</span> <span class=\"hljs-attribute\">310</span> }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"rightTop\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'右上'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span> &gt;</span>右上<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"right\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'右边'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginTop:</span> <span class=\"hljs-attribute\">5</span> }}&gt;</span>右边<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"rightBottom\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'右下'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginTop:</span> <span class=\"hljs-attribute\">5</span> }}&gt;</span>右下<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> <span class=\"hljs-attribute\">78</span>, <span class=\"hljs-attribute\">clear:</span> '<span class=\"hljs-attribute\">both</span>' }}&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"bottomLeft\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'下左'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span>&gt;</span>下左<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"bottom\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'下边'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> <span class=\"hljs-attribute\">10</span> }}&gt;</span>下边<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"bottomRight\"</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">{'下右'}</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"outline\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> <span class=\"hljs-attribute\">10</span> }}&gt;</span>下右<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">HoverDemo</span> /&gt;</span>,\n document.getElementById('components-popover-demo-hover')\n);</span></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<p>点击弹出。</p>\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\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Popover } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">HoverDemo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> overlay = <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">span</span>&gt;</span>这是一个气泡弹窗<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span>;</span>\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">\"这是标题,可以隐藏\"</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"top\"</span> <span class=\"hljs-attribute\">trigger</span>=<span class=\"hljs-value\">\"click\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>点击弹出<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">HoverDemo</span> /&gt;</span>,\n document.getElementById('components-popover-demo-click')\n);</span></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<p>有时你可能希望气泡内有确定取消的按钮可以关闭气泡,这个例子对应这种场景。</p>\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\"><span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Popover } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">HoverDemo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n handleOk() {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">'ok'</span>);\n }\n\n handleCancel() {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">'cancel'</span>);\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">const</span> overlay = <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginBottom:</span> '<span class=\"hljs-attribute\">20px</span>' }}&gt;</span><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">span</span>&gt;</span>目标删除后将不可恢复,如有子目标将会删除!<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span><span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>;</span>\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Popover</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">\"您确定要删除该目标吗?\"</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">{overlay}</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"top\"</span> <span class=\"hljs-attribute\">trigger</span>=<span class=\"hljs-value\">\"click\"</span> <span class=\"hljs-attribute\">showButton</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span>&gt;</span>点击弹出<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Popover</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">HoverDemo</span> /&gt;</span>,\n document.getElementById('components-popover-demo-button')\n);</span></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表示弹窗是否展开