@uiw/doc 4.21.10 → 4.21.11

package/web/static/js/4010.fbe60b22.chunk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/js/4010.fbe60b22.chunk.js","mappings":"wFAAA,SAASA,EAAoBC,GAC5B,IAAIC,EAAI,IAAIC,MAAM,uBAAyBF,EAAM,KAEjD,MADAC,EAAEE,KAAO,mBACHF,EAEPF,EAAoBK,KAAO,WAAa,MAAO,IAC/CL,EAAoBM,QAAUN,EAC9BA,EAAoBO,GAAK,MACzBC,EAAOC,QAAUT,G,oNCEF,SAASU,EAAT,GAAqF,IAArEC,EAAoE,EAApEA,QAASC,EAA2D,EAA3DA,aAAcC,EAA6C,EAA7CA,QAASC,EAAoC,EAApCA,YAAgBC,GAAoB,YAC3FC,GAAuB,UAAQD,GAyDrC,OAxDIF,IACFG,EAAMC,cAAgB,CACpBC,MAAM,MAAD,OAAQP,EAAR,WACLQ,cAAe,CAAC,OAChBC,IAAKJ,EAAMZ,MAAQ,IAAIiB,QAAQ,UAAW,wCAC1CC,KAAM,mDACNC,aAAa,yBAAD,OAA2BZ,EAA3B,qBACZa,YAAY,yLAAD,OAA2Lb,EAA3L,qFAGXG,IACFE,EAAMS,kBAAoB,CACxBC,MAAO,CACL,sBAAuB,CACrBC,QAAQ,iKAQV,oBAAqB,CACnBA,QAAQ,8BAEV,eAAgB,CACdA,SAAUX,EAAMZ,MAAQ,IAAIiB,QAAQ,UAAW,yCAEjD,YAAa,CACXM,QAAQ,qJAEV,eAAgB,CACdA,QAAS,CACPC,KAAM,WACNC,YAAY,QAAD,OAAUlB,EAAV,WACXC,aAAc,CACZkB,MAAO,UACP,YAAa,UACbC,IAAK,UAEPC,gBAAiB,CACf,oBAAqB,SACrBC,IAAK,UAEPC,QAAS,MACTC,QAAS,CACPC,MAAO,YACPC,MAAO,YACPC,KAAM,wBAERC,aAAc,CAAC,QAAS,WAAY,eAAgB,yBAMvD,SAAC,KAAD,kBAAiBvB,GAAjB,IAAwBJ,aAAcA,EAAc4B,MAAO,CAAEC,aAAc,M,eC7DrE,SAAS,IAA2B,IAA1BzB,EAAyB,uDAAJ,GACpC0B,EAAS1B,EAAT0B,KACFC,EAAM,QAAQL,KAAKI,GAAQ,IAAMA,EAA3B,mDAA8EA,GAC1F,OACE,UAAC,EAAAE,SAAD,wGAEGD,IACC,cAAGE,KAAMF,EAAKG,OAAO,SAASC,IAAI,sBAAlC,+DAIF,mBACA,cAAGF,KAAK,sCAAsCC,OAAO,SAASC,IAAI,sBAAlE,uCAGA,SAAC,EAAAC,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,0CAAlD,8BAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,+BAAlD,qBAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,+BAAlD,kBAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,mCAAlD,uBAGA,SAAC,EAAAG,QAAD,CAASC,KAAK,cACd,cAAGH,OAAO,SAASC,IAAI,sBAAsBF,KAAK,sBAAlD,yCCtCN,MAA0B,uBAA1B,EAA4D,wB,oBCYtDK,EAAa,SAAbA,IAAuD,IAAzCC,EAAwC,uDAA1B,GAAI/C,EAAsB,uDAAP,GAQnD,OAPA+C,EAAKC,SAAQ,SAACC,GACM,SAAdA,EAAKJ,KACP7C,GAAQiD,EAAKC,MACJD,EAAKE,UAAYC,MAAMC,QAAQJ,EAAKE,YAC7CnD,GAAQ8C,EAAWG,EAAKE,cAGrBnD,GAGM,SAASsD,EAAc1C,GACpC,IAAQ2C,EAAmC3C,EAAnC2C,WAAY/C,EAAuBI,EAAvBJ,aAAc8B,EAAS1B,EAAT0B,KAClC,GAA0BkB,EAAAA,EAAAA,UAAS,IAAnC,eAAOC,EAAP,KAAcC,EAAd,KAEMnD,EAAUoD,EAAAA,IAAe,QAY/B,OAXAC,EAAAA,EAAAA,YAAU,WACJL,GACFA,IACGM,MAAK,SAACC,GACLJ,EAASI,MAEVC,OAAM,iBAGV,IAEEN,GAKH,4BACE,SAAC,IAAD,CACEO,OAAQP,EACRQ,UAAWC,EACXC,WAAY,CASVnE,KAAM,YAAiC,IAA9BoE,EAA6B,EAA7BA,OAAQnB,EAAqB,EAArBA,KAASrC,GAAY,YACpC,EAAiFA,EAAzEyD,EAAR,EAAQA,UAAWC,EAAnB,EAAmBA,SAAUC,EAA7B,EAA6BA,SAAUC,EAAvC,EAAuCA,QAASC,EAAhD,EAAgDA,OAAQhE,EAAxD,EAAwDA,QAASC,EAAjE,EAAiEA,YACjE,GAAI0D,EACF,OAAO,2BAAUxD,IAEnB,IAAM8D,EAAS,CACbL,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAhE,QAAAA,EACAC,YAAAA,GAEF,OAAgF,IAA5EiE,OAAO1E,KAAKyE,GAAQE,QAAO,SAACpD,GAAD,YAA2BqD,IAAjBH,EAAOlD,MAAqBsD,QAC5D,2BAAUlE,KAGjB,SAACN,EAAD,CACEC,QAASA,EACTP,KAAM8C,EAAWG,EAAKE,UACtB3C,aAAcA,EACR6D,UAAAA,EAAWC,SAAAA,EAAUC,SAAAA,EAAUC,QAAAA,EAASC,OAAAA,EAAQhE,QAAAA,EAASC,YAAAA,SAMzE,gBAAKuD,UAAWC,EAAhB,UACE,SAACa,EAAD,CAAQzC,KAAMA,SA9CX,O,yHCrCX,qBAAe,OACb,SAAC,IAAD,CACEA,KAAK,yEACL9B,aAAc,CAAEwE,KAAAA,EAAAA,KAAMpC,QAAAA,EAAAA,SACtBW,YAAU,iBAAE,oGACO,gCADP,cACJ0B,EADI,yBAEHA,EAAGC,SAAWD,GAFX","sources":["../../node_modules/@babel/standalone|sync|nonrecursive","components/Markdown/Code.tsx","components/Markdown/Footer.tsx","webpack://website/./src/components/Markdown/index.module.less?6e49","components/Markdown/index.tsx","routes/components/tabs/index.tsx"],"sourcesContent":["function webpackEmptyContext(req) {\n\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\te.code = 'MODULE_NOT_FOUND';\n\tthrow e;\n}\nwebpackEmptyContext.keys = function() { return []; };\nwebpackEmptyContext.resolve = webpackEmptyContext;\nwebpackEmptyContext.id = 84934;\nmodule.exports = webpackEmptyContext;","import CodePreview, { CodePreviewProps } from '@uiw/react-code-preview';\n\nexport interface CodeProps extends CodePreviewProps {\n  code: string;\n  version: string;\n  codePen: boolean;\n  codeSandbox?: boolean;\n  dependencies: any;\n}\n\nexport default function Code({ version, dependencies, codePen, codeSandbox, ...other }: CodeProps) {\n  const props: CodePreviewProps = { ...other };\n  if (codePen) {\n    props.codePenOption = {\n      title: `uiw${version} - demo`,\n      includeModule: ['uiw'],\n      js: (props.code || '').replace('_mount_', 'document.getElementById(\"container\")'),\n      html: '<div id=\"container\" style=\"padding: 24px\"></div>',\n      css_external: `https://unpkg.com/uiw@${version}/dist/uiw.min.css`,\n      js_external: `https://unpkg.com/react@17.x/umd/react.development.js;https://unpkg.com/react-dom@17.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/uiw@${version}/dist/uiw.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.1.3/index.js`,\n    };\n  }\n  if (codeSandbox) {\n    props.codeSandboxOption = {\n      files: {\n        'sandbox.config.json': {\n          content: `{\n            \"template\": \"node\",\n            \"container\": {\n              \"startScript\": \"start\",\n              \"node\": \"14\"\n            }\n          }`,\n        },\n        'public/index.html': {\n          content: `<div id=\"container\"></div>`,\n        },\n        'src/index.js': {\n          content: (props.code || '').replace('_mount_', 'document.getElementById(\"container\")'),\n        },\n        '.kktrc.js': {\n          content: `import lessModules from \"@kkt/less-modules\";\\nexport default (conf, env, options) => {\\nconf = lessModules(conf, env, options);\\nreturn conf;\\n};`,\n        },\n        'package.json': {\n          content: {\n            name: 'uiw-demo',\n            description: `uiw v${version} - demo`,\n            dependencies: {\n              react: '^17.0.2',\n              'react-dom': '^17.0.2',\n              uiw: 'latest',\n            },\n            devDependencies: {\n              '@kkt/less-modules': '~7.1.1',\n              kkt: '~7.1.5',\n            },\n            license: 'MIT',\n            scripts: {\n              start: 'kkt start',\n              build: 'kkt build',\n              test: 'kkt test --env=jsdom',\n            },\n            browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],\n          },\n        },\n      },\n    };\n  }\n  return <CodePreview {...props} dependencies={dependencies} style={{ marginBottom: 0 }} />;\n}\n","import React, { Fragment } from 'react';\nimport { Divider } from 'uiw';\n\nexport type FooterProps = {\n  path?: string;\n};\n\nexport default function (props: FooterProps = {}) {\n  const { path } = props;\n  const url = /^http/.test(path || '') ? path : `https://github.com/uiwjs/uiw/blob/master/${path}`;\n  return (\n    <Fragment>\n      犯了错误还是想对文件做出贡献？\n      {url && (\n        <a href={url} target=\"_blank\" rel=\"noopener noreferrer\">\n          在Github上编辑本页！\n        </a>\n      )}\n      <br />\n      <a href=\"https://github.com/uiwjs/uiw/issues\" target=\"_blank\" rel=\"noopener noreferrer\">\n        反馈建议\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/uiwjs/uiw/issues/new\">\n        提交bug\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/uiwjs/uiw\">\n        Github\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/kktjs/kkt\">\n        kkt\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/kktjs/kkt-ssr\">\n        @kkt/ssr\n      </a>\n      <Divider type=\"vertical\" />\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://uiw.gitee.io\">\n        国内镜像\n      </a>\n    </Fragment>\n  );\n}\n","// extracted by mini-css-extract-plugin\nexport default {\"docinfo\":\"index_docinfo__3Vx8S\",\"markdown\":\"index_markdown__hcQCp\"};","import { useEffect, useState } from 'react';\nimport MarkdownPreview from '@uiw/react-markdown-preview';\nimport pkg from 'uiw/package.json';\nimport Code from './Code';\nimport Footer from './Footer';\nimport styles from './index.module.less';\n\nexport type CreatePageProps<T> = {\n  dependencies?: T;\n  path: string;\n  renderPage?: () => Promise<string>;\n};\n\nconst getCodeStr = (data: any[] = [], code: string = '') => {\n  data.forEach((node) => {\n    if (node.type === 'text') {\n      code += node.value;\n    } else if (node.children && Array.isArray(node.children)) {\n      code += getCodeStr(node.children);\n    }\n  });\n  return code;\n};\n\nexport default function CreatePage<T>(props: CreatePageProps<T>) {\n  const { renderPage, dependencies, path } = props;\n  const [mdStr, setMdStr] = useState('');\n\n  const version = pkg.version || '2.0.0';\n  useEffect(() => {\n    if (renderPage) {\n      renderPage()\n        .then((str) => {\n          setMdStr(str);\n        })\n        .catch(() => {});\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (!mdStr) {\n    return null;\n  }\n\n  return (\n    <div>\n      <MarkdownPreview\n        source={mdStr}\n        className={styles.markdown}\n        components={{\n          /**\n           * bordered 边框\n           * bgWhite 设置代码预览背景白色，否则为格子背景。\n           * noCode 不显示代码编辑器。\n           * noPreview 不显示代码预览效果。\n           * noScroll 预览区域不显示滚动条。\n           * codePen 显示 Codepen 按钮，要特别注意 包导入的问题，实例中的 import 主要用于 Codepen 使用。\n           */\n          code: ({ inline, node, ...props }) => {\n            const { noPreview, bordered, noScroll, bgWhite, noCode, codePen, codeSandbox } = props as any;\n            if (inline) {\n              return <code {...props} />;\n            }\n            const config = {\n              noPreview,\n              bordered,\n              noScroll,\n              bgWhite,\n              noCode,\n              codePen,\n              codeSandbox,\n            } as any;\n            if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) {\n              return <code {...props} />;\n            }\n            return (\n              <Code\n                version={version}\n                code={getCodeStr(node.children)}\n                dependencies={dependencies}\n                {...{ noPreview, bordered, noScroll, bgWhite, noCode, codePen, codeSandbox }}\n              />\n            );\n          },\n        }}\n      />\n      <div className={styles.docinfo}>\n        <Footer path={path} />\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\nimport { Tabs, Divider } from 'uiw';\nimport Markdown from '../../../components/Markdown';\n\nexport default () => (\n  <Markdown\n    path=\"https://github.com/uiwjs/uiw/tree/master/packages/react-tabs/README.md\"\n    dependencies={{ Tabs, Divider }}\n    renderPage={async () => {\n      const md = await import('uiw/node_modules/@uiw/react-tabs/README.md');\n      return md.default || md;\n    }}\n  />\n);\n"],"names":["webpackEmptyContext","req","e","Error","code","keys","resolve","id","module","exports","Code","version","dependencies","codePen","codeSandbox","other","props","codePenOption","title","includeModule","js","replace","html","css_external","js_external","codeSandboxOption","files","content","name","description","react","uiw","devDependencies","kkt","license","scripts","start","build","test","browserslist","style","marginBottom","path","url","Fragment","href","target","rel","Divider","type","getCodeStr","data","forEach","node","value","children","Array","isArray","CreatePage","renderPage","useState","mdStr","setMdStr","pkg","useEffect","then","str","catch","source","className","styles","components","inline","noPreview","bordered","noScroll","bgWhite","noCode","config","Object","filter","undefined","length","Footer","Tabs","md","default"],"sourceRoot":""}

