(window.webpackJsonp=window.webpackJsonp||[]).push([[132],{694:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return O});var t=s(580),p=s.n(t),o=s(23),e=s.n(o),c=s(24),l=s.n(c),u=s(25),k=s.n(u),i=s(26),r=s.n(i),d=s(32),g=s.n(d),b=s(27),h=s.n(b),m=s(28),v=s.n(m),T=s(0),y=s.n(T),f=s(111),w=s(82),C=function(){var n=w.zb.TabPanel,a=function(a){function s(){var n,a;e()(this,s);for(var t=arguments.length,p=new Array(t),o=0;o¶Tabs\n

Tabs is used to switch different view in one page.

¶Demos

'}),y.a.createElement(A,{title:"Basic Mode",id:"Demobasic",src:'import { Tabs } from \'zent\';\nconst TabPanel = Tabs.TabPanel;\n\nclass Simple extends React.Component {\n state = {\n activeId: \'2\',\n };\n\n onTabChange = id => {\n this.setState({\n activeId: id,\n });\n };\n\n render() {\n return (\n <Tabs activeId={this.state.activeId} onChange={this.onTabChange} align="right">\n <TabPanel tab={<span>Tab One</span>} id="1" disabled>\n <div>The content of tab one.</div>\n </TabPanel>\n <TabPanel tab="Tab Two" id="2">\n <div>The content of tab two.</div>\n </TabPanel>\n <TabPanel tab="Tab Three" id="3">\n <div>The content of tab three.</div>\n </TabPanel>\n </Tabs>\n );\n }\n}\n\nReactDOM.render(<Simple />, mountNode);'},y.a.createElement(C)),y.a.createElement(A,{title:"Tabs without using TabPanel",id:"Demonotabpanel",src:'import { Tabs } from \'zent\';\n\nclass Simple extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n activeId: \'2\',\n tabs: [\n {\n title: \'Tab One\',\n key: \'1\',\n disabled: true,\n },\n {\n title: \'Tab Two\',\n key: \'2\',\n },\n {\n title: \'Tab Three\',\n key: \'3\',\n },\n ],\n };\n }\n\n onTabChange = id => {\n this.setState({\n activeId: id,\n });\n };\n\n render() {\n return (\n <Tabs\n activeId={this.state.activeId}\n onChange={this.onTabChange}\n tabs={this.state.tabs}\n />\n );\n }\n}\n\nReactDOM.render(<Simple />, mountNode);'},y.a.createElement(E)),y.a.createElement(A,{title:"Normal、Card、Button Types",id:"Demotypes",src:'import { Tabs } from \'zent\';\nconst TabPanel = Tabs.TabPanel;\n\nclass Simple extends React.Component {\n state = {\n activeId: \'2\',\n };\n\n onTabChange = id => {\n this.setState({\n activeId: id,\n });\n };\n\n render() {\n const panels = [\n <TabPanel key="1" tab={<span>Tab One</span>} id="1" disabled>\n <div>The content of tab one.</div>\n </TabPanel>,\n <TabPanel key="2" tab="Tab Two" id="2">\n <div>The content of tab two.</div>\n </TabPanel>,\n <TabPanel key="3" tab="Tab Three" id="3">\n <div>The content of tab three.</div>\n </TabPanel>,\n ];\n return (\n <div className="zent-tabs-demo">\n <Tabs\n activeId={this.state.activeId}\n onChange={this.onTabChange}\n type="normal"\n >\n {panels}\n </Tabs>\n <Tabs\n activeId={this.state.activeId}\n onChange={this.onTabChange}\n type="card"\n >\n {panels}\n </Tabs>\n <div>\n <Tabs\n activeId={this.state.activeId}\n onChange={this.onTabChange}\n type="button"\n >\n {panels}\n </Tabs>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(<Simple />, mountNode);'},y.a.createElement(I)),y.a.createElement(A,{title:"Extra Content",id:"Demonavextracontent",src:'import { Tabs } from \'zent\';\nconst TabPanel = Tabs.TabPanel;\nlet uniqId = 4;\n\nclass Simple extends React.Component {\n state = {\n activeId: \'2\',\n panels: [\n {\n tab: <span>Tab1</span>,\n id: \'1\',\n disabled: true,\n content: \'The content of tab1.\',\n },\n {\n tab: <span>Tab2</span>,\n id: \'2\',\n content: <div>The content of tab2.</div>,\n },\n ],\n };\n\n onTabChange = id => {\n this.setState({\n activeId: id,\n });\n };\n\n renderPanels() {\n let { panels } = this.state;\n return panels.map(p => {\n return (\n <TabPanel {...p} key={p.id}>\n {p.content}\n </TabPanel>\n );\n });\n }\n\n render() {\n return (\n <div className="zent-tabs-demo">\n <Tabs\n activeId={this.state.activeId}\n onChange={this.onTabChange.bind(this)}\n navExtraContent={\n <div style={{ whiteSpace: \'nowrap\' }}>{`Current shop`}</div>\n }\n >\n {this.renderPanels()}\n </Tabs>\n </div>\n );\n }\n}\n\nReactDOM.render(<Simple />, mountNode);'},y.a.createElement(P)),y.a.createElement(A,{title:"Dynamic Add and Delete",id:"Demoaddanddel",src:'import { Tabs, Icon } from \'zent\';\nconst TabPanel = Tabs.TabPanel;\nlet uniqId = 4;\n\nclass Simple extends React.Component {\n state = {\n activeId: \'2\',\n panels: [\n {\n tab: <span>Tab1</span>,\n id: \'1\',\n disabled: true,\n content: \'The content of tab1.\',\n },\n {\n tab: <span>Tab2</span>,\n id: \'2\',\n content: <div>The content of tab2.</div>,\n },\n ],\n };\n\n onTabAdd = () => {\n let { panels } = this.state;\n panels.push({\n tab: `Tab${uniqId}`,\n id: `${uniqId++}`,\n content: Date.now(),\n });\n this.setState({\n panels,\n });\n };\n\n onTabDel = id => {\n const { panels } = this.state;\n this.setState({\n panels: panels.filter((p, i) => p.id !== id),\n });\n };\n\n onTabChange = id => {\n this.setState({\n activeId: id,\n });\n };\n\n renderPanels() {\n let { panels } = this.state;\n return panels.map(p => {\n return (\n <TabPanel {...p} key={p.id}>\n {p.content}\n </TabPanel>\n );\n });\n }\n\n render() {\n const panels = this.renderPanels();\n return (\n <div className="zent-tabs-demo">\n <Tabs\n candel\n activeId={this.state.activeId}\n onChange={this.onTabChange}\n onDelete={this.onTabDel}\n navExtraContent={<Icon type="plus" className="zent-tabs-add-btn" onClick={this.onTabAdd} />}\n >\n {panels}\n </Tabs>\n <Tabs\n candel\n type="card"\n activeId={this.state.activeId}\n onChange={this.onTabChange}\n onDelete={this.onTabDel}\n navExtraContent={<Icon type="plus" className="zent-tabs-add-btn" onClick={this.onTabAdd} />}\n >\n {panels}\n </Tabs>\n <div style={{\n marginTop: 16\n }}>candel and onDelete props only avaliable in normal and card type</div>\n </div>\n );\n }\n}\n\nReactDOM.render(<Simple />, mountNode);'},y.a.createElement(z)),y.a.createElement(A,{title:"Stretch",id:"Demostretch",src:'import { Tabs, Icon } from \'zent\';\nconst TabPanel = Tabs.TabPanel;\nlet uniqId = 4;\n\nclass Simple extends React.Component {\n state = {\n activeId: \'2\',\n panels: [\n {\n tab: <span>Tab1</span>,\n id: \'1\',\n disabled: true,\n content: \'The content of tab1.\',\n },\n {\n tab: <span>Tab2</span>,\n id: \'2\',\n content: <div>The content of tab2.</div>,\n },\n ],\n };\n\n onTabAdd = () => {\n let { panels } = this.state;\n panels.push({\n tab: `Tab${uniqId}`,\n id: `${uniqId++}`,\n content: Date.now(),\n });\n this.setState({\n panels,\n });\n };\n\n onTabDel = id => {\n const { panels } = this.state;\n this.setState({\n panels: panels.filter((p, i) => p.id !== id),\n });\n };\n\n onTabChange = id => {\n this.setState({\n activeId: id,\n });\n };\n\n renderPanels() {\n let { panels } = this.state;\n return panels.map(p => {\n return (\n <TabPanel {...p} key={p.id}>\n {p.content}\n </TabPanel>\n );\n });\n }\n\n render() {\n const panels = this.renderPanels();\n return (\n <div className="zent-tabs-demo">\n <Tabs\n candel\n stretch\n activeId={this.state.activeId}\n onChange={this.onTabChange}\n onDelete={this.onTabDel}\n navExtraContent={<Icon type="plus" className="zent-tabs-add-btn" onClick={this.onTabAdd} />}\n >\n {panels}\n </Tabs>\n <Tabs\n candel\n stretch\n type="card"\n activeId={this.state.activeId}\n onChange={this.onTabChange}\n onDelete={this.onTabDel}\n navExtraContent={<Icon type="plus" className="zent-tabs-add-btn" onClick={this.onTabAdd} />}\n >\n {panels}\n </Tabs>\n <Tabs\n stretch\n type="button"\n activeId={this.state.activeId}\n onChange={this.onTabChange}\n navExtraContent={<Icon type="plus" className="zent-tabs-add-btn" onClick={this.onTabAdd} />}\n >\n {panels}\n </Tabs>\n </div>\n );\n }\n}\n\nReactDOM.render(<Simple />, mountNode);'},y.a.createElement(D)),y.a.createElement(A,{title:"Vertical Mode",id:"Demovertical",src:'import { VerticalTabs } from \'zent\';\n\nconst { TabPanel, Divide } = VerticalTabs;\n\nclass Simple extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n activeId: \'2\',\n };\n }\n\n onTabChange = id => {\n this.setState({\n activeId: id,\n });\n };\n\n render() {\n return (\n <div className="zent-tabs-demo">\n <VerticalTabs\n activeId={this.state.activeId}\n onChange={this.onTabChange}\n >\n <TabPanel tab={<span>Tab1</span>} id="1" disabled>\n <div>The content of tab one.</div>\n </TabPanel>\n <TabPanel tab="Tab2" id="2">\n <div>The content of tab two.</div>\n </TabPanel>\n <Divide />\n <TabPanel tab="Tab3" id="3">\n <div>The content of tab three.</div>\n </TabPanel>\n </VerticalTabs>\n <VerticalTabs\n tabs={[\n {\n title: \'Tab1\',\n key: \'1\',\n disabled: true,\n },\n {\n title: \'Tab2\',\n key: \'2\',\n },\n {\n divide: true,\n },\n {\n title: \'Tab3\',\n key: \'3\',\n },\n ]}\n activeId={this.state.activeId}\n onChange={this.onTabChange}\n scrollHeight={100}\n />\n <div>Can\'t use delete, align, stretch and extra content feature in vertical mode</div>\n </div>\n );\n }\n}\n\nReactDOM.render(<Simple />, mountNode);'},y.a.createElement(N)),y.a.createElement(S,{html:'

¶API

¶Tabs

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Property	Description	Type	Default	Alternative	Required
activeId	The id of the active tab	string \n\|\n number	`\'\'`		yes
onChange	The callback function that is triggered when the tab is active	(id: string \n\|\n number) => any			yes
tabs	The config of tabs when not using Panel.	Array<ITab\n>			no
className	The custom classname	string			no
type	The type of tabs	string	`\'normal\'`	`\'card\'`\n, \n`\'button\'`	no
navExtraContent	Nav add extra content	React.ReactNode			no
stretch	Is tab stretch to fill content space	boolean	`false`		no
onDelete	The callback function that is triggered when the tab is closed.	(id: string \n\|\n number) => any			no
candel	Whether the tab can be deleted.	bool	`false`		no
unmountPanelOnHide	unmount TabPanel on inactive instead of using \n`display: none`\n style cover	bool	`false`		no

Paramerter type of tabs：

interface ITab {\n  key: string | number; // 同TabPanel id\n  title: ReactNode; // 同TabPanel tab\n  disabled?: boolean; // 同TabPanel disabled\n}

¶VerticalTabs

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Property	Description	Type	Default	Required
activeId	The id of the active tab	string \n\|\n number	`\'\'`	yes
onChange	The callback function that is triggered when the tab is active	(id: string \n\|\n number) => any		yes
tabs	The config of tabs when not using Panel.	Array<IVerticalTab\n>		no
className	The custom classname	string		no
scrollHeight	The max height of the scrollable space	string \n\|\n number		no
unmountPanelOnHide	unmount TabPanel on inactive instead of using \n`display: none`\n style cover	bool	`false`	no

Paramerter type of tabs：

type IVerticalTab = ITab | { divide: true };

¶TabPanel

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Property	Description	Type	Required
tab	The label of the tab which corresponding to this panel.	ReactNode	yes
id	The id of the tab panel.	string \n\|\n number	yes
disabled	Disable this tab panel.	bool	no
className	The extra className of the panel	bool	no
unmountOnHide	unmount TabPanel on inactive instead of using \n`display: none`\n style cover	bool	否

¶Divide

Using to show divide line with VerticalTabs, no need to pass any props.

'}))}}]),a}(T.Component)}}]);