-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path46-bc4eac5649ec72ccd951.js
1 lines (1 loc) · 53.1 KB
/
46-bc4eac5649ec72ccd951.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{722:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return z});var t=s(580),e=s.n(t),p=s(23),o=s.n(p),c=s(24),l=s.n(c),u=s(25),i=s.n(u),k=s(26),r=s.n(k),d=s(32),h=s.n(d),g=s(27),m=s.n(g),f=s(28),y=s.n(f),w=s(0),v=s.n(w),b=s(111),C=s(82),A=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),y()(h()(s),"state",{activeKey:"1",bg:!0}),y()(h()(s),"handleChange",function(n){s.setState({activeKey:n})}),y()(h()(s),"handleBgChange",function(n){s.setState({bg:n})}),s}return m()(a,n),l()(a,[{key:"render",value:function(){var n=this.state,a=n.activeKey,s=n.bg?"default":"none";return v.a.createElement(v.a.Fragment,null,v.a.createElement("div",{style:{marginBottom:20}},v.a.createElement(C.xb,{size:"small",checked:this.state.bg,onChange:this.handleBgChange}),v.a.createElement("span",null," Background")),v.a.createElement(C.o,{panelTitleBackground:s,activeKey:a,onChange:this.handleChange},v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"1"},"FROM off a hill whose concave womb reworded A plaintful story from a sistering vale, My spirits to attend this double voice accorded, And down I laid to list the sad-tuned tale; Ere long espied a fickle maid full pale, Tearing of papers, breaking rings a-twain, Storming her world with sorrow's wind and rain."),v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"2"},"Upon her head a platted hive of straw, Which fortified her visage from the sun, Whereon the thought might think sometime it saw The carcass of beauty spent and done: Time had not scythed all that youth begun, Nor youth all quit; but, spite of heaven's fell rage, Some beauty peep'd through lattice of sear'd age."),v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"3",disabled:!0},"Oft did she heave her napkin to her eyne, Which on it had conceited characters, Laundering the silken figures in the brine That season'd woe had pelleted in tears, And often reading what contents it bears; As often shrieking undistinguish'd woe, In clamours of all size, both high and low.")))}}]),a}(v.a.Component);return v.a.createElement(n,null)},E=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),y()(h()(s),"state",{activeKey:"1"}),s}return m()(a,n),l()(a,[{key:"handleChange",value:function(n){this.setState({activeKey:n})}},{key:"render",value:function(){var n=this.state.activeKey;return v.a.createElement(C.o,{activeKey:n,onChange:this.handleChange.bind(this),accordion:!0},v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"1"},"FROM off a hill whose concave womb reworded A plaintful story from a sistering vale, My spirits to attend this double voice accorded, And down I laid to list the sad-tuned tale; Ere long espied a fickle maid full pale, Tearing of papers, breaking rings a-twain, Storming her world with sorrow's wind and rain."),v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"2"},"Upon her head a platted hive of straw, Which fortified her visage from the sun, Whereon the thought might think sometime it saw The carcass of beauty spent and done: Time had not scythed all that youth begun, Nor youth all quit; but, spite of heaven's fell rage, Some beauty peep'd through lattice of sear'd age."),v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"3"},"Oft did she heave her napkin to her eyne, Which on it had conceited characters, Laundering the silken figures in the brine That season'd woe had pelleted in tears, And often reading what contents it bears; As often shrieking undistinguish'd woe, In clamours of all size, both high and low."))}}]),a}(v.a.Component);return v.a.createElement(n,null)},S=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),y()(h()(s),"state",{activeKey:"1",bg:!1}),y()(h()(s),"handleChange",function(n){s.setState({activeKey:n})}),y()(h()(s),"handleBgChange",function(n){s.setState({bg:n})}),s}return m()(a,n),l()(a,[{key:"render",value:function(){var n=this.state,a=n.activeKey,s=n.bg?"default":"none";return v.a.createElement(v.a.Fragment,null,v.a.createElement("div",{style:{marginBottom:20}},v.a.createElement(C.xb,{size:"small",checked:this.state.bg,onChange:this.handleBgChange}),v.a.createElement("span",null," Background")),v.a.createElement(C.o,{panelTitleBackground:s,activeKey:a,onChange:this.handleChange,bordered:!1},v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"1"},"FROM off a hill whose concave womb reworded A plaintful story from a sistering vale, My spirits to attend this double voice accorded, And down I laid to list the sad-tuned tale; Ere long espied a fickle maid full pale, Tearing of papers, breaking rings a-twain, Storming her world with sorrow's wind and rain."),v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"2"},"Upon her head a platted hive of straw, Which fortified her visage from the sun, Whereon the thought might think sometime it saw The carcass of beauty spent and done: Time had not scythed all that youth begun, Nor youth all quit; but, spite of heaven's fell rage, Some beauty peep'd through lattice of sear'd age."),v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"3"},"Oft did she heave her napkin to her eyne, Which on it had conceited characters, Laundering the silken figures in the brine That season'd woe had pelleted in tears, And often reading what contents it bears; As often shrieking undistinguish'd woe, In clamours of all size, both high and low.")))}}]),a}(v.a.Component);return v.a.createElement(n,null)},P=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),y()(h()(s),"state",{activeKey:"1"}),s}return m()(a,n),l()(a,[{key:"handleChange",value:function(n){this.setState({activeKey:n})}},{key:"render",value:function(){var n=this.state.activeKey;return v.a.createElement(C.o,{activeKey:n,onChange:this.handleChange.bind(this)},v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"1",showArrow:!1},"FROM off a hill whose concave womb reworded A plaintful story from a sistering vale, My spirits to attend this double voice accorded, And down I laid to list the sad-tuned tale; Ere long espied a fickle maid full pale, Tearing of papers, breaking rings a-twain, Storming her world with sorrow's wind and rain."),v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"2",showArrow:!1},"Upon her head a platted hive of straw, Which fortified her visage from the sun, Whereon the thought might think sometime it saw The carcass of beauty spent and done: Time had not scythed all that youth begun, Nor youth all quit; but, spite of heaven's fell rage, Some beauty peep'd through lattice of sear'd age."),v.a.createElement(C.o.Panel,{title:"A Lover's Complaint",key:"3",showArrow:!1},"Oft did she heave her napkin to her eyne, Which on it had conceited characters, Laundering the silken figures in the brine That season'd woe had pelleted in tears, And often reading what contents it bears; As often shrieking undistinguish'd woe, In clamours of all size, both high and low."))}}]),a}(v.a.Component);return v.a.createElement(n,null)};function T(n){return v.a.createElement(n.tag,e()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function K(n){return v.a.createElement(T,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function N(n){return v.a.createElement(T,{tag:"style",html:n.style})}var L=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),y()(h()(s),"state",{showCode:!1}),y()(h()(s),"toggle",function(){s.setState({showCode:!s.state.showCode})}),s}return m()(a,n),l()(a,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,e=a.children;return v.a.createElement("div",{className:"zandoc-react-demo"},v.a.createElement("div",{className:"zandoc-react-demo__preview"},e),v.a.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},v.a.createElement("div",{className:"zandoc-react-demo__title"},v.a.createElement("p",null,s||"")),v.a.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&v.a.createElement("pre",{className:"zandoc-react-demo__code"},v.a.createElement(T,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),a}(w.Component),z=function(n){function a(){return o()(this,a),i()(this,r()(a).apply(this,arguments))}return m()(a,n),l()(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&Object(b.a)(document.documentElement,0,function n(a,s){for(;a;)return a.offsetTop&&"static"!==getComputedStyle(a).position&&(s+=a.offsetTop),n(a.parentNode,s);return s}(a,-9))}}},{key:"render",value:function(){return v.a.createElement("div",{className:"zandoc-react-container",key:null},v.a.createElement(N,{style:""}),v.a.createElement(K,{html:'<h2 class="anchor-heading"><a href="#collapse">¶</a><a href="javascript:void(0)" id="collapse" class="anchor-point"></a>Collapse</h2>\n<p>Collapse/expand contents.</p>\n<h3 class="anchor-heading"><a href="#guides">¶</a><a href="javascript:void(0)" id="guides" class="anchor-point"></a>Guides</h3>\n<ul>\n<li>Group and hide contents in complex areas</li>\n<li>Accordion is a special type of <code>Collpase</code>, it only allows one active panel at a time.</li>\n</ul>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),v.a.createElement(L,{title:"Basic usage",id:"Demobasic",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Collapse<span class="token punctuation">,</span> Switch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n activeKey<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n bg<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">handleChange</span> <span class="token operator">=</span> activeKey <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n activeKey<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">handleBgChange</span> <span class="token operator">=</span> bg <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> bg <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> activeKey<span class="token punctuation">,</span> bg <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">const</span> titleBg <span class="token operator">=</span> bg <span class="token operator">?</span> <span class="token string">\'default\'</span> <span class="token punctuation">:</span> <span class="token string">\'none\'</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token operator"><</span><span class="token operator">></span>\n <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginBottom<span class="token punctuation">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Switch</span>\n <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span>\n <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bg<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleBgChange<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> Background<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse</span>\n <span class="token attr-name">panelTitleBackground</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>titleBg<span class="token punctuation">}</span></span>\n <span class="token attr-name">activeKey</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>activeKey<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n FROM off a hill whose concave womb reworded A plaintful story <span class="token keyword">from</span> a sistering vale<span class="token punctuation">,</span> My spirits to attend <span class="token keyword">this</span> double voice accorded<span class="token punctuation">,</span> And down I laid to list the sad<span class="token operator">-</span>tuned tale<span class="token punctuation">;</span> Ere long espied a fickle maid full pale<span class="token punctuation">,</span> Tearing <span class="token keyword">of</span> papers<span class="token punctuation">,</span> breaking rings a<span class="token operator">-</span>twain<span class="token punctuation">,</span> Storming her world <span class="token keyword">with</span> sorrow\'s wind and rain<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n Upon her head a platted hive <span class="token keyword">of</span> straw<span class="token punctuation">,</span> Which fortified her visage <span class="token keyword">from</span> the sun<span class="token punctuation">,</span> Whereon the thought might think sometime it saw The carcass <span class="token keyword">of</span> beauty spent and done<span class="token punctuation">:</span> Time had not scythed all that youth begun<span class="token punctuation">,</span> Nor youth all quit<span class="token punctuation">;</span> but<span class="token punctuation">,</span> spite <span class="token keyword">of</span> heaven<span class="token string">\'s fell rage, Some beauty peep\'</span>d through lattice <span class="token keyword">of</span> sear\'d age<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>\n Oft did she heave her napkin to her eyne<span class="token punctuation">,</span> Which on it had conceited characters<span class="token punctuation">,</span> Laundering the silken figures <span class="token keyword">in</span> the brine That season<span class="token string">\'d woe had pelleted in tears, And often reading what contents it bears; As often shrieking undistinguish\'</span>d woe<span class="token punctuation">,</span> In clamours <span class="token keyword">of</span> all size<span class="token punctuation">,</span> both high and low<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse</span><span class="token punctuation">></span></span>\n <span class="token operator"><</span><span class="token operator">/</span><span class="token operator">></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Simple</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(A)),v.a.createElement(L,{title:"Accordion style, only one panel can be active at the same time.",id:"Demoaccordion",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Collapse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n activeKey<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">handleChange</span><span class="token punctuation">(</span>activeKey<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n activeKey<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> activeKey <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse</span>\n <span class="token attr-name">activeKey</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>activeKey<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">accordion</span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n FROM off a hill whose concave womb reworded A plaintful story <span class="token keyword">from</span> a sistering vale<span class="token punctuation">,</span> My spirits to attend <span class="token keyword">this</span> double voice accorded<span class="token punctuation">,</span> And down I laid to list the sad<span class="token operator">-</span>tuned tale<span class="token punctuation">;</span> Ere long espied a fickle maid full pale<span class="token punctuation">,</span> Tearing <span class="token keyword">of</span> papers<span class="token punctuation">,</span> breaking rings a<span class="token operator">-</span>twain<span class="token punctuation">,</span> Storming her world <span class="token keyword">with</span> sorrow\'s wind and rain<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n Upon her head a platted hive <span class="token keyword">of</span> straw<span class="token punctuation">,</span> Which fortified her visage <span class="token keyword">from</span> the sun<span class="token punctuation">,</span> Whereon the thought might think sometime it saw The carcass <span class="token keyword">of</span> beauty spent and done<span class="token punctuation">:</span> Time had not scythed all that youth begun<span class="token punctuation">,</span> Nor youth all quit<span class="token punctuation">;</span> but<span class="token punctuation">,</span> spite <span class="token keyword">of</span> heaven<span class="token string">\'s fell rage, Some beauty peep\'</span>d through lattice <span class="token keyword">of</span> sear\'d age<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n Oft did she heave her napkin to her eyne<span class="token punctuation">,</span> Which on it had conceited characters<span class="token punctuation">,</span> Laundering the silken figures <span class="token keyword">in</span> the brine That season<span class="token string">\'d woe had pelleted in tears, And often reading what contents it bears; As often shrieking undistinguish\'</span>d woe<span class="token punctuation">,</span> In clamours <span class="token keyword">of</span> all size<span class="token punctuation">,</span> both high and low<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Simple</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(E)),v.a.createElement(L,{title:"No border",id:"Demonoborder",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Collapse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n activeKey<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span>\n bg<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">handleChange</span> <span class="token operator">=</span> activeKey <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n activeKey<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">handleBgChange</span> <span class="token operator">=</span> bg <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> bg <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> activeKey<span class="token punctuation">,</span> bg <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">const</span> titleBg <span class="token operator">=</span> bg <span class="token operator">?</span> <span class="token string">\'default\'</span> <span class="token punctuation">:</span> <span class="token string">\'none\'</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token operator"><</span><span class="token operator">></span>\n <span class="token operator"><</span>div style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginBottom<span class="token punctuation">:</span> <span class="token number">20</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Switch</span>\n <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span>\n <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bg<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleBgChange<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> Background<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse</span>\n <span class="token attr-name">panelTitleBackground</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>titleBg<span class="token punctuation">}</span></span>\n <span class="token attr-name">activeKey</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>activeKey<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">}</span></span>\n <span class="token attr-name">bordered</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n FROM off a hill whose concave womb reworded A plaintful story <span class="token keyword">from</span> a sistering vale<span class="token punctuation">,</span> My spirits to attend <span class="token keyword">this</span> double voice accorded<span class="token punctuation">,</span> And down I laid to list the sad<span class="token operator">-</span>tuned tale<span class="token punctuation">;</span> Ere long espied a fickle maid full pale<span class="token punctuation">,</span> Tearing <span class="token keyword">of</span> papers<span class="token punctuation">,</span> breaking rings a<span class="token operator">-</span>twain<span class="token punctuation">,</span> Storming her world <span class="token keyword">with</span> sorrow\'s wind and rain<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n Upon her head a platted hive <span class="token keyword">of</span> straw<span class="token punctuation">,</span> Which fortified her visage <span class="token keyword">from</span> the sun<span class="token punctuation">,</span> Whereon the thought might think sometime it saw The carcass <span class="token keyword">of</span> beauty spent and done<span class="token punctuation">:</span> Time had not scythed all that youth begun<span class="token punctuation">,</span> Nor youth all quit<span class="token punctuation">;</span> but<span class="token punctuation">,</span> spite <span class="token keyword">of</span> heaven<span class="token string">\'s fell rage, Some beauty peep\'</span>d through lattice <span class="token keyword">of</span> sear\'d age<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n Oft did she heave her napkin to her eyne<span class="token punctuation">,</span> Which on it had conceited characters<span class="token punctuation">,</span> Laundering the silken figures <span class="token keyword">in</span> the brine That season<span class="token string">\'d woe had pelleted in tears, And often reading what contents it bears; As often shrieking undistinguish\'</span>d woe<span class="token punctuation">,</span> In clamours <span class="token keyword">of</span> all size<span class="token punctuation">,</span> both high and low<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse</span><span class="token punctuation">></span></span>\n <span class="token operator"><</span><span class="token operator">/</span><span class="token operator">></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Simple</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(S)),v.a.createElement(L,{title:"No arrow",id:"Demonoarrow",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Collapse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n activeKey<span class="token punctuation">:</span> <span class="token string">\'1\'</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">handleChange</span><span class="token punctuation">(</span>activeKey<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n activeKey\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> activeKey <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse</span> <span class="token attr-name">activeKey</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>activeKey<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleChange<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">showArrow</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n FROM off a hill whose concave womb reworded A plaintful story <span class="token keyword">from</span> a sistering vale<span class="token punctuation">,</span> My spirits to attend <span class="token keyword">this</span> double voice accorded<span class="token punctuation">,</span> And down I laid to list the sad<span class="token operator">-</span>tuned tale<span class="token punctuation">;</span> Ere long espied a fickle maid full pale<span class="token punctuation">,</span> Tearing <span class="token keyword">of</span> papers<span class="token punctuation">,</span> breaking rings a<span class="token operator">-</span>twain<span class="token punctuation">,</span> Storming her world <span class="token keyword">with</span> sorrow\'s wind and rain<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">showArrow</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n Upon her head a platted hive <span class="token keyword">of</span> straw<span class="token punctuation">,</span> Which fortified her visage <span class="token keyword">from</span> the sun<span class="token punctuation">,</span> Whereon the thought might think sometime it saw The carcass <span class="token keyword">of</span> beauty spent and done<span class="token punctuation">:</span> Time had not scythed all that youth begun<span class="token punctuation">,</span> Nor youth all quit<span class="token punctuation">;</span> but<span class="token punctuation">,</span> spite <span class="token keyword">of</span> heaven<span class="token string">\'s fell rage, Some beauty peep\'</span>d through lattice <span class="token keyword">of</span> sear\'d age<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Collapse.Panel</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A Lover<span class="token punctuation">\'</span>s Complaint<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token attr-name">showArrow</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n Oft did she heave her napkin to her eyne<span class="token punctuation">,</span> Which on it had conceited characters<span class="token punctuation">,</span> Laundering the silken figures <span class="token keyword">in</span> the brine That season<span class="token string">\'d woe had pelleted in tears, And often reading what contents it bears; As often shrieking undistinguish\'</span>d woe<span class="token punctuation">,</span> In clamours <span class="token keyword">of</span> all size<span class="token punctuation">,</span> both high and low<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse.Panel</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Collapse</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Simple</span> <span class="token punctuation">/></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},v.a.createElement(P)),v.a.createElement(K,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<h4 class="anchor-heading"><a href="#collpase">¶</a><a href="javascript:void(0)" id="collpase" class="anchor-point"></a>Collpase</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Required</th>\n<th>Default</th>\n<th>Alternative</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onChange</td>\n<td>Callback when active panel changes</td>\n<td><code>func</code></td>\n<td>Yes</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>activeKey</td>\n<td>Active panel id</td>\n<td><code>string</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>accordion</td>\n<td>Accodion mode, one active panel at a time</td>\n<td><code>bool</code></td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>bordered</td>\n<td>Bordered</td>\n<td><code>bool</code></td>\n<td>No</td>\n<td><code>true</code></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>panelTitleBackground</td>\n<td>Panel background</td>\n<td><code>string</code></td>\n<td>No</td>\n<td><code>\'default\'</code></td>\n<td><code>\'none\'</code></td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom class names</td>\n<td><code>string</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>Custom class prefix</td>\n<td><code>string</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#collpase-panel">¶</a><a href="javascript:void(0)" id="collpase-panel" class="anchor-point"></a>Collpase.Panel</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Required</th>\n<th>Default</th>\n<th>Alternative</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>key</td>\n<td>Panel id</td>\n<td><code>string</code></td>\n<td>Yes</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>title</td>\n<td>Panel title</td>\n<td><code>node</code></td>\n<td>Yes</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disable panel</td>\n<td><code>bool</code></td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>showArrow</td>\n<td>Show arrow in the title</td>\n<td><code>bool</code></td>\n<td>No</td>\n<td><code>true</code></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>style</td>\n<td>Custom styles</td>\n<td><code>object</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom class names</td>\n<td><code>string</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>Custom class prefix</td>\n<td><code>string</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>'}))}}]),a}(w.Component)}}]);