@uiw/doc 4.21.12 → 5.0.0-bate-0

package/web/static/js/9900.521825c9.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9900],{29900:function(n,e,t){t.r(e),e.default="Modal \u6a21\u6001\u5bf9\u8bdd\u6846\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-modal/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-modal.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-modal)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-modal.svg?label=@uiw/react-modal)](https://npmjs.com/@uiw/react-modal)\n\n\u6a21\u6001\u5bf9\u8bdd\u6846\u3002\n\n```jsx\nimport { Modal } from 'uiw';\n// or\nimport Modal from '@uiw/react-modal';\n```\n\n### \u57fa\u672c\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 { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          isOpen={this.state.visible}\n          confirmText=\"\u786e\u5b9a\u6309\u94ae\"\n          cancelText=\"\u53d6\u6d88\u6309\u94ae\"\n          icon=\"information\"\n          type=\"primary\"\n          onConfirm={() => console.log('\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01')}\n          onCancel={() => console.log('\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01')}\n          onClosed={this.onClosed.bind(this)}\n        >\n          React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n          <br /><br />\n          \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n          <br /><br />\n          \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n          <br /><br />\n          \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n          <br /><br />\n          \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n          <br /><br />\n          <b>\u7ec4\u4ef6</b>\n          <br /><br />\n          React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002\n          <br /><br />\n          \u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 <a href=\"https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA\" target=\"_blank\">Babel REPL</a> \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846\n\n\u8fd9\u91cc\u662f\u5229\u7528 `Promise` \u7b49\u5b83\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n    this.time = null\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          isOpen={this.state.visible}\n          confirmText=\"\u786e\u5b9a\u6309\u94ae\"\n          cancelText=\"\u53d6\u6d88\u6309\u94ae\"\n          type=\"danger\"\n          onCancel={() => {\n            clearTimeout(this.time)\n            console.log('\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01')\n          }}\n          onClosed={this.onClosed.bind(this)}\n          onConfirm={() => {\n            console.log('\u786e\u5b9a\u56de\u8c03\uff01, \u8fd9\u91cc\u662f\u5229\u7528Promise\u7b49\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3');\n            return new Promise((resolve, reject) => {\n              const random = Math.random();\n              console.log('\u6d4b\u8bd5\uff0c\u968f\u673a\u503c\u5927\u4e8e 0.5 \u6267\u884c resolve \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c reject \u89e6\u53d1 catch \u9519\u8bef', random, random > 0.5)\n              this.time = setTimeout(random > 0.5 ? resolve : reject, 3000);\n            }).catch(() => {\n              // \u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u65b9\u5f0f\uff0c\u963b\u6b62\u5f39\u6846\u6d88\u5931\n              // throw new Error();\n            });\n          }}\n        >\n          \u8fd9\u662f\u4e00\u4e2a\u5355\u51fb \u201c<b>\u786e\u5b9a\u6309\u94ae</b>\u201d \u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846\u7684\u5b9e\u4f8b\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u89e6\u53d1 \u201c<b>onConfirm</b>\u201d \u6216 \u201c<b>onCancel</b>\u201d \u4e8b\u4ef6\u3002<br /><br /> \u8fd9\u91cc\u662f\u5229\u7528 <b>Promise</b> \u7684\u7279\u6027\uff0c\u7b49\u5b83\u6267\u884c\u5b8c\u6210\u540e\uff0c\u518d\u53bb\u5173\u95ed\u7a97\u53e3\uff0c\u8fbe\u5230\u5ef6\u8fdf\u5173\u95ed\u7684\u6548\u679c\u3002<br /><br />\n          \u8fd9\u4e2a\u6d4b\u8bd5\u4f8b\u5b50\uff0c\u751f\u6210\u968f\u673a\u503c\u5224\u65ad\u662f\u5426\u5927\u4e8e <b>0.5</b> \u6267\u884c <b>resolve</b> \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c <b>reject</b> \u89e6\u53d1 <b>catch</b> \u9519\u8bef\u3002\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u8868\u5355\u5e94\u7528\n\n\u8fd9\u91cc\u662f\u5229\u7528 `Promise` \u7b49\u5b83\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n      loading: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  onSubmit({ initial, current }) {\n    const errorObj = {};\n    if (current.userName.startsWith('u')) {\n      errorObj.userName = `\u59d3\u540d ${current.userName} \u4e0d\u80fd\u4ee5 \u2018u\u2019 \u5f00\u5934`;\n    }\n    if (!current.age || current.age < 18 || current.age > 30) {\n      errorObj.age = '\u5e74\u9f84\u5fc5\u987b\u572818 ~ 30\u5c81\u4e4b\u95f4\u3002';\n    }\n    if (!current.textarea) {\n      errorObj.textarea = '\u8bf7\u8f93\u5165\u63cf\u8ff0\u5185\u5bb9';\n    }\n    if(Object.keys(errorObj).length > 0) {\n      const err = new Error();\n      err.filed = errorObj;\n      throw err;\n    }\n\n    this.setState({ loading: true });\n    setTimeout(() => {\n      this.setState({ loading: false, visible: false });\n      Notify.success({ title: '\u63d0\u4ea4\u6210\u529f\u901a\u77e5\uff01', description: '\u63d0\u4ea4\u5185\u5bb9\uff0c\u3002' });\n    }, 2000);\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          width={900}\n          isOpen={this.state.visible}\n          onClosed={this.onClosed.bind(this)}\n          type=\"danger\"\n          useButton={false}\n        >\n          <Form\n            resetOnSubmit={false}\n            onSubmit={this.onSubmit.bind(this)}\n            onSubmitError={(error) => {\n              if (error.filed) {\n                return { ...error.filed };\n              }\n              return null;\n            }}\n            fields={{\n              userName: {\n                initialValue: 'uiw',\n                label: '\u59d3\u540d',\n                help: '\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f',\n                children: <Input type=\"text\" />\n              },\n              age: {\n                initialValue: 9,\n                label: '\u5e74\u9f84',\n                children: <Input type=\"number\" />\n              },\n              textarea: {\n                initialValue: '',\n                label: '\u63cf\u8ff0\u8bf4\u660e',\n                children: <Textarea placeholder=\"\u8bf7\u8f93\u5165\u5185\u5bb9\" />\n              },\n            }}\n          >\n            {({ fields, state, canSubmit }) => {\n              console.log('fields:--\x3e', state);\n              return (\n                <div>\n                  <Row gutter={10}>\n                    <Col>{fields.userName}</Col>\n                    <Col>{fields.age}</Col>\n                  </Row>\n                  <Row gutter={10}>\n                    <Col>{fields.textarea}</Col>\n                  </Row>\n                  <Row gutter={10} justify=\"flex-end\">\n                    <Col fixed>\n                      <Button loading={this.state.loading} disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4\u8868\u5355</Button>\n                    </Col>\n                  </Row>\n                </div>\n              )\n            }}\n          </Form>\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u8868\u5355\u4e2d\u5e94\u7528</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u81ea\u5b9a\u4e49\u9875\u811a\n\n\u8bbe\u7f6e `useButton={false}` \u9690\u85cf\u9ed8\u8ba4\u7684\u6309\u94ae\uff0c\u518d\u6839\u636e\u81ea\u5df1\u9700\u6c42\u5b9a\u4e49\u6309\u94ae\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor() {\n    super();\n    this.state = {\n      visible: false,\n    }\n  }\n  onClick() {\n    this.setState({ visible: !this.state.visible });\n  }\n  onClosed() {\n    this.setState({ visible: false });\n  }\n  render() {\n    return (\n      <div>\n        <Modal\n          title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n          isOpen={this.state.visible}\n          useButton={false}\n          confirmText=\"\u786e\u5b9a\u6309\u94ae\"\n          cancelText=\"\u53d6\u6d88\u6309\u94ae\"\n          icon=\"information\"\n          type=\"danger\"\n          onConfirm={() => console.log('\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01')}\n          onCancel={() => console.log('\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01')}\n          onClosed={this.onClosed.bind(this)}\n        >\n          React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n          <br /><br />\n          \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n          <br /><br />\n          \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n          <br /><br />\n          \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n          <br /><br />\n          \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n          <br /><br />\n          <b>\u7ec4\u4ef6</b>\n          <br /><br />\n          React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002\n          <br /><br />\n          \u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 Babel REPL \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002\n          <div className=\"w-modal-footer\">\n            <Button type=\"danger\" onClick={this.onClosed.bind(this)} >\u786e\u5b9a\u6309\u94ae</Button>\n            <Button onClick={this.onClosed.bind(this)} >\u53d6\u6d88\u6309\u94ae</Button>\n          </div>\n        </Modal>\n        <ButtonGroup>\n          <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n        </ButtonGroup>\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5feb\u6377\u5f39\u51fa\n\n\u4f7f\u7528 show() \u53ef\u4ee5\u5feb\u6377\u5730\u5f39\u51fa\u786e\u8ba4\u6846\u3002\u63a5\u53d7\u7684\u53c2\u6570\u4e0e ModalProps \u4e00\u6837, \u53ea\u662f\u5c11\u4e86 isOpen \u4e0e onClosed\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  onClick() {\n    Modal.show({\n      confirmText: \"\u77e5\u9053\u4e86\",\n      children: \"\u5feb\u6377\u63d0\u793a\",\n      onConfirm: () => console.log('\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01'),\n    })\n  }\n  render() {\n    return (\n      <div>\n        <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n      </div>\n    )\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| title | \u8bbe\u7f6e\u6807\u9898 | Function(e) | - |\n| onCancel | \u53d6\u6d88\u6309\u94ae\u7684\u56de\u8c03\u51fd\u6570 | Function(e) | - |\n| onConfirm | \u70b9\u51fb\u786e\u5b9a\u6309\u94ae\u56de\u8c03 | Function(e) | - |\n| cancelText | \u53d6\u6d88\u6309\u94ae\u6587\u5b57\uff0c | String | - |\n| confirmText | \u786e\u8ba4\u6309\u94ae\u6587\u5b57 | String | `\u786e\u8ba4` |\n| icon | \u8bbe\u7f6e\u5bf9\u8bdd\u6846\u53f3\u4e0a\u89d2\u56fe\u6807\uff0c\u8bbe\u7f6e `type` \u5c06\u56fe\u6807\u8bbe\u7f6e\u4e0d\u540c\u7684\u989c\u8272\u3002\u5f53\u524d\u5c5e\u6027\u4e3a [`<Icon>`](#/components/icon) \u7ec4\u4ef6\u7684 `type` \u5c5e\u6027\uff0c\u6240\u4ee5\u53ef\u4ee5\u53c2\u8003\u8be5\u7ec4\u4ef6\u81ea\u5b9a\u4e49\u56fe\u6807\u3002 | String/ReactNode | - |\n| useButton | \u662f\u5426\u4f7f\u7528\u9ed8\u8ba4\u6309\u94ae\uff0c\u5982\u679c\u8bbe\u7f6e `false` \u9700\u8981\u81ea\u5b9a\u4e49\u6309\u94ae\u5173\u95ed | Boolean | `true` |\n| type | \u6309\u94ae\u7c7b\u578b\u8ddf `<Button>` \u7ec4\u4ef6\u7684 `type` \u53c2\u6570\u4e00\u81f4\uff0c\u540c\u65f6\u4f1a\u5f71\u54cd\u6309\u94ae\u989c\u8272\u3002 | String | `light` |\n| width | \u8bbe\u7f6e\u5f39\u51fa\u6846\u5bbd\u5ea6 | Number | - |\n| bodyStyle | Modal body \u6837\u5f0f | `CSSProperties` | - |\n| cancelButtonProps | cancel \u6309\u94ae props | `ButtonProps` | - |\n| confirmButtonProps | confirm \u6309\u94ae props | `ButtonProps` | - |\n| maxWidth | \u9ed8\u8ba4\u5f39\u51fa\u6846\u6700\u5927\u5bbd\u5ea6 `500` | Number | `500` |\n| minWidth | \u9ed8\u8ba4\u5f39\u51fa\u6846\u6700\u5c0f\u5bbd\u5ea6 `320` | Number | `320` |\n| isCloseButtonShown | \u662f\u5426\u5728\u5bf9\u8bdd\u6846\u7684\u6807\u9898\u4e2d\u663e\u793a\u5173\u95ed\u6309\u94ae\u3002 \u8bf7\u6ce8\u610f\uff0c\u53ea\u6709\u5728\u63d0\u4f9b\u6807\u9898\u65f6\u624d\u4f1a\u5448\u73b0\u6807\u9898\u3002 | Boolean | `true` |\n| isOpen[`<Overlay>`](#/components/overlay) | \u5bf9\u8bdd\u6846\u662f\u5426\u53ef\u89c1 | Boolean | `false` |\n| maskClosable[`<Overlay>`](#/components/overlay) | \u70b9\u51fb\u906e\u7f69\u5c42\u662f\u5426\u5141\u8bb8\u5173\u95ed | Boolean | `true` |\n\n## Modal.show(params)\n\nparams: Omit<ModalProps, \\'onClosed\\' \\| \\'isOpen\\'> & { children: React.ReactNode }\n\n\n\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [Overlay](#/components/overlay)\u3002\n"}}]);
-//# sourceMappingURL=9900.521825c9.chunk.js.map

