@uiw/doc 4.13.7 → 4.13.8
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 +8 -8
- package/web/asset-manifest.json +14 -14
- package/web/index.html +1 -1
- package/web/static/css/main.74129d99.css +2 -0
- package/web/static/css/main.74129d99.css.map +1 -0
- package/web/static/js/1892.0f341f07.chunk.js +2 -0
- package/web/static/js/1892.0f341f07.chunk.js.map +1 -0
- package/web/static/js/2854.377c4863.chunk.js +3 -0
- package/web/static/js/{2854.8f0f1b8d.chunk.js.LICENSE.txt → 2854.377c4863.chunk.js.LICENSE.txt} +0 -0
- package/web/static/js/2854.377c4863.chunk.js.map +1 -0
- package/web/static/js/766.d3dd7e64.chunk.js +2 -0
- package/web/static/js/766.d3dd7e64.chunk.js.map +1 -0
- package/web/static/js/{9961.3712fbe4.chunk.js → 9961.9db8f620.chunk.js} +2 -2
- package/web/static/js/{9961.3712fbe4.chunk.js.map → 9961.9db8f620.chunk.js.map} +1 -1
- package/web/static/js/main.b8836d2a.js +2 -0
- package/web/static/js/main.b8836d2a.js.map +1 -0
- package/web/static/css/main.7d4b1e54.css +0 -2
- package/web/static/css/main.7d4b1e54.css.map +0 -1
- package/web/static/js/1892.13ea195f.chunk.js +0 -2
- package/web/static/js/1892.13ea195f.chunk.js.map +0 -1
- package/web/static/js/2854.8f0f1b8d.chunk.js +0 -3
- package/web/static/js/2854.8f0f1b8d.chunk.js.map +0 -1
- package/web/static/js/766.3b400825.chunk.js +0 -2
- package/web/static/js/766.3b400825.chunk.js.map +0 -1
- package/web/static/js/main.e2d69f19.js +0 -2
- package/web/static/js/main.e2d69f19.js.map +0 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[766],{80766:function(e,n,l){l.r(n),n.default="SearchTree \u5e26\u641c\u7d22\u7684Tree\u9009\u62e9\u63a7\u4ef6\n===\n\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-search-tree)\n[](https://npmjs.com/@uiw/react-search-tree)\n\n\u4f7f\u7528\u6811\u9009\u62e9\u63a7\u4ef6\u53ef\u4ee5\u5b8c\u6574\u5c55\u73b0\u5176\u4e2d\u7684\u5c42\u7ea7\u5173\u7cfb\uff0c\u5e76\u5177\u6709\u9009\u4e2d\u72b6\u6001\u3002\u65b0\u7ec4\u4ef6 v4.11.7+ \u652f\u6301\u3002\n\n```jsx\nimport { SearchTree } from 'uiw';\n// or\nimport SearchTree from '@uiw/react-search-tree';\n```\n\n### \u57fa\u7840\u5b9e\u4f8b\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { SearchTree } from 'uiw';\n\nconst data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-0-0',\n children:[\n { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n {\n label: '\u5f90\u6c47\u533a',\n key: '1-0-3',\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: '2-0-0',\n children:[\n { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n {\n label: '\u5d07\u6587\u533a',\n key: '2-3-0',\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: '3' },\n];\n\nconst datas =[\n { label: '\u4e0a\u6d77\u5e02', key: 0 },\n { label: '\u5317\u4eac\u5e02', key: 1 },\n { label: '\u6210\u90fd\u5e02', key: 2 },\n]\n\nconst Demo = () => {\n\nconst [value,valueSet]=useState([{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' }])\nconst [values,valuesSet]=useState([{ label: '\u5317\u4eac\u5e02', key: 1 }])\nconst [valueSinge,valueSingeSet]=useState([{ label: '\u4e0a\u6d77\u5e02', key: '1-0-0' }])\n\nconst onChange=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n valueSet(selectedAll)\n}\n\nconst onChanges=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\n valuesSet(selectedAll)\n}\n\nconst onChangeSinge=(selectd, selectedAll, isChecked)=>{\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\n valueSingeSet(selectedAll)\n}\n\n return (\n <>\n <Row>\n <Col >\n <label>\u591a\u9009</label>\n <SearchTree\n style={{width:400}}\n allowClear={true}\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\n onChange={onChange}\n value={value}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n </Col>\n </Row>\n <label>\u5355\u9009</label>\n <Row>\n <Col>\n <SearchTree\n style={{width:400}}\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('singe',searchValue)}\n onChange={onChanges}\n value={values}\n options={datas}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n </Col>\n <Col>\n <SearchTree\n style={{width:400}}\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('singe',searchValue)}\n onChange={onChangeSinge}\n value={valueSinge}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n </Col>\n </Row>\n </>\n )\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u81ea\u5b9a\u4e49\u7a7a\u9009\u9879\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport { SearchTree } from 'uiw';\n\nconst Demo = () => {\n return(\n <>\n <SearchTree style={{ width:200 }} />\n <SearchTree\n style={{ width:200,marginTop:5 }}\n emptyOption={<span>\u6682\u65e0\u6570\u636e..</span>}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n </>\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Form\u4e2d\u4f7f\u7528\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React, { useState, useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Form, Button, SearchTree, Card, Row, Col } from 'uiw';;\n\n\nconst Demo = () => {\nconst form=useRef()\n\n const data = [\n {\n label: '\u4e0a\u6d77\u5e02',\n key: '1-0-0',\n children:[\n { label: '\u9ec4\u6d66\u533a', key: '1-0-1' },\n { label: '\u5362\u6e7e\u533a', key: '1-0-2' },\n {\n label: '\u5f90\u6c47\u533a',\n key: '1-0-3',\n children:[\n { label: '\u534a\u6dde\u56ed\u8def\u8857\u9053', key: '1-1-0' },\n { label: '\u5357\u4eac\u4e1c\u8def\u8857\u9053', key: '1-2-0' },\n { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' },\n ]\n },\n ]\n },\n {\n label: '\u5317\u4eac\u5e02',\n key: '2-0-0',\n children:[\n { label: '\u4e1c\u57ce\u533a', key: '2-1-0' },\n { label: '\u897f\u57ce\u533a', key: '2-2-0' },\n {\n label: '\u5d07\u6587\u533a',\n key: '2-3-0',\n children:[\n { label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },\n { label: '\u4f53\u80b2\u9986\u8def\u8857\u9053', key: '2-3-2' },\n { label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' },\n ]\n },\n ]\n },\n { label: '\u6fb3\u95e8', key: '3' },\n ];\n\n const setValue=()=>{\n form.current.setFields({\n searchTree: [{ label: '\u4e1c\u57ce\u533a', key: '2-1-0' }, { label: '\u5916\u6ee9\u8857\u9053', key: '1-3-0' }],\n searchTreeSinge:[{ label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' }]\n })\n }\n\n const resetValue=()=>{\n form.current.resetForm()\n }\n\n return (\n <div>\n <Form\n ref={form}\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.searchTree) {\n errorObj.searchTree = '\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: '\u63d0\u4ea4\u5931\u8d25\uff01', description: '\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01' });\n throw err;\n }\n Notify.success({\n title: '\u63d0\u4ea4\u6210\u529f\uff01',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n searchTree: {\n initialValue:[{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' },{ label: '\u524d\u95e8\u8857\u9053', key: '2-3-3' }],\n children: (\n <SearchTree\n allowClear={true}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n )\n },\n searchTreeSinge: {\n initialValue:[{ label: '\u4e1c\u82b1\u5e02\u8857\u9053', key: '2-3-1' }],\n children: (\n <SearchTree\n multiple={false}\n allowClear={true}\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\n options={data}\n placeholder=\"\u8bf7\u8f93\u5165\u9009\u62e9\"\n />\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col fixed>{fields.searchTree}</Col>\n </Row>\n <Row>\n <Col fixed>{fields.searchTreeSinge}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type=\"primary\" htmlType=\"submit\">\u63d0\u4ea4</Button>\n <Button onClick={setValue} type=\"primary\" >setValue</Button>\n <Button onClick={resetValue} type=\"primary\" >\u91cd\u7f6e</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: 10, marginTop: 10 }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n );\n}\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| allowClear | \u652f\u6301\u6e05\u9664 | Boolean | `false` |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` |\n| multiple | \u662f\u5426\u53ef\u4ee5\u591a\u9009 | Boolean | `true` |\n| value | \u6307\u5b9a\u5f53\u524d\u9009\u4e2d\u7684\u6761\u76ee | [{label:string, key:string}] | - |\n| options | \u4e0b\u62c9\u6570\u636e\u6e90,\u53ef\u53c2\u8003Tree\u4e0b\u62c9\u6570\u636e\u6e90 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\n| placeholder | \u9009\u62e9\u6846\u9ed8\u8ba4\u6587\u5b57 | String | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum{large, default, small } | `default` |\n| onChange | \u9009\u4e2d option\uff0c\u6216 input \u7684 value\uff0c\u8c03\u7528\u6b64\u51fd\u6570 | function(selectd, selectdAll, isChecked)=>void | - |\n| onSearch | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u56de\u8c03 | function(searchValue) | - |\n| loading | \u52a0\u8f7d\u4e2d\u72b6\u6001 | Boolean | `false` |\n| emptyOption | \u81ea\u5b9a\u4e49\u4e0b\u62c9\u9009\u9879\u4e3a\u7a7a\u65f6\u663e\u793a\u5185\u5bb9 | React.ReactNode | [Empty](https://uiwjs.github.io/#/components/empty) |\n\n"}}]);
|
|
2
|
+
//# sourceMappingURL=766.d3dd7e64.chunk.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"static/js/766.d3dd7e64.chunk.js","mappings":"+GAAA","sources":["../../packages/react-search-tree/README.md"],"sourcesContent":["export default \"SearchTree 带搜索的Tree选择控件\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-search-tree/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-search-tree)\\n[](https://npmjs.com/@uiw/react-search-tree)\\n\\n使用树选择控件可以完整展现其中的层级关系，并具有选中状态。新组件 v4.11.7+ 支持。\\n\\n```jsx\\nimport { SearchTree } from 'uiw';\\n// or\\nimport SearchTree from '@uiw/react-search-tree';\\n```\\n\\n### 基础实例\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { SearchTree } from 'uiw';\\n\\nconst data = [\\n {\\n label: '上海市',\\n key: '1-0-0',\\n children:[\\n { label: '黄浦区', key: '1-0-1' },\\n { label: '卢湾区', key: '1-0-2' },\\n {\\n label: '徐汇区',\\n key: '1-0-3',\\n children:[\\n { label: '半淞园路街道', key: '1-1-0' },\\n { label: '南京东路街道', key: '1-2-0' },\\n { label: '外滩街道', key: '1-3-0' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: '2-0-0',\\n children:[\\n { label: '东城区', key: '2-1-0' },\\n { label: '西城区', key: '2-2-0' },\\n {\\n label: '崇文区',\\n key: '2-3-0',\\n children:[\\n { label: '东花市街道', key: '2-3-1' },\\n { label: '体育馆路街道', key: '2-3-2' },\\n { label: '前门街道', key: '2-3-3' },\\n ]\\n },\\n ]\\n },\\n { label: '澳门', key: '3' },\\n];\\n\\nconst datas =[\\n { label: '上海市', key: 0 },\\n { label: '北京市', key: 1 },\\n { label: '成都市', key: 2 },\\n]\\n\\nconst Demo = () => {\\n\\nconst [value,valueSet]=useState([{ label: '东花市街道', key: '2-3-1' }])\\nconst [values,valuesSet]=useState([{ label: '北京市', key: 1 }])\\nconst [valueSinge,valueSingeSet]=useState([{ label: '上海市', key: '1-0-0' }])\\n\\nconst onChange=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\\n valueSet(selectedAll)\\n}\\n\\nconst onChanges=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange',selectedAll, selectd, isChecked)\\n valuesSet(selectedAll)\\n}\\n\\nconst onChangeSinge=(selectd, selectedAll, isChecked)=>{\\n console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)\\n valueSingeSet(selectedAll)\\n}\\n\\n return (\\n <>\\n <Row>\\n <Col >\\n <label>多选</label>\\n <SearchTree\\n style={{width:400}}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('multiple',searchValue)}\\n onChange={onChange}\\n value={value}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n </Col>\\n </Row>\\n <label>单选</label>\\n <Row>\\n <Col>\\n <SearchTree\\n style={{width:400}}\\n multiple={false}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('singe',searchValue)}\\n onChange={onChanges}\\n value={values}\\n options={datas}\\n placeholder=\\\"请输入选择\\\"\\n />\\n </Col>\\n <Col>\\n <SearchTree\\n style={{width:400}}\\n multiple={false}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('singe',searchValue)}\\n onChange={onChangeSinge}\\n value={valueSinge}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n </Col>\\n </Row>\\n </>\\n )\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 自定义空选项\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport { SearchTree } from 'uiw';\\n\\nconst Demo = () => {\\n return(\\n <>\\n <SearchTree style={{ width:200 }} />\\n <SearchTree\\n style={{ width:200,marginTop:5 }}\\n emptyOption={<span>暂无数据..</span>}\\n placeholder=\\\"请输入选择\\\"\\n />\\n </>\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Form中使用\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React, { useState, useEffect, useRef } from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Form, Button, SearchTree, Card, Row, Col } from 'uiw';;\\n\\n\\nconst Demo = () => {\\nconst form=useRef()\\n\\n const data = [\\n {\\n label: '上海市',\\n key: '1-0-0',\\n children:[\\n { label: '黄浦区', key: '1-0-1' },\\n { label: '卢湾区', key: '1-0-2' },\\n {\\n label: '徐汇区',\\n key: '1-0-3',\\n children:[\\n { label: '半淞园路街道', key: '1-1-0' },\\n { label: '南京东路街道', key: '1-2-0' },\\n { label: '外滩街道', key: '1-3-0' },\\n ]\\n },\\n ]\\n },\\n {\\n label: '北京市',\\n key: '2-0-0',\\n children:[\\n { label: '东城区', key: '2-1-0' },\\n { label: '西城区', key: '2-2-0' },\\n {\\n label: '崇文区',\\n key: '2-3-0',\\n children:[\\n { label: '东花市街道', key: '2-3-1' },\\n { label: '体育馆路街道', key: '2-3-2' },\\n { label: '前门街道', key: '2-3-3' },\\n ]\\n },\\n ]\\n },\\n { label: '澳门', key: '3' },\\n ];\\n\\n const setValue=()=>{\\n form.current.setFields({\\n searchTree: [{ label: '东城区', key: '2-1-0' }, { label: '外滩街道', key: '1-3-0' }],\\n searchTreeSinge:[{ label: '前门街道', key: '2-3-3' }]\\n })\\n }\\n\\n const resetValue=()=>{\\n form.current.resetForm()\\n }\\n\\n return (\\n <div>\\n <Form\\n ref={form}\\n onSubmitError={(error) => {\\n if (error.filed) {\\n return { ...error.filed };\\n }\\n return null;\\n }}\\n onSubmit={({initial, current}) => {\\n const errorObj = {};\\n if (!current.searchTree) {\\n errorObj.searchTree = '默认需要选择内容，选择入内容';\\n }\\n if(Object.keys(errorObj).length > 0) {\\n const err = new Error();\\n err.filed = errorObj;\\n Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });\\n throw err;\\n }\\n Notify.success({\\n title: '提交成功！',\\n description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,\\n });\\n }}\\n fields={{\\n searchTree: {\\n initialValue:[{ label: '东花市街道', key: '2-3-1' },{ label: '前门街道', key: '2-3-3' }],\\n children: (\\n <SearchTree\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n )\\n },\\n searchTreeSinge: {\\n initialValue:[{ label: '东花市街道', key: '2-3-1' }],\\n children: (\\n <SearchTree\\n multiple={false}\\n allowClear={true}\\n onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}\\n onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}\\n options={data}\\n placeholder=\\\"请输入选择\\\"\\n />\\n )\\n },\\n }}\\n >\\n {({ fields, state, canSubmit }) => {\\n return (\\n <div>\\n <Row>\\n <Col fixed>{fields.searchTree}</Col>\\n </Row>\\n <Row>\\n <Col fixed>{fields.searchTreeSinge}</Col>\\n </Row>\\n <Row>\\n <Col fixed>\\n <Button disabled={!canSubmit()} type=\\\"primary\\\" htmlType=\\\"submit\\\">提交</Button>\\n <Button onClick={setValue} type=\\\"primary\\\" >setValue</Button>\\n <Button onClick={resetValue} type=\\\"primary\\\" >重置</Button>\\n </Col>\\n </Row>\\n <Row>\\n <Col>\\n <pre style={{ padding: 10, marginTop: 10 }}>\\n {JSON.stringify(state.current, null, 2)}\\n </pre>\\n </Col>\\n </Row>\\n </div>\\n )\\n }}\\n </Form>\\n </div>\\n );\\n}\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| allowClear | 支持清除 | Boolean | `false` |\\n| disabled | 禁用选择器 | Boolean | `false` |\\n| multiple | 是否可以多选 | Boolean | `true` |\\n| value | 指定当前选中的条目 | [{label:string, key:string}] | - |\\n| options | 下拉数据源,可参考Tree下拉数据源 | [{label:string, key:string, children: [{label:string, key:string}] }] | - |\\n| placeholder | 选择框默认文字 | String | - |\\n| size | 选择框尺寸 | Enum{large, default, small } | `default` |\\n| onChange | 选中 option，或 input 的 value，调用此函数 | function(selectd, selectdAll, isChecked)=>void | - |\\n| onSearch | 文本框值变化时回调 | function(searchValue) | - |\\n| loading | 加载中状态 | Boolean | `false` |\\n| emptyOption | 自定义下拉选项为空时显示内容 | React.ReactNode | [Empty](https://uiwjs.github.io/#/components/empty) |\\n\\n\";"],"names":[],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tabs/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-tabs)\n[](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 } from \'uiw\';\n\nclass Demo extends React.Component {\n render() {\n return (\n <Tabs type="line" 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 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}\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## Tabs.Porps
|
|
2
|
-
//# sourceMappingURL=9961.
|
|
1
|
+
"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[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tabs/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-tabs)\n[](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 } from \'uiw\';\n\nclass Demo extends React.Component {\n render() {\n return (\n <Tabs type="line" 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 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}\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'}}]);
|
|
2
|
+
//# sourceMappingURL=9961.9db8f620.chunk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/9961.
|
|
1
|
+
{"version":3,"file":"static/js/9961.9db8f620.chunk.js","mappings":"gHAAA","sources":["../../packages/react-tabs/README.md"],"sourcesContent":["export default \"Tabs 标签页\\n===\\n\\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-tabs/file/README.md)\\n[](https://www.npmjs.com/package/@uiw/react-tabs)\\n[](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 } from 'uiw';\\n\\nclass Demo extends React.Component {\\n render() {\\n return (\\n <Tabs type=\\\"line\\\" activeKey=\\\"1\\\" onTabClick={(tab, key, e) => {\\n console.log(\\\"=>\\\", key, tab);\\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}\\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":""}
|