package/web/static/js/7266.bba9c51f.chunk.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7266],{7266:function(t,e,n){n.r(e),e.default="Layout \u5e03\u5c40\n===\n\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-layout.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-layout)\n[![Build & Deploy](https://github.com/uiwjs/react-layout/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-layout/actions/workflows/ci.yml)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-layout/file/README.md)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-layout.svg)](https://www.npmjs.com/package/@uiw/react-layout)\n[![Coverage Status](https://uiwjs.github.io/react-layout/badges.svg)](https://uiwjs.github.io/react-layout/coverage/lcov-report/)\n[![Open in Gitpod](https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod)](https://gitpod.io/#https://github.com/uiwjs/react-layout)\n\n\u534f\u52a9\u8fdb\u884c\u9875\u9762\u7ea7\u6574\u4f53\u5e03\u5c40\u3002\n\n> \u26a0\ufe0f \u6ce8\u610f\uff1a\u91c7\u7528 flex \u5e03\u5c40\u5b9e\u73b0\uff0c\u8bf7\u6ce8\u610f[\u6d4f\u89c8\u5668\u517c\u5bb9\u6027](http://caniuse.com/#search=flex)\u95ee\u9898\u3002\n\x3c!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;--\x3e\n\n\x3c!--rehype--\x3e\n```jsx\nimport { Layout } from 'uiw';\n// or\nimport Layout from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n// or\nimport Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';\nLayout.Header = LayoutHeader\nLayout.Content = LayoutContent\nLayout.Sider = LayoutSider\nLayout.Footer = LayoutFooter\n```\n\n## \u57fa\u672c\u7528\u6cd5\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n  const [collapsed, setCollapsed] = React.useState(false)\n  return (\n    <div>\n      <Layout style={{ marginBottom: 20 }}>\n        <Header style={stylHeader}>Header</Header>\n        <Layout>\n          <Sider style={stylSider}>Sider</Sider>\n          <Content style={stylConten}>Content</Content>\n        </Layout>\n        <Footer>Footer</Footer>\n      </Layout>\n\n      <Layout>\n        <Header style={stylHeader}>Header</Header>\n        <Layout>\n          <Content style={stylConten}>Content</Content>\n          <Sider style={stylSider}>Sider</Sider>\n        </Layout>\n        <Footer>Footer</Footer>\n      </Layout>\n\n      <Layout>\n        <LayoutHeader style={stylHeader}>Header</LayoutHeader>\n        <Layout>\n          <LayoutContent style={stylConten}>Content</LayoutContent>\n          <LayoutSider style={stylSider}>Sider</LayoutSider>\n        </Layout>\n        <LayoutFooter>Footer</LayoutFooter>\n      </Layout>\n    </div>\n  );\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u4e0a\u4e2d\u4e0b\u5e03\u5c40\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n  const [collapsed, setCollapsed] = React.useState(false)\n  return (\n    <Layout style={{ marginBottom: 20 }}>\n      <Header style={stylHeader}>Header</Header>\n      <Content style={stylConten}>Content</Content>\n      <Footer>Footer</Footer>\n    </Layout>\n  );\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## \u5de6\u53f3\u5e03\u5c40\n\n\x3c!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true--\x3e\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Layout from '@uiw/react-layout';\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst stylHeader = { color: '#fff' }\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\n\nfunction Demo() {\n  const [collapsed, setCollapsed] = React.useState(false)\n  return (\n    <Layout style={{ marginBottom: 20 }}>\n      <Sider collapsed={collapsed} style={stylSider}>Sider</Sider>\n      <Layout>\n        <Header style={stylHeader}>\n          <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button>\n        </Header>\n        <Content style={stylConten}>Content</Content>\n        <Footer>Footer</Footer>\n      </Layout>\n    </Layout>\n  );\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Layout\n\n\u5e03\u5c40\u5bb9\u5668\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957 `Header` `Sider` `Content` `Footer` \u6216 `Layout` \u672c\u8eab\uff0c\u53ef\u4ee5\u653e\u5728\u4efb\u4f55\u7236\u5bb9\u5668\u4e2d\u3002\n\n* `Header`\uff1a\u9876\u90e8\u5e03\u5c40\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n* `Sider`\uff1a\u4fa7\u8fb9\u680f\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\u53ca\u57fa\u672c\u529f\u80fd\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n* `Content`\uff1a\u5185\u5bb9\u90e8\u5206\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n* `Footer`\uff1a\u5e95\u90e8\u5e03\u5c40\uff0c\u81ea\u5e26\u9ed8\u8ba4\u6837\u5f0f\uff0c\u5176\u4e0b\u53ef\u5d4c\u5957\u4efb\u4f55\u5143\u7d20\uff0c\u53ea\u80fd\u653e\u5728 `Layout` \u4e2d\u3002\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u5bb9\u5668 className | string | - |\n| style | \u6307\u5b9a\u6837\u5f0f | CSSProperties | - |\n| theme | \u4e3b\u9898\u989c\u8272 | `light`\u3001`dark` | `dark` |\n| hasSider | \u8868\u793a\u5b50\u5143\u7d20\u91cc\u6709 Sider\uff0c\u4e00\u822c\u4e0d\u7528\u6307\u5b9a\u3002\u53ef\u7528\u4e8e\u670d\u52a1\u7aef\u6e32\u67d3\u65f6\u907f\u514d\u6837\u5f0f\u95ea\u52a8 | boolean | - |\n\n## Layout.Sider\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u5bb9\u5668 className | string | - |\n| style | \u6307\u5b9a\u6837\u5f0f | CSSProperties | - |\n| collapsed | \u5f53\u524d\u6536\u8d77\u72b6\u6001 | boolean | - |\n| collapsedWidth | \u6536\u7f29\u5bbd\u5ea6\uff0c\u8bbe\u7f6e\u4e3a `0` | boolean | `80` |\n| width | \u5bbd\u5ea6 | number/string | 200 |\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n<a href=\"https://github.com/jaywcjlove/github-action-contributors/graphs/contributors\">\n  <img src=\"https://jaywcjlove.github.io/github-action-contributors/CONTRIBUTORS.svg\" />\n</a>\n\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n### License\n\nLicensed under the MIT License.\n"}}]);
-//# sourceMappingURL=7266.bba9c51f.chunk.js.map