package/web/static/js/9900.521825c9.chunk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/js/9900.521825c9.chunk.js","mappings":"gHAAA","sources":["../../packages/react-modal/README.md"],"sourcesContent":["export default \"Modal 模态对话框\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-modal/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-modal.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-modal)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-modal.svg?label=@uiw/react-modal)](https://npmjs.com/@uiw/react-modal)\\n\\n模态对话框。\\n\\n```jsx\\nimport { Modal } from 'uiw';\\n// or\\nimport Modal from '@uiw/react-modal';\\n```\\n\\n### 基本用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Modal, ButtonGroup, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      visible: false,\\n    }\\n  }\\n  onClick() {\\n    this.setState({ visible: !this.state.visible });\\n  }\\n  onClosed() {\\n    this.setState({ visible: false });\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <Modal\\n          title=\\\"模态对话框\\\"\\n          isOpen={this.state.visible}\\n          confirmText=\\\"确定按钮\\\"\\n          cancelText=\\\"取消按钮\\\"\\n          icon=\\\"information\\\"\\n          type=\\\"primary\\\"\\n          onConfirm={() => console.log('您点击了确定按钮！')}\\n          onCancel={() => console.log('您点击了取消按钮！')}\\n          onClosed={this.onClosed.bind(this)}\\n        >\\n          React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。\\n          <br /><br />\\n          以声明式编写UI，可以让你的代码更加可靠，且方便调试。\\n          <br /><br />\\n          创建好拥有各自状态的组件，再由组件构成更加复杂的界面。\\n          <br /><br />\\n          无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。\\n          <br /><br />\\n          无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。\\n          <br /><br />\\n          <b>组件</b>\\n          <br /><br />\\n          React 组件使用一个名为 render() 的方法， 接收数据作为输入，输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props 传入 render() 方法。\\n          <br /><br />\\n          使用 React 的时候也可以不使用 JSX 语法 你可以在 <a href=\\\"https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA\\\" target=\\\"_blank\\\">Babel REPL</a> 查看 JSX 是如何被渲染成原生 JavaScript 代码的。\\n        </Modal>\\n        <ButtonGroup>\\n          <Button onClick={this.onClick.bind(this)}>确认对话框</Button>\\n        </ButtonGroup>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 延迟关闭对话框\\n\\n这里是利用 `Promise` 等它执行完成再去关闭窗口\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Modal, ButtonGroup, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      visible: false,\\n    }\\n    this.time = null\\n  }\\n  onClick() {\\n    this.setState({ visible: !this.state.visible });\\n  }\\n  onClosed() {\\n    this.setState({ visible: false });\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <Modal\\n          title=\\\"模态对话框\\\"\\n          isOpen={this.state.visible}\\n          confirmText=\\\"确定按钮\\\"\\n          cancelText=\\\"取消按钮\\\"\\n          type=\\\"danger\\\"\\n          onCancel={() => {\\n            clearTimeout(this.time)\\n            console.log('您点击了取消按钮！')\\n          }}\\n          onClosed={this.onClosed.bind(this)}\\n          onConfirm={() => {\\n            console.log('确定回调！, 这里是利用Promise等执行完成再去关闭窗口');\\n            return new Promise((resolve, reject) => {\\n              const random = Math.random();\\n              console.log('测试，随机值大于 0.5 执行 resolve 事件，否则 执行 reject 触发 catch 错误', random, random > 0.5)\\n              this.time = setTimeout(random > 0.5 ? resolve : reject, 3000);\\n            }).catch(() => {\\n              // 可以通过下面方式，阻止弹框消失\\n              // throw new Error();\\n            });\\n          }}\\n        >\\n          这是一个单击 “<b>确定按钮</b>” 延迟关闭对话框的实例，关闭对话框触发 “<b>onConfirm</b>” 或 “<b>onCancel</b>” 事件。<br /><br /> 这里是利用 <b>Promise</b> 的特性，等它执行完成后，再去关闭窗口，达到延迟关闭的效果。<br /><br />\\n          这个测试例子，生成随机值判断是否大于 <b>0.5</b> 执行 <b>resolve</b> 事件，否则 执行 <b>reject</b> 触发 <b>catch</b> 错误。\\n        </Modal>\\n        <ButtonGroup>\\n          <Button onClick={this.onClick.bind(this)}>延迟关闭对话框</Button>\\n        </ButtonGroup>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n### 表单应用\\n\\n这里是利用 `Promise` 等它执行完成再去关闭窗口\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Modal, ButtonGroup, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      visible: false,\\n      loading: false,\\n    }\\n  }\\n  onClick() {\\n    this.setState({ visible: !this.state.visible });\\n  }\\n  onClosed() {\\n    this.setState({ visible: false });\\n  }\\n  onSubmit({ initial, current }) {\\n    const errorObj = {};\\n    if (current.userName.startsWith('u')) {\\n      errorObj.userName = `姓名 ${current.userName} 不能以 ‘u’ 开头`;\\n    }\\n    if (!current.age || current.age < 18 || current.age > 30) {\\n      errorObj.age = '年龄必须在18 ~ 30岁之间。';\\n    }\\n    if (!current.textarea) {\\n      errorObj.textarea = '请输入描述内容';\\n    }\\n    if(Object.keys(errorObj).length > 0) {\\n      const err = new Error();\\n      err.filed = errorObj;\\n      throw err;\\n    }\\n\\n    this.setState({ loading: true });\\n    setTimeout(() => {\\n      this.setState({ loading: false, visible: false });\\n      Notify.success({ title: '提交成功通知！', description: '提交内容，。' });\\n    }, 2000);\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <Modal\\n          title=\\\"模态对话框\\\"\\n          width={900}\\n          isOpen={this.state.visible}\\n          onClosed={this.onClosed.bind(this)}\\n          type=\\\"danger\\\"\\n          useButton={false}\\n        >\\n          <Form\\n            resetOnSubmit={false}\\n            onSubmit={this.onSubmit.bind(this)}\\n            onSubmitError={(error) => {\\n              if (error.filed) {\\n                return { ...error.filed };\\n              }\\n              return null;\\n            }}\\n            fields={{\\n              userName: {\\n                initialValue: 'uiw',\\n                label: '姓名',\\n                help: '以“u”开头的名字将在此处显示错误信息',\\n                children: <Input type=\\\"text\\\" />\\n              },\\n              age: {\\n                initialValue: 9,\\n                label: '年龄',\\n                children: <Input type=\\\"number\\\" />\\n              },\\n              textarea: {\\n                initialValue: '',\\n                label: '描述说明',\\n                children: <Textarea placeholder=\\\"请输入内容\\\" />\\n              },\\n            }}\\n          >\\n            {({ fields, state, canSubmit }) => {\\n              console.log('fields:-->', state);\\n              return (\\n                <div>\\n                  <Row gutter={10}>\\n                    <Col>{fields.userName}</Col>\\n                    <Col>{fields.age}</Col>\\n                  </Row>\\n                  <Row gutter={10}>\\n                    <Col>{fields.textarea}</Col>\\n                  </Row>\\n                  <Row gutter={10} justify=\\\"flex-end\\\">\\n                    <Col fixed>\\n                      <Button loading={this.state.loading} disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交表单</Button>\\n                    </Col>\\n                  </Row>\\n                </div>\\n              )\\n            }}\\n          </Form>\\n        </Modal>\\n        <ButtonGroup>\\n          <Button onClick={this.onClick.bind(this)}>表单中应用</Button>\\n        </ButtonGroup>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 自定义页脚\\n\\n设置 `useButton={false}` 隐藏默认的按钮，再根据自己需求定义按钮。\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Modal, ButtonGroup, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      visible: false,\\n    }\\n  }\\n  onClick() {\\n    this.setState({ visible: !this.state.visible });\\n  }\\n  onClosed() {\\n    this.setState({ visible: false });\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <Modal\\n          title=\\\"模态对话框\\\"\\n          isOpen={this.state.visible}\\n          useButton={false}\\n          confirmText=\\\"确定按钮\\\"\\n          cancelText=\\\"取消按钮\\\"\\n          icon=\\\"information\\\"\\n          type=\\\"danger\\\"\\n          onConfirm={() => console.log('您点击了确定按钮！')}\\n          onCancel={() => console.log('您点击了取消按钮！')}\\n          onClosed={this.onClosed.bind(this)}\\n        >\\n          React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。\\n          <br /><br />\\n          以声明式编写UI，可以让你的代码更加可靠，且方便调试。\\n          <br /><br />\\n          创建好拥有各自状态的组件，再由组件构成更加复杂的界面。\\n          <br /><br />\\n          无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。\\n          <br /><br />\\n          无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。\\n          <br /><br />\\n          <b>组件</b>\\n          <br /><br />\\n          React 组件使用一个名为 render() 的方法， 接收数据作为输入，输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props 传入 render() 方法。\\n          <br /><br />\\n          使用 React 的时候也可以不使用 JSX 语法 你可以在 Babel REPL 查看 JSX 是如何被渲染成原生 JavaScript 代码的。\\n          <div className=\\\"w-modal-footer\\\">\\n            <Button type=\\\"danger\\\" onClick={this.onClosed.bind(this)} >确定按钮</Button>\\n            <Button onClick={this.onClosed.bind(this)} >取消按钮</Button>\\n          </div>\\n        </Modal>\\n        <ButtonGroup>\\n          <Button onClick={this.onClick.bind(this)}>确认对话框</Button>\\n        </ButtonGroup>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 快捷弹出\\n\\n使用 show() 可以快捷地弹出确认框。接受的参数与 ModalProps 一样, 只是少了 isOpen 与 onClosed\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Modal, ButtonGroup, Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  onClick() {\\n    Modal.show({\\n      confirmText: \\\"知道了\\\",\\n      children: \\\"快捷提示\\\",\\n      onConfirm: () => console.log('您点击了确定按钮！'),\\n    })\\n  }\\n  render() {\\n    return (\\n      <div>\\n        <Button onClick={this.onClick.bind(this)}>确认对话框</Button>\\n      </div>\\n    )\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| title | 设置标题 | Function(e) | - |\\n| onCancel | 取消按钮的回调函数 | Function(e) | - |\\n| onConfirm | 点击确定按钮回调 | Function(e) | - |\\n| cancelText | 取消按钮文字， | String | - |\\n| confirmText | 确认按钮文字 | String | `确认` |\\n| icon | 设置对话框右上角图标，设置 `type` 将图标设置不同的颜色。当前属性为 [`<Icon>`](#/components/icon) 组件的 `type` 属性，所以可以参考该组件自定义图标。 | String/ReactNode | - |\\n| useButton | 是否使用默认按钮，如果设置 `false` 需要自定义按钮关闭 | Boolean | `true` |\\n| type | 按钮类型跟 `<Button>` 组件的 `type` 参数一致，同时会影响按钮颜色。 | String | `light` |\\n| width | 设置弹出框宽度 | Number | - |\\n| bodyStyle | Modal body 样式 | `CSSProperties` | - |\\n| cancelButtonProps | cancel 按钮 props | `ButtonProps` | - |\\n| confirmButtonProps | confirm 按钮 props | `ButtonProps` | - |\\n| maxWidth | 默认弹出框最大宽度 `500` | Number | `500` |\\n| minWidth | 默认弹出框最小宽度 `320` | Number | `320` |\\n| isCloseButtonShown | 是否在对话框的标题中显示关闭按钮。 请注意，只有在提供标题时才会呈现标题。 | Boolean | `true` |\\n| isOpen[`<Overlay>`](#/components/overlay) | 对话框是否可见 | Boolean | `false` |\\n| maskClosable[`<Overlay>`](#/components/overlay) | 点击遮罩层是否允许关闭 | Boolean | `true` |\\n\\n## Modal.show(params)\\n\\nparams: Omit<ModalProps, \\\\'onClosed\\\\' \\\\| \\\\'isOpen\\\\'> & { children: React.ReactNode }\\n\\n\\n更多属性文档请参考 [Overlay](#/components/overlay)。\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/9961.46e9e861.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9961],{39961:function(e,n,a){a.r(n),n.default='Tabs \u6807\u7b7e\u9875\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tabs/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-tabs.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-tabs)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-tabs.svg?label=@uiw/react-tabs)](https://npmjs.com/@uiw/react-tabs)\n\n\u6807\u7b7e\u9875\u5207\u6362\u7ec4\u4ef6\uff0c\u5206\u9694\u5185\u5bb9\u4e0a\u6709\u5173\u8054\u4f46\u5c5e\u4e8e\u4e0d\u540c\u7c7b\u522b\u7684\u6570\u636e\u96c6\u5408\u3002\n\n```jsx\nimport { Tabs } from \'uiw\';\n// or\nimport Tabs from \'@uiw/react-tabs\';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n\u57fa\u7840\u7684\u3001\u7b80\u6d01\u7684\u5361\u7247\u5f0f\u6807\u7b7e\u9875\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Tabs } from \'uiw\';\n\nclass Demo extends React.Component {\n  render() {\n    return (\n      <Tabs activeKey="1" onTabClick={(tab, key, e) => {\n          console.log("=>", key, tab);\n        }}>\n          <Tabs.Pane label="\u7528\u6237\u7ba1\u7406" key="1">\u7528\u6237\u7ba1\u7406</Tabs.Pane>\n          <Tabs.Pane label="\u914d\u7f6e\u7ba1\u7406" key="2">\u914d\u7f6e\u7ba1\u7406</Tabs.Pane>\n          <Tabs.Pane sequence="fadeIn up" label="\u89d2\u8272\u7ba1\u7406" key="3">\u89d2\u8272\u7ba1\u7406</Tabs.Pane>\n          <Tabs.Pane label="\u5927\u7237\u6b22\u4e50\u591a" key="4"><div>\u5927\u7237\u6b22\u4e50\u591a22</div></Tabs.Pane>\n      </Tabs>\n    );\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u884c\u6837\u5f0f\n\n\u57fa\u7840\u7684\u3001\u7b80\u6d01\u7684\u5361\u7247\u5f0f\u6807\u7b7e\u9875\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Tabs,Button } from \'uiw\';\n\nclass Demo extends React.Component {\n   constructor(props) {\n    super(props);\n    this.state = {\n      activeKey: \'1\',\n    };\n  }\n   onClick() {\n     const { activeKey } = this.state;\n    this.setState({activeKey: activeKey < 4 ? (Number(activeKey) + 1).toString() :\'1\'})\n  };\n\n  render() {\n    return (\n      <>\n        <Button type="primary" onClick={this.onClick.bind(this)}>\u70b9\u51fb\u6211\u5207\u6362tab\u663e\u9879\u5361</Button>\n        <Tabs type="line" activeKey={this.state.activeKey} onTabClick={(key,tab, e) => {\n          console.log("=>", key, tab);\n          this.setState({activeKey: key})\n        }}>\n        <Tabs.Pane label="\u7528\u6237\u7ba1\u7406" key="1">\u7528\u6237\u7ba1\u7406</Tabs.Pane>\n        <Tabs.Pane disabled label="\u914d\u7f6e\u7ba1\u7406" key="2">\u914d\u7f6e\u7ba1\u7406</Tabs.Pane>\n        <Tabs.Pane sequence="fadeIn up" label="\u89d2\u8272\u7ba1\u7406" key="3">\u89d2\u8272\u7ba1\u7406</Tabs.Pane>\n        <Tabs.Pane label="\u5927\u7237\u6b22\u4e50\u591a" key="4"><div>\u5927\u7237\u6b22\u4e50\u591a22</div></Tabs.Pane>\n </Tabs>\n      </>\n    );\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5361\u7247\u6837\u5f0f\n\n\u53e6\u4e00\u79cd\u6837\u5f0f\u7684\u9875\u7b7e\uff0c\u4e0d\u63d0\u4f9b\u5bf9\u5e94\u7684\u5782\u76f4\u6837\u5f0f\u3002\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Tabs } from \'uiw\';\n\nclass Demo extends React.Component {\n  render() {\n    return (\n      <Tabs type="card" activeKey="1" onTabClick={(tab, key, e) => {\n          console.log("=>", key, tab);\n        }}>\n        <Tabs.Pane label="\u7528\u6237\u7ba1\u7406" key="1">\u7528\u6237\u7ba1\u7406</Tabs.Pane>\n        <Tabs.Pane label="\u914d\u7f6e\u7ba1\u7406" key="2">\u914d\u7f6e\u7ba1\u7406</Tabs.Pane>\n        <Tabs.Pane disabled sequence="fadeIn up" label="\u89d2\u8272\u7ba1\u7406" key="3">\u89d2\u8272\u7ba1\u7406</Tabs.Pane>\n        <Tabs.Pane label="\u5927\u7237\u6b22\u4e50\u591a" key="4"><div>\u5927\u7237\u6b22\u4e50\u591a22</div></Tabs.Pane>\n      </Tabs>\n    );\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n### \u5361\u7247\u6837\u5f0f\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Tabs, Divider } from \'uiw\';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      activeKey: \'1\',\n    };\n  }\n  render() {\n    const { activeKey } = this.state;\n    return (\n      <div>\n        <Tabs\n          type="card"\n          activeKey={activeKey}\n          onTabClick={(activeKey, key, e) => {\n            this.setState({ activeKey });\n          }}\n        >\n          <Tabs.Pane label="\u7528\u6237\u7ba1\u7406" key="1" />\n          <Tabs.Pane label="\u914d\u7f6e\u7ba1\u7406" key="2" />\n          <Tabs.Pane disabled sequence="fadeIn up" label="\u89d2\u8272\u7ba1\u7406" key="3" />\n          <Tabs.Pane label="\u5927\u7237\u6b22\u4e50\u591a" key="4" />\n        </Tabs>\n        <Divider />\n        {activeKey === \'1\' && (\n          <div>\u7528\u6237\u7ba1\u7406{activeKey}</div>\n        )}\n        {activeKey === \'2\' && (\n          <div>\u914d\u7f6e\u7ba1\u7406{activeKey}</div>\n        )}\n        {activeKey === \'3\' && (\n          <div>\u89d2\u8272\u7ba1\u7406{activeKey}</div>\n        )}\n        {activeKey === \'4\' && (\n          <div>\u5927\u7237\u6b22\u4e50\u591a{activeKey}</div>\n        )}\n      </div>\n    );\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u8d85\u51fa\u6536\u7f29\n\n\u5f53pane\u8fc7\u591a,\u8d85\u51fa\u5bbd\u5ea6\u5ea6\u65f6,\u4f1a\u5c06\u8d85\u51fa\u90e8\u5206\u6536\u7f29\u5230\u4e0b\u62c9\u9009\u9879\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Tabs } from \'uiw\';\n\nclass Demo extends React.Component {\n\nrender() {\n    const panes=[]\n    for (let index = 0; index < 20; index++) {\n      panes.push({label:`Tabs-${index}`,key:index})\n    }\n\n    return (\n      <Tabs\n        style={{width:700}}\n        activeKey="1"\n        onTabClick={(tab, key, e) => {\n          console.log("=>", key, tab);\n        }}>\n        {panes.map(item=>{\n          return(\n            <Tabs.Pane label={item.label} key={item.key}>{item.label}</Tabs.Pane>\n          )\n        })}\n      </Tabs>\n    );\n  }\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n\n## Tabs.Porps\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|------ |-------- |---------- |-------- |\n| type | \u9875\u7b7e\u7684\u57fa\u672c\u6837\u5f0f | Enum{`line`\u3001`card`\u3001`default`} | `default` |\n| activeKey | \u5f53\u524d\u6fc0\u6d3b `tab` \u9762\u677f\u7684 `key` | String | - |\n| onTabClick | `tab` \u88ab\u70b9\u51fb\u7684\u56de\u8c03 | Function | `(item, key, e)=>{}` |\n\n## Tabs.Pane.Porps\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|------ |-------- |---------- |-------- |\n| label | \u9009\u9879\u5361\u6807\u9898 | String,Node | - |\n| key | \u5bf9\u5e94 activeKey | String,Node | - |\n| disabled | \u6807\u7b7e\u662f\u7981\u7528\u4e0d\u53ef\u70b9\u51fb | Boolean | `false` |\n'}}]);
-//# sourceMappingURL=9961.46e9e861.chunk.js.map

