@uiw/doc 4.21.0 → 4.21.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/web/CONTRIBUTORS.svg +7 -7
- package/web/asset-manifest.json +11 -11
- package/web/index.html +1 -1
- package/web/static/js/1892.1bd435f7.chunk.js +2 -0
- package/web/static/js/1892.1bd435f7.chunk.js.map +1 -0
- package/web/static/js/3811.350251de.chunk.js +2 -0
- package/web/static/js/3811.350251de.chunk.js.map +1 -0
- package/web/static/js/5183.ac2ca737.js.LICENSE.txt +1 -1
- package/web/static/js/5183.ac2ca737.js.map +1 -1
- package/web/static/js/6536.6fa44339.chunk.js +2 -0
- package/web/static/js/6536.6fa44339.chunk.js.map +1 -0
- package/web/static/js/782.7562ce30.chunk.js +3 -0
- package/web/static/js/{782.7a65d8b8.chunk.js.LICENSE.txt → 782.7562ce30.chunk.js.LICENSE.txt} +0 -0
- package/web/static/js/782.7562ce30.chunk.js.map +1 -0
- package/web/static/js/main.cd8c68cd.js +2 -0
- package/web/static/js/main.cd8c68cd.js.map +1 -0
- package/web/static/js/1892.0f341f07.chunk.js +0 -2
- package/web/static/js/1892.0f341f07.chunk.js.map +0 -1
- package/web/static/js/3811.ac38cada.chunk.js +0 -2
- package/web/static/js/3811.ac38cada.chunk.js.map +0 -1
- package/web/static/js/6536.d87822b3.chunk.js +0 -2
- package/web/static/js/6536.d87822b3.chunk.js.map +0 -1
- package/web/static/js/782.7a65d8b8.chunk.js +0 -3
- package/web/static/js/782.7a65d8b8.chunk.js.map +0 -1
- package/web/static/js/main.77985803.js +0 -2
- package/web/static/js/main.77985803.js.map +0 -1
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1892],{61892:function(t,s,i){i.r(s),s.default="\u793e\u533a\u7cbe\u9009\u7ec4\u4ef6\n===\n\n\u4e0b\u9762\u662f\u4e00\u4e9b\u57fa\u4e8e React \u5b9e\u73b0\u7684\u4f18\u79c0\u7ec4\u4ef6\uff0c\u4e0e [`uiw`](https://github.com/uiwjs/uiw) \u4e92\u8865\u3002\n\n> \u60a8\u8fd8\u53ef\u4ee5\u4ece\u8fd9\u91cc\u627e\u5230\u66f4\u591a\u7684\u7ec4\u4ef6 [`Awesome React Components`](https://github.com/brillout/awesome-react-components)\u3002\n\n\u7c7b\u578b | \u63a8\u8350\u7ec4\u4ef6\n----|--------\n\u8def\u7531 | [](https://github.com/ReactTraining/react-router) [](https://github.com/reach/router) [](https://github.com/frontarm/navi)\n\u5e03\u5c40 | [](https://github.com/rebassjs/grid) [](https://github.com/whoisandy/react-blocks) [](https://github.com/roylee0704/react-flexbox-grid)\n\u62d6\u62fd | [](https://github.com/atlassian/react-beautiful-dnd) [](https://github.com/gaearon/react-dnd) [](https://github.com/mzabriskie/react-draggable) [](https://github.com/clauderic/react-sortable-hoc)\n\u4ee3\u7801\u7f16\u8f91\u5668 | [](https://github.com/uiwjs/react-codemirror) [](https://github.com/jaywcjlove/react-monacoeditor)\n\u5bcc\u6587\u672c\u7f16\u8f91\u5668 | [](https://github.com/facebook/draft-js) [](https://github.com/zenoamaro/react-quill) [](https://github.com/jpuri/react-draft-wysiwyg) [](https://github.com/leejaen/react-lz-editor) [](https://github.com/margox/braft-editor) [](https://github.com/ProseMirror/prosemirror) [](https://github.com/ckeditor/ckeditor5) [](https://github.com/codex-team/editor.js)\n\u62fe\u8272\u5668 | [](https://github.com/casesandberg/react-color) [](https://github.com/omgovich/react-colorful) [](https://github.com/uiwjs/react-color)\n\u54cd\u5e94\u5f0f | [](https://github.com/contra/react-responsive) [](https://github.com/ReactTraining/react-media)\n\u590d\u5236\u5230\u526a\u8d34\u677f | [](https://github.com/nkbt/react-copy-to-clipboard)\n\u9875\u9762 meta \u5c5e\u6027 | [](https://github.com/nfl/react-helmet) [](https://github.com/gaearon/react-document-title)\n\u65e5\u5386 | [](https://github.com/gpbl/react-day-picker)\n\u65f6\u95f4 | [](https://github.com/xx45/dayjs) [](https://github.com/date-fns/date-fns) [](https://github.com/sbstjn/timesheet.js) [](https://github.com/moment/luxon) [](https://github.com/hustcc/timeago.js) [](https://github.com/moment/moment-timezone) [](https://github.com/moment/moment) [](https://github.com/zeit/ms)\n\u83dc\u5355 | [](https://github.com/vkbansal/react-contextmenu)\n\u8868\u5355\u9a8c\u8bc1 | [](https://github.com/chriso/validator.js) [](https://github.com/rickharrison/validate.js)\n\u56fe\u6807 | [](https://github.com/uiwjs/icons) [](https://github.com/gorangajic/react-icons)\n\u4e0a\u4f20 | [](https://github.com/transloadit/uppy) [](https://github.com/pqina/filepond)\n\u4e8c\u7ef4\u7801 | [](https://github.com/zpao/qrcode.react) [](https://github.com/CPunisher/react-qrbtf)\n\u53ef\u89c6\u5316\u56fe\u8868 | [](https://github.com/alibaba/BizCharts) [](https://github.com/frappe/charts) [](https://github.com/uber/react-vis) [](https://github.com/antvis/g2-react) [](https://github.com/antvis/g2) [](https://github.com/recharts/recharts/) [](https://github.com/FormidableLabs/victory)\n\u53ef\u89c6\u5316\u56fe\u7f16\u8f91\u5668 | [](https://github.com/gaoli/GGEditor)\n\u9876\u90e8\u8fdb\u5ea6\u6761 | [](https://github.com/rstacruz/nprogress)\n\u5e94\u7528\u56fd\u9645\u5316 | [](https://github.com/yahoo/react-intl)\n\u4ee3\u7801\u9ad8\u4eae | [](https://github.com/react-syntax-highlighter/react-syntax-highlighter) [](https://github.com/uiwjs/react-prismjs)\nMarkdown \u6e32\u67d3 | [](https://github.com/probablyup/markdown-to-jsx) [](https://github.com/rexxars/react-markdown)\n\u65e0\u9650\u6eda\u52a8\u8868\u683c | [](https://github.com/bvaughn/react-virtualized)\n\u5730\u56fe | [](https://github.com/tomchentw/react-google-maps) [](https://github.com/istarkov/google-map-react) [](https://github.com/ElemeFE/react-amap)\nEmoji | [](https://github.com/missive/emoji-mart)\n\u53f3\u952e\u83dc\u5355 | [](https://github.com/vkbansal/react-contextmenu/) [](https://github.com/fkhadra/react-contexify)\n\u63d0\u793a | [](https://github.com/atomiks/tippyjs) [](https://github.com/FezVrasta/popper.js)\n\u5feb\u6377\u952e | [](https://github.com/jaywcjlove/hotkeys) [](https://github.com/jaywcjlove/react-hotkeys)\n\u5206\u5272\u9762\u677f | [](https://github.com/tomkp/react-split-pane)\n\u56fe\u7247\u88c1\u5207 | [](https://github.com/DominicTobias/react-image-crop)\n\u8d8b\u52bf\u7ebf | [](https://github.com/borisyankov/react-sparklines)\n\u5173\u952e\u5b57\u9ad8\u4eae | [](https://github.com/bvaughn/react-highlight-words)\n\u52a8\u753b | [](https://github.com/react-tools/react-move) [](https://github.com/react-spring/react-spring) [](https://github.com/animatedjs/animated) [](https://github.com/chenglou/react-motion)\n\u5176\u5b83 | [](https://github.com/danilowoz/react-content-loader) [](https://github.com/s-yadav/react-number-format)\n"}}]);
|
|
2
|
-
//# sourceMappingURL=1892.0f341f07.chunk.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/1892.0f341f07.chunk.js","mappings":"gHAAA","sources":["routes/guide/recommendation/README.md"],"sourcesContent":["export default \"社区精选组件\\n===\\n\\n下面是一些基于 React 实现的优秀组件，与 [`uiw`](https://github.com/uiwjs/uiw) 互补。\\n\\n> 您还可以从这里找到更多的组件 [`Awesome React Components`](https://github.com/brillout/awesome-react-components)。\\n\\n类型 | 推荐组件\\n----|--------\\n路由 | [](https://github.com/ReactTraining/react-router) [](https://github.com/reach/router) [](https://github.com/frontarm/navi)\\n布局 | [](https://github.com/rebassjs/grid) [](https://github.com/whoisandy/react-blocks) [](https://github.com/roylee0704/react-flexbox-grid)\\n拖拽 | [](https://github.com/atlassian/react-beautiful-dnd) [](https://github.com/gaearon/react-dnd) [](https://github.com/mzabriskie/react-draggable) [](https://github.com/clauderic/react-sortable-hoc)\\n代码编辑器 | [](https://github.com/uiwjs/react-codemirror) [](https://github.com/jaywcjlove/react-monacoeditor)\\n富文本编辑器 | [](https://github.com/facebook/draft-js) [](https://github.com/zenoamaro/react-quill) [](https://github.com/jpuri/react-draft-wysiwyg) [](https://github.com/leejaen/react-lz-editor) [](https://github.com/margox/braft-editor) [](https://github.com/ProseMirror/prosemirror) [](https://github.com/ckeditor/ckeditor5) [](https://github.com/codex-team/editor.js)\\n拾色器 | [](https://github.com/casesandberg/react-color) [](https://github.com/omgovich/react-colorful) [](https://github.com/uiwjs/react-color)\\n响应式 | [](https://github.com/contra/react-responsive) [](https://github.com/ReactTraining/react-media)\\n复制到剪贴板 | [](https://github.com/nkbt/react-copy-to-clipboard)\\n页面 meta 属性 | [](https://github.com/nfl/react-helmet) [](https://github.com/gaearon/react-document-title)\\n日历 | [](https://github.com/gpbl/react-day-picker)\\n时间 | [](https://github.com/xx45/dayjs) [](https://github.com/date-fns/date-fns) [](https://github.com/sbstjn/timesheet.js) [](https://github.com/moment/luxon) [](https://github.com/hustcc/timeago.js) [](https://github.com/moment/moment-timezone) [](https://github.com/moment/moment) [](https://github.com/zeit/ms)\\n菜单 | [](https://github.com/vkbansal/react-contextmenu)\\n表单验证 | [](https://github.com/chriso/validator.js) [](https://github.com/rickharrison/validate.js)\\n图标 | [](https://github.com/uiwjs/icons) [](https://github.com/gorangajic/react-icons)\\n上传 | [](https://github.com/transloadit/uppy) [](https://github.com/pqina/filepond)\\n二维码 | [](https://github.com/zpao/qrcode.react) [](https://github.com/CPunisher/react-qrbtf)\\n可视化图表 | [](https://github.com/alibaba/BizCharts) [](https://github.com/frappe/charts) [](https://github.com/uber/react-vis) [](https://github.com/antvis/g2-react) [](https://github.com/antvis/g2) [](https://github.com/recharts/recharts/) [](https://github.com/FormidableLabs/victory)\\n可视化图编辑器 | [](https://github.com/gaoli/GGEditor)\\n顶部进度条 | [](https://github.com/rstacruz/nprogress)\\n应用国际化 | [](https://github.com/yahoo/react-intl)\\n代码高亮 | [](https://github.com/react-syntax-highlighter/react-syntax-highlighter) [](https://github.com/uiwjs/react-prismjs)\\nMarkdown 渲染 | [](https://github.com/probablyup/markdown-to-jsx) [](https://github.com/rexxars/react-markdown)\\n无限滚动表格 | [](https://github.com/bvaughn/react-virtualized)\\n地图 | [](https://github.com/tomchentw/react-google-maps) [](https://github.com/istarkov/google-map-react) [](https://github.com/ElemeFE/react-amap)\\nEmoji | [](https://github.com/missive/emoji-mart)\\n右键菜单 | [](https://github.com/vkbansal/react-contextmenu/) [](https://github.com/fkhadra/react-contexify)\\n提示 | [](https://github.com/atomiks/tippyjs) [](https://github.com/FezVrasta/popper.js)\\n快捷键 | [](https://github.com/jaywcjlove/hotkeys) [](https://github.com/jaywcjlove/react-hotkeys)\\n分割面板 | [](https://github.com/tomkp/react-split-pane)\\n图片裁切 | [](https://github.com/DominicTobias/react-image-crop)\\n趋势线 | [](https://github.com/borisyankov/react-sparklines)\\n关键字高亮 | [](https://github.com/bvaughn/react-highlight-words)\\n动画 | [](https://github.com/react-tools/react-move) [](https://github.com/react-spring/react-spring) [](https://github.com/animatedjs/animated) [](https://github.com/chenglou/react-motion)\\n其它 | [](https://github.com/danilowoz/react-content-loader) [](https://github.com/s-yadav/react-number-format)\\n\";"],"names":[],"sourceRoot":""}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3811],{53811:function(t,n,o){o.r(n),n.default='Tooltip \u6587\u5b57\u63d0\u793a\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tooltip/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-tooltip)\n[](https://npmjs.com/@uiw/react-tooltip)\n\n\u7b80\u5355\u7684\u6587\u5b57\u63d0\u793a\u6c14\u6ce1\u6846\u3002\n\n```jsx\nimport { Tooltip } from \'uiw\';\n// or\nimport Tooltip from \'@uiw/react-tooltip\';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\u6700\u7b80\u5355\u7684\u7528\u6cd5\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n <div>\n <Tooltip placement="right" content="\u53f3\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)</Button>\n </Tooltip>\n <Tooltip placement="top" content="\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n <Tooltip placement="left" content="\u5de6\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)</Button>\n </Tooltip>\n <Tooltip placement="bottom" content="\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a">\n <Button>\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)</Button>\n </Tooltip>\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4f4d\u7f6e\n\n\u4f4d\u7f6e\u6709 `12` \u4e2a\u65b9\u5411\uff0c\u6839\u636e `placement` \u53c2\u6570\u6765\u8bbe\u7f6e\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Tooltip, Button, Divider } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst Demo = () => (\n <div>\n <Tooltip placement="left" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u5de6\u8fb9\u6587\u5b57\u63d0\u793a(left)</Button>\n </Tooltip>\n\n <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u4e0a\u8fb9\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n\n <Tooltip placement="bottom" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u4e0b\u8fb9\u6587\u5b57\u63d0\u793a(bottom)</Button>\n </Tooltip>\n\n <Tooltip placement="right" content={<strong>Hello uiw!</strong>}>\n <Button type="primary">\u53f3\u8fb9\u6587\u5b57\u63d0\u793a(right)</Button>\n </Tooltip>\n\n <Divider />\n <div style={{ position: \'relative\' }}>\n <Tooltip placement="topLeft" content={<strong>Hello uiw!</strong>}>\n <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n </Tooltip>\n <Tooltip placement="top" content={<strong>Hello uiw!</strong>}>\n <Button style={{ ...btnStl, left: 70}}>Top</Button>\n </Tooltip>\n <Tooltip placement="topRight" content={<strong>Hello uiw!</strong>}>\n <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="leftTop" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl }}>LT</Button>\n </Tooltip>\n <Tooltip placement="rightTop" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="left" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl }}>Left</Button>\n </Tooltip>\n <Tooltip placement="right" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="leftBottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl }}>LB</Button>\n </Tooltip>\n <Tooltip placement="rightBottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n </Tooltip>\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n <Tooltip placement="bottomLeft" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n </Tooltip>\n <Tooltip placement="bottom" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n </Tooltip>\n <Tooltip placement="bottomRight" content={<span><strong>Hello uiw!</strong> \u4f4d\u7f6e\u6709 12 \u4e2a\u65b9\u5411\uff0c\u6839\u636e placement \u53c2\u6570\u6765\u8bbe\u7f6e\u3002</span>}>\n <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n </Tooltip>\n </div>\n\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4e8b\u4ef6\n\n\u6587\u5b57\u63d0\u793a\u7ec4\u4ef6 `<Tooltip />`\uff0c\u901a\u8fc7\u8bbe\u7f6e\u5c5e\u6027 `trigger` \u53ef\u4ee5\u6587\u5b57\u63d0\u793a\u64cd\u4f5c\u65b9\u5f0f\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n <div>\n\n <Tooltip trigger="hover" placement="top" content="Hello uiw!">\n <Button type="primary">\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n <Tooltip trigger="click" placement="top" content="Hello uiw!">\n <Button type="success">\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(top)</Button>\n </Tooltip>\n\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u6587\u5b57\u63d0\u793a\u6846\u4e0d\u663e\u793a\u7bad\u5934\n\n\u901a\u8fc7\u8bbe\u7f6e\u5c5e\u6027 `visibleArrow` \u53ef\u4ee5\u6587\u5b57\u63d0\u793a\u6846\u4e0d\u663e\u793a\u7bad\u5934\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Tooltip, Button } from \'uiw\';\n\nconst Demo = () => (\n <div>\n\n <Tooltip visibleArrow={false} trigger="hover" placement="top" content="Hello uiw!">\n <Button type="primary">\u60ac\u6d6e\u5f39\u51fa\u6587\u5b57\u63d0\u793a(top)</Button>\n </Tooltip>\n <Tooltip visibleArrow={false} trigger="click" placement="right" content="Hello uiw!">\n <Button type="success">\u70b9\u51fb\u5f39\u51fa\u63d0\u793a(right)</Button>\n </Tooltip>\n\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u53d7\u63a7\u7ec4\u4ef6\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Tooltip, Switch, Divider } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor() {\n super()\n this.state = {\n isOpen: false,\n }\n }\n onChange(e) {\n this.setState({ isOpen: e.target.checked });\n }\n onVisibleChange(isOpen) {\n this.setState({ isOpen });\n }\n render() {\n return (\n <div>\n <Tooltip\n isOpen={this.state.isOpen}\n onVisibleChange={this.onVisibleChange.bind(this)}\n placement="top"\n content="Hello uiw!"\n >\n <span>\u9f20\u6807\u79fb\u52a8\u5230\u6b64\u5904\uff0c\u663e\u793a\u548c\u6d88\u5931\u89e6\u53d1\u4e8b\u4ef6\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 Switch \u7ec4\u4ef6\u6765\u63a7\u5236</span>\n </Tooltip>\n <Divider />\n <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| content | \u663e\u793a\u7684\u5185\u5bb9 | String,React.ReactNode | - |\n| placement | \u6c14\u6ce1\u6846\u4f4d\u7f6e\uff0c\u53ef\u73b0\u5b9e\u7bad\u5934\u5728\u4e0d\u901a\u7684\u65b9\u4f4d | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\n| visibleArrow | \u662f\u5426\u663e\u793a Tooltip \u7bad\u5934 | Boolean | `true` |\n| delay | \u5ef6\u8fdf\u8fdb\u5165\u548c\u6d88\u5931\uff0c`{ show: 2000, hide: 4000 }` \u6216\u8005\u76f4\u63a5\u8bbe\u7f6e `2000`\uff0c\u53ea\u5bf9 `trigger=hover` \u6709\u6548\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Object/Number | - |\n| trigger | \u60ac\u505c/\u70b9\u51fb\u5f39\u51fa\u7a97\u53e3\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Enum{`hover`, `click`} | `hover` |\n| disabled | \u662f\u5426\u7981\u7528\u5f39\u51fa\u76ee\u6807 | Boolean | `false` |\n| isOpen | \u9ed8\u8ba4\u662f\u5426\u663e\u793a\u5f39\u7a97\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Boolean | `false` |\n| autoAdjustOverflow | \u5f39\u51fa\u5c42\u88ab\u906e\u6321\u65f6\u81ea\u52a8\u8c03\u6574\u4f4d\u7f6e\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Boolean | `false` |\n| onVisibleChange | \u663e\u793a\u9690\u85cf\u7684\u56de\u8c03\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Function(isVisible:bool) | - |\n\n\u66f4\u591a\u5c5e\u6027\u8bf7\u53c2\u8003 [OverlayTrigger](#/components/overlay-trigger)\u3002\n'}}]);
|
|
2
|
-
//# sourceMappingURL=3811.ac38cada.chunk.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/3811.ac38cada.chunk.js","mappings":"gHAAA","sources":["../../packages/react-tooltip/README.md"],"sourcesContent":["export default \"Tooltip 文字提示\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tooltip/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-tooltip)\\n[](https://npmjs.com/@uiw/react-tooltip)\\n\\n简单的文字提示气泡框。\\n\\n```jsx\\nimport { Tooltip } from 'uiw';\\n// or\\nimport Tooltip from '@uiw/react-tooltip';\\n```\\n\\n### 基础用法\\n\\n最简单的用法。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tooltip, Button } from 'uiw';\\n\\nconst Demo = () => (\\n <div>\\n <Tooltip placement=\\\"right\\\" content=\\\"右边文字提示\\\">\\n <Button>右边文字提示(right)</Button>\\n </Tooltip>\\n <Tooltip placement=\\\"top\\\" content=\\\"上边文字提示\\\">\\n <Button>上边文字提示(top)</Button>\\n </Tooltip>\\n <Tooltip placement=\\\"left\\\" content=\\\"左边文字提示\\\">\\n <Button>左边文字提示(left)</Button>\\n </Tooltip>\\n <Tooltip placement=\\\"bottom\\\" content=\\\"下边文字提示\\\">\\n <Button>下边文字提示(bottom)</Button>\\n </Tooltip>\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 位置\\n\\n位置有 `12` 个方向，根据 `placement` 参数来设置。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tooltip, Button, Divider } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nconst Demo = () => (\\n <div>\\n <Tooltip placement=\\\"left\\\" content={<strong>Hello uiw!</strong>}>\\n <Button type=\\\"primary\\\">左边文字提示(left)</Button>\\n </Tooltip>\\n\\n <Tooltip placement=\\\"top\\\" content={<strong>Hello uiw!</strong>}>\\n <Button type=\\\"primary\\\">上边文字提示(top)</Button>\\n </Tooltip>\\n\\n <Tooltip placement=\\\"bottom\\\" content={<strong>Hello uiw!</strong>}>\\n <Button type=\\\"primary\\\">下边文字提示(bottom)</Button>\\n </Tooltip>\\n\\n <Tooltip placement=\\\"right\\\" content={<strong>Hello uiw!</strong>}>\\n <Button type=\\\"primary\\\">右边文字提示(right)</Button>\\n </Tooltip>\\n\\n <Divider />\\n <div style={{ position: 'relative' }}>\\n <Tooltip placement=\\\"topLeft\\\" content={<strong>Hello uiw!</strong>}>\\n <Button style={{ ...btnStl, left: 70 }}>TL</Button>\\n </Tooltip>\\n <Tooltip placement=\\\"top\\\" content={<strong>Hello uiw!</strong>}>\\n <Button style={{ ...btnStl, left: 70}}>Top</Button>\\n </Tooltip>\\n <Tooltip placement=\\\"topRight\\\" content={<strong>Hello uiw!</strong>}>\\n <Button style={{ ...btnStl, left: 70 }}>TR</Button>\\n </Tooltip>\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n <Tooltip placement=\\\"leftTop\\\" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>\\n <Button style={{ ...btnStl }}>LT</Button>\\n </Tooltip>\\n <Tooltip placement=\\\"rightTop\\\" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>\\n <Button style={{ ...btnStl, left: 216 }}>RT</Button>\\n </Tooltip>\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n <Tooltip placement=\\\"left\\\" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>\\n <Button style={{ ...btnStl }}>Left</Button>\\n </Tooltip>\\n <Tooltip placement=\\\"right\\\" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>\\n <Button style={{ ...btnStl, left: 216 }}>Right</Button>\\n </Tooltip>\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n <Tooltip placement=\\\"leftBottom\\\" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>\\n <Button style={{ ...btnStl }}>LB</Button>\\n </Tooltip>\\n <Tooltip placement=\\\"rightBottom\\\" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>\\n <Button style={{ ...btnStl, left: 216 }}>RB</Button>\\n </Tooltip>\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n <Tooltip placement=\\\"bottomLeft\\\" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>\\n <Button style={{ ...btnStl, left: 70 }}>BL</Button>\\n </Tooltip>\\n <Tooltip placement=\\\"bottom\\\" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>\\n <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\\n </Tooltip>\\n <Tooltip placement=\\\"bottomRight\\\" content={<span><strong>Hello uiw!</strong> 位置有 12 个方向，根据 placement 参数来设置。</span>}>\\n <Button style={{ ...btnStl, left: 70 }}>BR</Button>\\n </Tooltip>\\n </div>\\n\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 事件\\n\\n文字提示组件 `<Tooltip />`，通过设置属性 `trigger` 可以文字提示操作方式。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tooltip, Button } from 'uiw';\\n\\nconst Demo = () => (\\n <div>\\n\\n <Tooltip trigger=\\\"hover\\\" placement=\\\"top\\\" content=\\\"Hello uiw!\\\">\\n <Button type=\\\"primary\\\">悬浮弹出文字提示(top)</Button>\\n </Tooltip>\\n <Tooltip trigger=\\\"click\\\" placement=\\\"top\\\" content=\\\"Hello uiw!\\\">\\n <Button type=\\\"success\\\">点击弹出提示(top)</Button>\\n </Tooltip>\\n\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 文字提示框不显示箭头\\n\\n通过设置属性 `visibleArrow` 可以文字提示框不显示箭头。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Tooltip, Button } from 'uiw';\\n\\nconst Demo = () => (\\n <div>\\n\\n <Tooltip visibleArrow={false} trigger=\\\"hover\\\" placement=\\\"top\\\" content=\\\"Hello uiw!\\\">\\n <Button type=\\\"primary\\\">悬浮弹出文字提示(top)</Button>\\n </Tooltip>\\n <Tooltip visibleArrow={false} trigger=\\\"click\\\" placement=\\\"right\\\" content=\\\"Hello uiw!\\\">\\n <Button type=\\\"success\\\">点击弹出提示(right)</Button>\\n </Tooltip>\\n\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 受控组件\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Tooltip, Switch, Divider } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor() {\\n super()\\n this.state = {\\n isOpen: false,\\n }\\n }\\n onChange(e) {\\n this.setState({ isOpen: e.target.checked });\\n }\\n onVisibleChange(isOpen) {\\n this.setState({ isOpen });\\n }\\n render() {\\n return (\\n <div>\\n <Tooltip\\n isOpen={this.state.isOpen}\\n onVisibleChange={this.onVisibleChange.bind(this)}\\n placement=\\\"top\\\"\\n content=\\\"Hello uiw!\\\"\\n >\\n <span>鼠标移动到此处，显示和消失触发事件，也可以通过 Switch 组件来控制</span>\\n </Tooltip>\\n <Divider />\\n <Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| content | 显示的内容 | String,React.ReactNode | - |\\n| placement | 气泡框位置，可现实箭头在不通的方位 | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\\n| visibleArrow | 是否显示 Tooltip 箭头 | Boolean | `true` |\\n| delay | 延迟进入和消失，`{ show: 2000, hide: 4000 }` 或者直接设置 `2000`，只对 `trigger=hover` 有效，继承 `<OverlayTrigger />` 组件属性 | Object/Number | - |\\n| trigger | 悬停/点击弹出窗口，继承 `<OverlayTrigger />` 组件属性 | Enum{`hover`, `click`} | `hover` |\\n| disabled | 是否禁用弹出目标 | Boolean | `false` |\\n| isOpen | 默认是否显示弹窗，继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |\\n| autoAdjustOverflow | 弹出层被遮挡时自动调整位置，继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |\\n| onVisibleChange | 显示隐藏的回调，继承 `<OverlayTrigger />` 组件属性 | Function(isVisible:bool) | - |\\n\\n更多属性请参考 [OverlayTrigger](#/components/overlay-trigger)。\\n\";"],"names":[],"sourceRoot":""}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6536],{36536:function(n,t,e){e.r(t),t.default='Popover \u6c14\u6ce1\u5361\u7247\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-popover/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-popover)\n[](https://npmjs.com/@uiw/react-popover)\n\n\u70b9\u51fb/\u9f20\u6807\u79fb\u5165\u5143\u7d20\uff0c\u5f39\u51fa\u6c14\u6ce1\u5f0f\u7684\u5361\u7247\u6d6e\u5c42\u3002\n\n```jsx\nimport { Popover } from \'uiw\';\n// or\nimport Popover from \'@uiw/react-popover\';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\u6700\u7b80\u5355\u7684\u7528\u6cd5\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Icon,Row,Col, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n isOpen: false,\n isOpen1: false,\n }\n }\n onClick(field) {\n this.setState({ [field]: false });\n }\n\n handleVisibleChange(field, isOpen) {\n this.setState({ [field]:isOpen });\n }\n render() {\n return (\n <Row style={{ alignItems: \'center\' }}>\n <Popover\n trigger="click"\n placement="top"\n isOpen={this.state.isOpen}\n onVisibleChange={this.handleVisibleChange.bind(this, \'isOpen\')}\n content={\n <Card bordered={false} title="Card\u6807\u9898" extra={<a href="#">\u66f4\u591a</a>} style={{ width: 200 }}>\n <div>Are you sure you want to delete these items? You won\'t be able to recover them.</div>\n <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>\n <Button size="small" onClick={this.onClick.bind(this, \'isOpen\')}>\n Cancel\n </Button>\n <Button type="danger" size="small" onClick={this.onClick.bind(this, \'isOpen\')}>\n Delete\n </Button>\n </div>\n </Card>\n }\n >\n <Button active={this.state.isOpen}>\u5f39\u51fa\u76ee\u6807</Button>\n </Popover>\n <div style={{ marginLeft: 20 }}>\n <Popover\n trigger="click"\n placement="top"\n isOpen={this.state.isOpen1}\n onVisibleChange={this.handleVisibleChange.bind(this, \'isOpen1\')}\n content={\n <Card bordered={false} title="Card\u6807\u9898" extra={<a href="#">\u66f4\u591a</a>} style={{ width: 200 }}>\n <div>Are you sure you want to delete these items? You won\'t be able to recover them.</div>\n <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>\n <Button size="small" onClick={this.onClick.bind(this, \'isOpen1\')}>\n Cancel\n </Button>\n <Button type="danger" size="small" onClick={this.onClick.bind(this, \'isOpen1\')}>\n Delete\n </Button>\n </div>\n </Card>\n }\n >\n <Icon type="setting" color="#343a40" style={{ fontSize: 20 }} />\n </Popover>\n </div>\n </Row>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4f4d\u7f6e\n\n\u4f4d\u7f6e\u6709 `12` \u4e2a\u65b9\u5411\uff0c\u6839\u636e `placement` \u53c2\u6570\u6765\u8bbe\u7f6e\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst content = (\n <Card bordered={false} style={{ width: 120 }}>\n <div>Are you sure you want to delete these items? You won\'t be able to recover them.</div>\n </Card>\n)\nconst Demo = () => (\n <div>\n <div style={{ position: \'relative\' }}>\n\n <Popover trigger="click" placement="topLeft" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n </Popover>\n <Popover trigger="click" placement="top" content={content}>\n <Button style={{ ...btnStl, left: 70}}>Top</Button>\n </Popover>\n <Popover trigger="click" placement="topRight" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="leftTop" content={content}>\n <Button style={{ ...btnStl }}>LT</Button>\n </Popover>\n <Popover trigger="click" placement="rightTop" content={content}>\n <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="left" content={content}>\n <Button style={{ ...btnStl }}>Left</Button>\n </Popover>\n <Popover trigger="click" placement="right" content={content}>\n <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="leftBottom" content={content}>\n <Button style={{ ...btnStl }}>LB</Button>\n </Popover>\n <Popover trigger="click" placement="rightBottom" content={content}>\n <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="bottomLeft" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n </Popover>\n <Popover trigger="click" placement="bottom" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n </Popover>\n <Popover trigger="click" placement="bottomRight" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n </Popover>\n\n </div>\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u9f20\u6807\u7ecf\u8fc7\u5f39\u51fa\u76ee\u6807\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst content = (\n <Card\n style={{ width: 220 }}\n bordered={false}\n title="Card\u6807\u9898"\n footer={\n <span>\u8fd9\u91cc\u662f\u9875\u811a</span>\n }\n >\n <div>\u8fd9\u662f\u4f60\u9f20\u6807\u7ecf\u8fc7\u5f39\u51fa\u7684\u76ee\u6807\u3002</div>\n </Card>\n)\nconst Demo = () => (\n <div>\n <Popover trigger="hover" placement="top" content={content}>\n <Button>\u9f20\u6807\u7ecf\u8fc7\u5f39\u51fa\u76ee\u6807</Button>\n </Popover>\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u7126\u70b9\u5c55\u793a\n\n\u901a\u8fc7\u8bbe\u7f6e `trigger="focus"` \u8ba9 `Input` \u7ec4\u4ef6\u5728\u83b7\u53d6\u7126\u70b9\u7684\u65f6\u5019\u5c55\u793a `Popover`\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button, Input } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n isOpen: false,\n value: \'\',\n }\n }\n onClick(val) {\n const state = { isOpen: false }\n if (val) {\n state.value = val;\n }\n if (val === null) state.value = \'\';\n this.setState({ ...state });\n }\n handleVisibleChange(isOpen) {\n this.setState({ isOpen });\n }\n onChange(e) {\n this.setState({ value: e.target.value });\n }\n renderPopup() {\n return (\n <Card\n style={{ width: 220 }}\n bordered={false}\n footer={\n <div style={{ display: "flex", justifyContent: "flex-end" }}>\n <Button size="small" onClick={this.onClick.bind(this, undefined)}>\n \u53d6\u6d88\n </Button>\n <Button size="small" onClick={this.onClick.bind(this, null)}>\n \u6e05\u7a7a\n </Button>\n <Button type="success" size="small" onClick={this.onClick.bind(this, \'\u8fd9\u662f\u5411 Input \u8f93\u5165\u6846\u63d2\u5165\u7684\u5185\u5bb9\')}>\n \u63d2\u5165\u5185\u5bb9\n </Button>\n </div>\n }\n >\n <div>\u901a\u8fc7\u8bbe\u7f6e `trigger="focus"` \u8ba9 `Input` \u7ec4\u4ef6\u5728\u83b7\u53d6\u7126\u70b9\u7684\u65f6\u5019\u5c55\u793a `Popover`</div>\n </Card>\n )\n }\n render() {\n return (\n <div>\n <div style={{ width: 200 }}>\n <Popover\n trigger="focus"\n placement="top"\n isOpen={this.state.isOpen}\n onVisibleChange={this.handleVisibleChange.bind(this)}\n content={this.renderPopup()}\n >\n <Input placeholder="\u8bf7\u8f93\u5165\u5185\u5bb9" value={this.state.value} onChange={this.onChange.bind(this)}/>\n </Popover>\n </div>\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### usePortal\n\n\u8bbe\u7f6e `usePortal={false}` \u5c06\u6a21\u6001\u5bf9\u8bdd\u6846\u751f\u6210\u5230\u6839\u8282\u70b9\u7684\u91cc\u9762\uff0c\u8fd9\u6837\u4e3a\u4e86\u8ba1\u7b97\u4f4d\u7f6e\u51c6\u786e\uff0c\u4f60\u9700\u8981\u5c06\u7236\u5c42\u6837\u5f0f\u8bbe\u4e3a `position: relative;` \u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Popover, Card, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n isOpen: false,\n }\n }\n onClick() {\n this.setState({ isOpen: false });\n }\n handleVisibleChange(isOpen) {\n this.setState({ isOpen });\n }\n render() {\n return (\n <div>\n <div style={{ position: \'relative\' }}>\n <Popover\n trigger="click"\n placement="right"\n usePortal={false}\n isOpen={this.state.isOpen}\n onVisibleChange={this.handleVisibleChange.bind(this)}\n content={\n <Card bordered={false} title="Card\u6807\u9898" extra={<a href="#">\u66f4\u591a</a>} style={{ width: 200 }}>\n <div>Are you sure you want to delete these items? You won\'t be able to recover them.</div>\n <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>\n <Button size="small" onClick={this.onClick.bind(this)}>\n Cancel\n </Button>\n <Button type="danger" size="small" onClick={this.onClick.bind(this)}>\n Delete\n </Button>\n </div>\n </Card>\n }\n >\n <Button>\u5f39\u51fa\u76ee\u6807</Button>\n </Popover>\n </div>\n </div>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### Confirm \u7528\u6cd5\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Popover, Row } from \'uiw\';\n\nclass Demo extends React.Component {\n render() {\n return (\n <Row style={{ alignItems: \'center\' }}>\n <Popover.Confirm title="Are you sure delete this?">delete</Popover.Confirm>\n </Row>\n )\n }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| content | \u663e\u793a\u7684\u5185\u5bb9 | String,React.ReactNode | - |\n| placement | \u6c14\u6ce1\u6846\u4f4d\u7f6e\uff0c\u53ef\u73b0\u5b9e\u7bad\u5934\u5728\u4e0d\u540c\u7684\u65b9\u4f4d | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\n| visibleArrow | \u662f\u5426\u663e\u793a\u7bad\u5934 | Boolean | `true` |\n| delay | \u5ef6\u8fdf\u8fdb\u5165\u548c\u6d88\u5931\uff0c`{ show: 2000, hide: 4000 }` \u6216\u8005\u76f4\u63a5\u8bbe\u7f6e `2000`\uff0c\u53ea\u5bf9 `trigger=hover` \u6709\u6548\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Object/Number | - |\n| trigger| \u60ac\u505c/\u70b9\u51fb\u5f39\u51fa\u7a97\u53e3\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Enum{`hover`, `click`, `focus`} | `hover` |\n| disabled | \u662f\u5426\u7981\u7528\u5f39\u51fa\u76ee\u6807 | Boolean | `false` |\n| isOpen | \u9ed8\u8ba4\u662f\u5426\u663e\u793a\u5f39\u7a97\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Boolean | `false` |\n| autoAdjustOverflow | \u5f39\u51fa\u5c42\u88ab\u906e\u6321\u65f6\u81ea\u52a8\u8c03\u6574\u4f4d\u7f6e\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Boolean | `false` |\n| onVisibleChange | \u663e\u793a\u9690\u85cf\u7684\u56de\u8c03\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Function(isVisible:bool) | - |\n\n## Confirm Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| trigger| \u60ac\u505c/\u70b9\u51fb\u5f39\u51fa\u7a97\u53e3\uff0c\u7ee7\u627f `<OverlayTrigger />` \u7ec4\u4ef6\u5c5e\u6027 | Enum{`hover`, `click`, `focus`} | `hover` |\n| placement | \u6c14\u6ce1\u6846\u4f4d\u7f6e\uff0c\u53ef\u73b0\u5b9e\u7bad\u5934\u5728\u4e0d\u540c\u7684\u65b9\u4f4d | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\n| visibleArrow | \u662f\u5426\u663e\u793a\u7bad\u5934 | Boolean | `true` |\n| children | \u5b50\u5143\u7d20 | React.ReactNode | - |\n| onConfirm | \u786e\u5b9a\u65b9\u6cd5 | ()=>void | |\n| confirmText | \u786e\u5b9a\u6309\u94ae\u6587\u672c | string | Yes |\n| title | \u6807\u9898\u4fe1\u606f | React.ReactNode | - |\n| cancelText | \u53d6\u6d88\u6309\u94ae\u6587\u672c | string | No |\n\n\n\u66f4\u591a\u5c5e\u6027\u8bf7\u53c2\u8003 [OverlayTrigger](#/components/overlay-trigger)\u3002\n'}}]);
|
|
2
|
-
//# sourceMappingURL=6536.d87822b3.chunk.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/6536.d87822b3.chunk.js","mappings":"gHAAA","sources":["../../packages/react-popover/README.md"],"sourcesContent":["export default \"Popover 气泡卡片\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-popover/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-popover)\\n[](https://npmjs.com/@uiw/react-popover)\\n\\n点击/鼠标移入元素，弹出气泡式的卡片浮层。\\n\\n```jsx\\nimport { Popover } from 'uiw';\\n// or\\nimport Popover from '@uiw/react-popover';\\n```\\n\\n### 基础用法\\n\\n最简单的用法。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Icon,Row,Col, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor() {\\n super();\\n this.state = {\\n isOpen: false,\\n isOpen1: false,\\n }\\n }\\n onClick(field) {\\n this.setState({ [field]: false });\\n }\\n\\n handleVisibleChange(field, isOpen) {\\n this.setState({ [field]:isOpen });\\n }\\n render() {\\n return (\\n <Row style={{ alignItems: 'center' }}>\\n <Popover\\n trigger=\\\"click\\\"\\n placement=\\\"top\\\"\\n isOpen={this.state.isOpen}\\n onVisibleChange={this.handleVisibleChange.bind(this, 'isOpen')}\\n content={\\n <Card bordered={false} title=\\\"Card标题\\\" extra={<a href=\\\"#\\\">更多</a>} style={{ width: 200 }}>\\n <div>Are you sure you want to delete these items? You won't be able to recover them.</div>\\n <div style={{ display: \\\"flex\\\", justifyContent: \\\"flex-end\\\", marginTop: 15 }}>\\n <Button size=\\\"small\\\" onClick={this.onClick.bind(this, 'isOpen')}>\\n Cancel\\n </Button>\\n <Button type=\\\"danger\\\" size=\\\"small\\\" onClick={this.onClick.bind(this, 'isOpen')}>\\n Delete\\n </Button>\\n </div>\\n </Card>\\n }\\n >\\n <Button active={this.state.isOpen}>弹出目标</Button>\\n </Popover>\\n <div style={{ marginLeft: 20 }}>\\n <Popover\\n trigger=\\\"click\\\"\\n placement=\\\"top\\\"\\n isOpen={this.state.isOpen1}\\n onVisibleChange={this.handleVisibleChange.bind(this, 'isOpen1')}\\n content={\\n <Card bordered={false} title=\\\"Card标题\\\" extra={<a href=\\\"#\\\">更多</a>} style={{ width: 200 }}>\\n <div>Are you sure you want to delete these items? You won't be able to recover them.</div>\\n <div style={{ display: \\\"flex\\\", justifyContent: \\\"flex-end\\\", marginTop: 15 }}>\\n <Button size=\\\"small\\\" onClick={this.onClick.bind(this, 'isOpen1')}>\\n Cancel\\n </Button>\\n <Button type=\\\"danger\\\" size=\\\"small\\\" onClick={this.onClick.bind(this, 'isOpen1')}>\\n Delete\\n </Button>\\n </div>\\n </Card>\\n }\\n >\\n <Icon type=\\\"setting\\\" color=\\\"#343a40\\\" style={{ fontSize: 20 }} />\\n </Popover>\\n </div>\\n </Row>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 位置\\n\\n位置有 `12` 个方向，根据 `placement` 参数来设置。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nconst content = (\\n <Card bordered={false} style={{ width: 120 }}>\\n <div>Are you sure you want to delete these items? You won't be able to recover them.</div>\\n </Card>\\n)\\nconst Demo = () => (\\n <div>\\n <div style={{ position: 'relative' }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"topLeft\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>TL</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"top\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70}}>Top</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"topRight\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>TR</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"leftTop\\\" content={content}>\\n <Button style={{ ...btnStl }}>LT</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"rightTop\\\" content={content}>\\n <Button style={{ ...btnStl, left: 216 }}>RT</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"left\\\" content={content}>\\n <Button style={{ ...btnStl }}>Left</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"right\\\" content={content}>\\n <Button style={{ ...btnStl, left: 216 }}>Right</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"leftBottom\\\" content={content}>\\n <Button style={{ ...btnStl }}>LB</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"rightBottom\\\" content={content}>\\n <Button style={{ ...btnStl, left: 216 }}>RB</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"bottomLeft\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>BL</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"bottom\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"bottomRight\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>BR</Button>\\n </Popover>\\n\\n </div>\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 鼠标经过弹出目标\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nconst content = (\\n <Card\\n style={{ width: 220 }}\\n bordered={false}\\n title=\\\"Card标题\\\"\\n footer={\\n <span>这里是页脚</span>\\n }\\n >\\n <div>这是你鼠标经过弹出的目标。</div>\\n </Card>\\n)\\nconst Demo = () => (\\n <div>\\n <Popover trigger=\\\"hover\\\" placement=\\\"top\\\" content={content}>\\n <Button>鼠标经过弹出目标</Button>\\n </Popover>\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 焦点展示\\n\\n通过设置 `trigger=\\\"focus\\\"` 让 `Input` 组件在获取焦点的时候展示 `Popover`\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button, Input } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nclass Demo extends React.Component {\\n constructor() {\\n super();\\n this.state = {\\n isOpen: false,\\n value: '',\\n }\\n }\\n onClick(val) {\\n const state = { isOpen: false }\\n if (val) {\\n state.value = val;\\n }\\n if (val === null) state.value = '';\\n this.setState({ ...state });\\n }\\n handleVisibleChange(isOpen) {\\n this.setState({ isOpen });\\n }\\n onChange(e) {\\n this.setState({ value: e.target.value });\\n }\\n renderPopup() {\\n return (\\n <Card\\n style={{ width: 220 }}\\n bordered={false}\\n footer={\\n <div style={{ display: \\\"flex\\\", justifyContent: \\\"flex-end\\\" }}>\\n <Button size=\\\"small\\\" onClick={this.onClick.bind(this, undefined)}>\\n 取消\\n </Button>\\n <Button size=\\\"small\\\" onClick={this.onClick.bind(this, null)}>\\n 清空\\n </Button>\\n <Button type=\\\"success\\\" size=\\\"small\\\" onClick={this.onClick.bind(this, '这是向 Input 输入框插入的内容')}>\\n 插入内容\\n </Button>\\n </div>\\n }\\n >\\n <div>通过设置 `trigger=\\\"focus\\\"` 让 `Input` 组件在获取焦点的时候展示 `Popover`</div>\\n </Card>\\n )\\n }\\n render() {\\n return (\\n <div>\\n <div style={{ width: 200 }}>\\n <Popover\\n trigger=\\\"focus\\\"\\n placement=\\\"top\\\"\\n isOpen={this.state.isOpen}\\n onVisibleChange={this.handleVisibleChange.bind(this)}\\n content={this.renderPopup()}\\n >\\n <Input placeholder=\\\"请输入内容\\\" value={this.state.value} onChange={this.onChange.bind(this)}/>\\n </Popover>\\n </div>\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### usePortal\\n\\n设置 `usePortal={false}` 将模态对话框生成到根节点的里面，这样为了计算位置准确，你需要将父层样式设为 `position: relative;` 。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Card, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor() {\\n super();\\n this.state = {\\n isOpen: false,\\n }\\n }\\n onClick() {\\n this.setState({ isOpen: false });\\n }\\n handleVisibleChange(isOpen) {\\n this.setState({ isOpen });\\n }\\n render() {\\n return (\\n <div>\\n <div style={{ position: 'relative' }}>\\n <Popover\\n trigger=\\\"click\\\"\\n placement=\\\"right\\\"\\n usePortal={false}\\n isOpen={this.state.isOpen}\\n onVisibleChange={this.handleVisibleChange.bind(this)}\\n content={\\n <Card bordered={false} title=\\\"Card标题\\\" extra={<a href=\\\"#\\\">更多</a>} style={{ width: 200 }}>\\n <div>Are you sure you want to delete these items? You won't be able to recover them.</div>\\n <div style={{ display: \\\"flex\\\", justifyContent: \\\"flex-end\\\", marginTop: 15 }}>\\n <Button size=\\\"small\\\" onClick={this.onClick.bind(this)}>\\n Cancel\\n </Button>\\n <Button type=\\\"danger\\\" size=\\\"small\\\" onClick={this.onClick.bind(this)}>\\n Delete\\n </Button>\\n </div>\\n </Card>\\n }\\n >\\n <Button>弹出目标</Button>\\n </Popover>\\n </div>\\n </div>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### Confirm 用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Popover, Row } from 'uiw';\\n\\nclass Demo extends React.Component {\\n render() {\\n return (\\n <Row style={{ alignItems: 'center' }}>\\n <Popover.Confirm title=\\\"Are you sure delete this?\\\">delete</Popover.Confirm>\\n </Row>\\n )\\n }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| content | 显示的内容 | String,React.ReactNode | - |\\n| placement | 气泡框位置，可现实箭头在不同的方位 | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\\n| visibleArrow | 是否显示箭头 | Boolean | `true` |\\n| delay | 延迟进入和消失，`{ show: 2000, hide: 4000 }` 或者直接设置 `2000`，只对 `trigger=hover` 有效，继承 `<OverlayTrigger />` 组件属性 | Object/Number | - |\\n| trigger| 悬停/点击弹出窗口，继承 `<OverlayTrigger />` 组件属性 | Enum{`hover`, `click`, `focus`} | `hover` |\\n| disabled | 是否禁用弹出目标 | Boolean | `false` |\\n| isOpen | 默认是否显示弹窗，继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |\\n| autoAdjustOverflow | 弹出层被遮挡时自动调整位置，继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |\\n| onVisibleChange | 显示隐藏的回调，继承 `<OverlayTrigger />` 组件属性 | Function(isVisible:bool) | - |\\n\\n## Confirm Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| trigger| 悬停/点击弹出窗口，继承 `<OverlayTrigger />` 组件属性 | Enum{`hover`, `click`, `focus`} | `hover` |\\n| placement | 气泡框位置，可现实箭头在不同的方位 | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |\\n| visibleArrow | 是否显示箭头 | Boolean | `true` |\\n| children | 子元素 | React.ReactNode | - |\\n| onConfirm | 确定方法 | ()=>void | |\\n| confirmText | 确定按钮文本 | string | Yes |\\n| title | 标题信息 | React.ReactNode | - |\\n| cancelText | 取消按钮文本 | string | No |\\n\\n\\n更多属性请参考 [OverlayTrigger](#/components/overlay-trigger)。\\n\";"],"names":[],"sourceRoot":""}
|