npm - @uiw/doc - Versions diffs - 4.21.10 → 4.21.11 - Mend

@uiw/doc 4.21.10 → 4.21.11

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.

Files changed (24) hide show

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

	@@ -0,0 +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[![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'}}]);
2	+ //# sourceMappingURL=9961.46e9e861.chunk.js.map

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

@@ -0,0 +1 @@

+ {"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\\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\\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\\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\\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\\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":""}