package/web/static/js/7266.bba9c51f.chunk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/js/7266.bba9c51f.chunk.js","mappings":"+GAAA","sources":["../../node_modules/@uiw/react-layout/README-zh.md"],"sourcesContent":["export default \"Layout 布局\\n===\\n\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-layout.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-layout)\\n[![Build & Deploy](https://github.com/uiwjs/react-layout/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-layout/actions/workflows/ci.yml)\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-layout/file/README.md)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-layout.svg)](https://www.npmjs.com/package/@uiw/react-layout)\\n[![Coverage Status](https://uiwjs.github.io/react-layout/badges.svg)](https://uiwjs.github.io/react-layout/coverage/lcov-report/)\\n[![Open in Gitpod](https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod)](https://gitpod.io/#https://github.com/uiwjs/react-layout)\\n\\n协助进行页面级整体布局。\\n\\n> ⚠️ 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。\\n<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->\\n\\n<!--rehype-->\\n```jsx\\nimport { Layout } from 'uiw';\\n// or\\nimport Layout from '@uiw/react-layout';\\nconst { Header, Footer, Sider, Content } = Layout;\\n// or\\nimport Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';\\nLayout.Header = LayoutHeader\\nLayout.Content = LayoutContent\\nLayout.Sider = LayoutSider\\nLayout.Footer = LayoutFooter\\n```\\n\\n## 基本用法\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';\\nconst { Header, Footer, Sider, Content } = Layout;\\n\\nconst stylHeader = { color: '#fff' }\\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\\n\\nfunction Demo() {\\n  const [collapsed, setCollapsed] = React.useState(false)\\n  return (\\n    <div>\\n      <Layout style={{ marginBottom: 20 }}>\\n        <Header style={stylHeader}>Header</Header>\\n        <Layout>\\n          <Sider style={stylSider}>Sider</Sider>\\n          <Content style={stylConten}>Content</Content>\\n        </Layout>\\n        <Footer>Footer</Footer>\\n      </Layout>\\n\\n      <Layout>\\n        <Header style={stylHeader}>Header</Header>\\n        <Layout>\\n          <Content style={stylConten}>Content</Content>\\n          <Sider style={stylSider}>Sider</Sider>\\n        </Layout>\\n        <Footer>Footer</Footer>\\n      </Layout>\\n\\n      <Layout>\\n        <LayoutHeader style={stylHeader}>Header</LayoutHeader>\\n        <Layout>\\n          <LayoutContent style={stylConten}>Content</LayoutContent>\\n          <LayoutSider style={stylSider}>Sider</LayoutSider>\\n        </Layout>\\n        <LayoutFooter>Footer</LayoutFooter>\\n      </Layout>\\n    </div>\\n  );\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 上中下布局\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport Layout from '@uiw/react-layout';\\nconst { Header, Footer, Sider, Content } = Layout;\\n\\nconst stylHeader = { color: '#fff' }\\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\\n\\nfunction Demo() {\\n  const [collapsed, setCollapsed] = React.useState(false)\\n  return (\\n    <Layout style={{ marginBottom: 20 }}>\\n      <Header style={stylHeader}>Header</Header>\\n      <Content style={stylConten}>Content</Content>\\n      <Footer>Footer</Footer>\\n    </Layout>\\n  );\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## 左右布局\\n\\n<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport Layout from '@uiw/react-layout';\\nconst { Header, Footer, Sider, Content } = Layout;\\n\\nconst stylHeader = { color: '#fff' }\\nconst stylSider = { background: '#484a4e', color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center' }\\nconst stylConten = { background: '#108ee9', minHeight: 120, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }\\n\\nfunction Demo() {\\n  const [collapsed, setCollapsed] = React.useState(false)\\n  return (\\n    <Layout style={{ marginBottom: 20 }}>\\n      <Sider collapsed={collapsed} style={stylSider}>Sider</Sider>\\n      <Layout>\\n        <Header style={stylHeader}>\\n          <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? '>>' : '<<'}</button>\\n        </Header>\\n        <Content style={stylConten}>Content</Content>\\n        <Footer>Footer</Footer>\\n      </Layout>\\n    </Layout>\\n  );\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Layout\\n\\n布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。\\n\\n* `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\\n* `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。\\n* `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\\n* `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| className | 容器 className | string | - |\\n| style | 指定样式 | CSSProperties | - |\\n| theme | 主题颜色 | `light`、`dark` | `dark` |\\n| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |\\n\\n## Layout.Sider\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| className | 容器 className | string | - |\\n| style | 指定样式 | CSSProperties | - |\\n| collapsed | 当前收起状态 | boolean | - |\\n| collapsedWidth | 收缩宽度，设置为 `0` | boolean | `80` |\\n| width | 宽度 | number/string | 200 |\\n\\n## Contributors\\n\\nAs always, thanks to our amazing contributors!\\n\\n<a href=\\\"https://github.com/jaywcjlove/github-action-contributors/graphs/contributors\\\">\\n  <img src=\\\"https://jaywcjlove.github.io/github-action-contributors/CONTRIBUTORS.svg\\\" />\\n</a>\\n\\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\\n\\n### License\\n\\nLicensed under the MIT License.\\n\";"],"names":[],"sourceRoot":""}

package/web/static/js/9961.9db8f620.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 } 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'}}]);
-//# sourceMappingURL=9961.9db8f620.chunk.js.map

package/web/static/js/9961.9db8f620.chunk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/js/9961.9db8f620.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 } 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":""}