package/web/static/js/9961.46e9e861.chunk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/js/9961.46e9e861.chunk.js","mappings":"gHAAA","sources":["../../packages/react-tabs/README.md"],"sourcesContent":["export default \"Tabs 标签页\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tabs/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-tabs.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-tabs)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-tabs.svg?label=@uiw/react-tabs)](https://npmjs.com/@uiw/react-tabs)\\n\\n标签页切换组件，分隔内容上有关联但属于不同类别的数据集合。\\n\\n```jsx\\nimport { Tabs } from 'uiw';\\n// or\\nimport Tabs from '@uiw/react-tabs';\\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 { Tabs } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  render() {\\n    return (\\n      <Tabs activeKey=\\\"1\\\" onTabClick={(tab, key, e) => {\\n          console.log(\\\"=>\\\", key, tab);\\n        }}>\\n          <Tabs.Pane label=\\\"用户管理\\\" key=\\\"1\\\">用户管理</Tabs.Pane>\\n          <Tabs.Pane label=\\\"配置管理\\\" key=\\\"2\\\">配置管理</Tabs.Pane>\\n          <Tabs.Pane sequence=\\\"fadeIn up\\\" label=\\\"角色管理\\\" key=\\\"3\\\">角色管理</Tabs.Pane>\\n          <Tabs.Pane label=\\\"大爷欢乐多\\\" key=\\\"4\\\"><div>大爷欢乐多22</div></Tabs.Pane>\\n      </Tabs>\\n    );\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\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 { Tabs,Button } from 'uiw';\\n\\nclass Demo extends React.Component {\\n   constructor(props) {\\n    super(props);\\n    this.state = {\\n      activeKey: '1',\\n    };\\n  }\\n   onClick() {\\n     const { activeKey } = this.state;\\n    this.setState({activeKey: activeKey < 4 ? (Number(activeKey) + 1).toString() :'1'})\\n  };\\n\\n  render() {\\n    return (\\n      <>\\n        <Button type=\\\"primary\\\" onClick={this.onClick.bind(this)}>点击我切换tab显项卡</Button>\\n        <Tabs type=\\\"line\\\" activeKey={this.state.activeKey} onTabClick={(key,tab, e) => {\\n          console.log(\\\"=>\\\", key, tab);\\n          this.setState({activeKey: key})\\n        }}>\\n        <Tabs.Pane label=\\\"用户管理\\\" key=\\\"1\\\">用户管理</Tabs.Pane>\\n        <Tabs.Pane disabled label=\\\"配置管理\\\" key=\\\"2\\\">配置管理</Tabs.Pane>\\n        <Tabs.Pane sequence=\\\"fadeIn up\\\" label=\\\"角色管理\\\" key=\\\"3\\\">角色管理</Tabs.Pane>\\n        <Tabs.Pane label=\\\"大爷欢乐多\\\" key=\\\"4\\\"><div>大爷欢乐多22</div></Tabs.Pane>\\n </Tabs>\\n      </>\\n    );\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\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 { Tabs } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  render() {\\n    return (\\n      <Tabs type=\\\"card\\\" activeKey=\\\"1\\\" onTabClick={(tab, key, e) => {\\n          console.log(\\\"=>\\\", key, tab);\\n        }}>\\n        <Tabs.Pane label=\\\"用户管理\\\" key=\\\"1\\\">用户管理</Tabs.Pane>\\n        <Tabs.Pane label=\\\"配置管理\\\" key=\\\"2\\\">配置管理</Tabs.Pane>\\n        <Tabs.Pane disabled sequence=\\\"fadeIn up\\\" label=\\\"角色管理\\\" key=\\\"3\\\">角色管理</Tabs.Pane>\\n        <Tabs.Pane label=\\\"大爷欢乐多\\\" key=\\\"4\\\"><div>大爷欢乐多22</div></Tabs.Pane>\\n      </Tabs>\\n    );\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\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 { Tabs, Divider } from 'uiw';\\n\\nclass Demo extends React.Component {\\n  constructor(props) {\\n    super(props);\\n    this.state = {\\n      activeKey: '1',\\n    };\\n  }\\n  render() {\\n    const { activeKey } = this.state;\\n    return (\\n      <div>\\n        <Tabs\\n          type=\\\"card\\\"\\n          activeKey={activeKey}\\n          onTabClick={(activeKey, key, e) => {\\n            this.setState({ activeKey });\\n          }}\\n        >\\n          <Tabs.Pane label=\\\"用户管理\\\" key=\\\"1\\\" />\\n          <Tabs.Pane label=\\\"配置管理\\\" key=\\\"2\\\" />\\n          <Tabs.Pane disabled sequence=\\\"fadeIn up\\\" label=\\\"角色管理\\\" key=\\\"3\\\" />\\n          <Tabs.Pane label=\\\"大爷欢乐多\\\" key=\\\"4\\\" />\\n        </Tabs>\\n        <Divider />\\n        {activeKey === '1' && (\\n          <div>用户管理{activeKey}</div>\\n        )}\\n        {activeKey === '2' && (\\n          <div>配置管理{activeKey}</div>\\n        )}\\n        {activeKey === '3' && (\\n          <div>角色管理{activeKey}</div>\\n        )}\\n        {activeKey === '4' && (\\n          <div>大爷欢乐多{activeKey}</div>\\n        )}\\n      </div>\\n    );\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 超出收缩\\n\\n当pane过多,超出宽度度时,会将超出部分收缩到下拉选项\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Tabs } from 'uiw';\\n\\nclass Demo extends React.Component {\\n\\nrender() {\\n    const panes=[]\\n    for (let index = 0; index < 20; index++) {\\n      panes.push({label:`Tabs-${index}`,key:index})\\n    }\\n\\n    return (\\n      <Tabs\\n        style={{width:700}}\\n        activeKey=\\\"1\\\"\\n        onTabClick={(tab, key, e) => {\\n          console.log(\\\"=>\\\", key, tab);\\n        }}>\\n        {panes.map(item=>{\\n          return(\\n            <Tabs.Pane label={item.label} key={item.key}>{item.label}</Tabs.Pane>\\n          )\\n        })}\\n      </Tabs>\\n    );\\n  }\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n\\n## Tabs.Porps\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|------ |-------- |---------- |-------- |\\n| type | 页签的基本样式 | Enum{`line`、`card`、`default`} | `default` |\\n| activeKey | 当前激活 `tab` 面板的 `key` | String | - |\\n| onTabClick | `tab` 被点击的回调 | Function | `(item, key, e)=>{}` |\\n\\n## Tabs.Pane.Porps\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|------ |-------- |---------- |-------- |\\n| label | 选项卡标题 | String,Node | - |\\n| key | 对应 activeKey | String,Node | - |\\n| disabled | 标签是禁用不可点击 | Boolean | `false` |\\n\";"],"names":[],"sourceRoot":""}