-
Notifications
You must be signed in to change notification settings - Fork 0
/
3679-836274776a9b4785c851.js
1 lines (1 loc) · 68.1 KB
/
3679-836274776a9b4785c851.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[3679],{53679:(n,a,s)=>{"use strict";s.r(a),s.d(a,{default:()=>x});var t=s(73450),p=s(27378),e=s(57318),o=s(71457),c=s(39550),l=s(74473),u=s(96681),k=s(24246);function i(n,a){var s=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);a&&(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable}))),s.push.apply(s,t)}return s}function r(n){for(var a=1;a<arguments.length;a++){var s=null!=arguments[a]?arguments[a]:{};a%2?i(Object(s),!0).forEach((function(a){(0,t.Z)(n,a,s[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(s)):i(Object(s)).forEach((function(a){Object.defineProperty(n,a,Object.getOwnPropertyDescriptor(s,a))}))}return n}var d=function(){var n=o.Y.Group;class a extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:"male"}),(0,t.Z)(this,"onChange",(n=>{this.setState({value:n.target.value})}))}render(){return(0,k.jsxs)(n,{onChange:this.onChange,value:this.state.value,children:[(0,k.jsx)(o.Y,{value:"male",children:"Male"}),(0,k.jsx)(o.Y,{value:"female",children:"Female"})]})}}return(0,k.jsx)(a,{})},m=function(){var n=o.Y.Group;class a extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:"male",valueCopy:"apple"}),(0,t.Z)(this,"onChange",(n=>{this.setState({value:n.target.value})})),(0,t.Z)(this,"onChangeCopy",(n=>{this.setState({valueCopy:n.target.value})}))}render(){return(0,k.jsxs)("div",{children:[(0,k.jsxs)(n,{onChange:this.onChange,value:this.state.value,disabled:!0,children:[(0,k.jsx)(o.Y,{value:"male",children:"Male"}),(0,k.jsx)(o.Y,{value:"female",children:"Female"})]}),(0,k.jsx)("br",{}),(0,k.jsx)("br",{}),(0,k.jsx)("br",{}),(0,k.jsxs)(n,{onChange:this.onChangeCopy,value:this.state.valueCopy,children:[(0,k.jsx)(o.Y,{value:"apple",children:"Apple"}),(0,k.jsx)(o.Y,{value:"pears",children:"Pear"}),(0,k.jsx)(o.Y,{value:"cucumber",disabled:!0,children:"Cucumber"})]})]})}}return(0,k.jsx)(a,{})},g=function(){var n=o.Y.Group;class a extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:"A"}),(0,t.Z)(this,"onChange",(n=>{this.setState({value:n.target.value})}))}render(){return(0,k.jsx)(n,{onChange:this.onChange,value:this.state.value,style:{width:"100%"},children:(0,k.jsxs)(c.W,{children:[(0,k.jsx)(l.r,{span:8,children:(0,k.jsx)(o.Y,{value:"A",children:"A"})}),(0,k.jsx)(l.r,{span:8,children:(0,k.jsx)(o.Y,{value:"B",children:"B"})}),(0,k.jsx)(l.r,{span:8,children:(0,k.jsx)(o.Y,{value:"C",children:"C"})}),(0,k.jsx)(l.r,{span:8,children:(0,k.jsx)(o.Y,{value:"D",children:"D"})}),(0,k.jsx)(l.r,{span:8,children:(0,k.jsx)(o.Y,{value:"E",children:"E"})}),(0,k.jsx)(l.r,{span:8,children:(0,k.jsx)(o.Y,{value:"F",children:"F"})})]})})}}return(0,k.jsx)(a,{})},h=function(){var n=o.Y.Group;class a extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:{foo:1}}),(0,t.Z)(this,"onChange",(n=>{this.setState({value:n.target.value})}))}isValueEqual(n,a){return n&&a&&n.foo===a.foo}render(){return(0,k.jsxs)(n,{value:this.state.value,isValueEqual:this.isValueEqual,onChange:this.onChange,children:[(0,k.jsx)(o.Y,{value:{foo:1},children:"Foo 1"}),(0,k.jsx)(o.Y,{value:{foo:2},children:"Foo 2"})]})}}return(0,k.jsx)(a,{})},y=function(){var n=o.Y.Group,a=o.Y.Button;class s extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:"apple"}),(0,t.Z)(this,"onChange",(n=>{this.setState({value:n.target.value})}))}render(){return(0,k.jsxs)(n,{onChange:this.onChange,value:this.state.value,children:[(0,k.jsx)(a,{value:"apple",disabled:!0,children:"Apple"}),(0,k.jsx)(a,{value:"pear",disabled:!0,children:"Pear"}),(0,k.jsx)(a,{value:"banana",children:"Banana"}),(0,k.jsx)(a,{value:"tomato",children:"Tomato"})]})}}return(0,k.jsx)(s,{})},v=function(){var n=o.Y.Group;class a extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{style:{}}),(0,t.Z)(this,"onChange",(n=>{this.setState((n=>({style:"inline-block"===n.style.display?{}:{display:"inline-block"}})))}))}render(){return(0,k.jsxs)(k.Fragment,{children:[(0,k.jsxs)(n,{onChange:this.onChange,value:"1",children:[(0,k.jsxs)(o.Y,{value:"1",labelStyle:this.state.style,children:["What I cannot create, I do not understand.",(0,k.jsx)("p",{children:"I learned very early the difference between knowing the name of something and knowing something."})]}),(0,k.jsx)("p",{style:{color:"#969799",marginTop:8},children:"The truth always turns out to be simpler than you thought."})]}),(0,k.jsx)("div",{style:{marginTop:16},children:(0,k.jsx)(u.z,{onClick:this.onChange,children:"Switch label `display`"})})]})}}return(0,k.jsx)(a,{})};function b(n){return(0,k.jsx)(n.tag,r(r({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function f(n){return(0,k.jsx)(b,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function w(n){return(0,k.jsx)(b,{tag:"style",html:n.style})}function j(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),j(n.parentNode,a);return a}class C extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{showCode:!1}),(0,t.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,p=a.children;return(0,k.jsxs)("div",{className:"zandoc-react-demo",children:[(0,k.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,k.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,k.jsx)("div",{className:"zandoc-react-demo__title",children:(0,k.jsx)("p",{children:s||""})}),(0,k.jsx)("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})]}),n&&(0,k.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,k.jsx)(b,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class x extends p.Component{componentDidMount(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&(0,e.l)(document.documentElement,0,j(a,-9))}}render(){return p.createElement("div",{className:"zandoc-react-container"},p.createElement(w,{style:""}),p.createElement(f,{html:'<h2 class="anchor-heading"><a href="#radio">¶</a><a href="javascript:void(0)" id="radio" class="anchor-point"></a>Radio</h2>\n<p><code>RadioGroup</code> is a <a href="">controlled-component</a>. There must be a <code>onChange</code> callback dealing with changes outside.</p>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),p.createElement(C,{title:"Basic Usage",id:"Demobasic",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Radio</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">RadioGroup</span> <span class="token operator">=</span> <span class="token maybe-class-name">Radio</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Group</span></span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n value<span class="token operator">:</span> <span class="token string">\'male\'</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> value<span class="token operator">:</span> e<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span> <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 control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RadioGroup</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</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><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>male<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Male</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>female<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Female</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioGroup</span></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\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></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>'},p.createElement(d)),p.createElement(C,{title:"Disable State",id:"Demodisable",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Radio</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">RadioGroup</span> <span class="token operator">=</span> <span class="token maybe-class-name">Radio</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Group</span></span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">App</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\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n value<span class="token operator">:</span> <span class="token string">\'male\'</span><span class="token punctuation">,</span>\n valueCopy<span class="token operator">:</span> <span class="token string">\'apple\'</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> value<span class="token operator">:</span> e<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span> <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-variable function">onChangeCopy</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> valueCopy<span class="token operator">:</span> e<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span> <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 control-flow">return</span> <span class="token punctuation">(</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><span class="token class-name">RadioGroup</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>male<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Male</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>female<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Female</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioGroup</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RadioGroup</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeCopy</span><span class="token punctuation">}</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">valueCopy</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><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Apple</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pears<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Pear</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cucumber<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token maybe-class-name">Cucumber</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioGroup</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 punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></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>'},p.createElement(m)),p.createElement(C,{title:"Layout",id:"Demolayout",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Radio</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutRow</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">Row</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LayoutCol</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">Col</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">RadioGroup</span> <span class="token operator">=</span> <span class="token maybe-class-name">Radio</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Group</span></span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">App</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 value<span class="token operator">:</span> <span class="token string">\'A\'</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">onChange</span> <span class="token operator">=</span> <span class="token parameter">e</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> value<span class="token operator">:</span> e<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span> <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 control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RadioGroup</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token operator">:</span> <span class="token string">\'100%\'</span> <span class="token punctuation">}</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><span class="token class-name">Row</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Col</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</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><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">A</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Col</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Col</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</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><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>B<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">B</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Col</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Col</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</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><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>C<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">C</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Col</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Col</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</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><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>D<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">D</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Col</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Col</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</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><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>E<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">E</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Col</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Col</span></span> <span class="token attr-name">span</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">8</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><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>F<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">F</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Col</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Row</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioGroup</span></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\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(g)),p.createElement(C,{title:"Custom comparison function",id:"Democompare",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Radio</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">RadioGroup</span> <span class="token operator">=</span> <span class="token maybe-class-name">Radio</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Group</span></span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">App</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\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n value<span class="token operator">:</span> <span class="token punctuation">{</span>\n foo<span class="token operator">:</span> <span class="token number">1</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> value<span class="token operator">:</span> e<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span> <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">isValueEqual</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> a <span class="token operator">&&</span> b <span class="token operator">&&</span> a<span class="token punctuation">.</span><span class="token property-access">foo</span> <span class="token operator">===</span> b<span class="token punctuation">.</span><span class="token property-access">foo</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 control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RadioGroup</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">isValueEqual</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">isValueEqual</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</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><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> foo<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Foo</span> <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> foo<span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Foo</span> <span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioGroup</span></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\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></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>'},p.createElement(h)),p.createElement(C,{title:"Button style",id:"Demobutton",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Radio</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">RadioGroup</span> <span class="token operator">=</span> <span class="token maybe-class-name">Radio</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Group</span></span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token maybe-class-name">RadioButton</span> <span class="token operator">=</span> <span class="token maybe-class-name">Radio</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Button</span></span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n value<span class="token operator">:</span> <span class="token string">\'apple\'</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">onChange</span> <span class="token operator">=</span> <span class="token parameter">e</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> value<span class="token operator">:</span> e<span class="token punctuation">.</span><span class="token property-access">target</span><span class="token punctuation">.</span><span class="token property-access">value</span> <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 control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RadioGroup</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</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><span class="token class-name">RadioButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token maybe-class-name">Apple</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioButton</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RadioButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pear<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token maybe-class-name">Pear</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioButton</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RadioButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>banana<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Banana</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioButton</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RadioButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tomato<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Tomato</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioButton</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioGroup</span></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\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(y)),p.createElement(C,{title:"Multi line text",id:"Demomultiline",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Radio</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">RadioGroup</span> <span class="token operator">=</span> <span class="token maybe-class-name">Radio</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Group</span></span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n style<span class="token operator">:</span> <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">onChange</span> <span class="token operator">=</span> <span class="token parameter">e</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token parameter">state</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n style<span class="token operator">:</span>\n state<span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">===</span> <span class="token string">\'inline-block\'</span>\n <span class="token operator">?</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>\n <span class="token operator">:</span> <span class="token punctuation">{</span> display<span class="token operator">:</span> <span class="token string">\'inline-block\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><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 control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><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><span class="token class-name">RadioGroup</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<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><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">labelStyle</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token maybe-class-name">What</span> <span class="token constant">I</span> cannot create<span class="token punctuation">,</span> <span class="token constant">I</span> <span class="token keyword control-flow">do</span> not understand<span class="token punctuation">.</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token constant">I</span> learned very early the difference between knowing the name <span class="token keyword">of</span> something and knowing something<span class="token punctuation">.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">\'#969799\'</span><span class="token punctuation">,</span> marginTop<span class="token operator">:</span> <span class="token number">8</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">The</span> truth always turns out to be simpler than you thought<span class="token punctuation">.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RadioGroup</span></span><span class="token punctuation">></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> marginTop<span class="token operator">:</span> <span class="token number">16</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><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Switch</span> label <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">display</span><span class="token template-punctuation string">`</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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></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\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(v)),p.createElement(f,{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="#radiogroup">¶</a><a href="javascript:void(0)" id="radiogroup" class="anchor-point"></a>RadioGroup</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Props</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Used to set the currently selected value</td>\n<td><code>any</code></td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disable the radio group</td>\n<td><code>boolean</code></td>\n<td></td>\n</tr>\n<tr>\n<td>readOnly</td>\n<td>It specifies the component is read-only</td>\n<td><code>boolean</code></td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>change callback</td>\n<td><code>(e: Event) => void</code></td>\n<td></td>\n</tr>\n<tr>\n<td>isValueEqual</td>\n<td>Optional, a function to determine whether values is equal</td>\n<td><code>(a, b) => boolean</code></td>\n<td><code>(a, b) => a === b</code></td>\n</tr>\n<tr>\n<td>className</td>\n<td>custom classname</td>\n<td><code>string</code></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#radio">¶</a><a href="javascript:void(0)" id="radio" class="anchor-point"></a>Radio</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Props</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Compare according to the, determine if selected</td>\n<td><code>any</code></td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disable the radio</td>\n<td><code>boolean</code></td>\n<td></td>\n</tr>\n<tr>\n<td>readOnly</td>\n<td>It specifies the component is read-only</td>\n<td><code>boolean</code></td>\n<td></td>\n</tr>\n<tr>\n<td>labelStyle</td>\n<td>Label inline style</td>\n<td><code>React.CSSProperties</code></td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>custom classname</td>\n<td><code>string</code></td>\n<td></td>\n</tr>\n<tr>\n<td>width</td>\n<td>radio\'s width</td>\n<td><code>string</code>\n \n|\n \n<code>number</code></td>\n<td></td>\n</tr>\n</tbody>\n</table>'}))}}},48591:(n,a,s)=>{"use strict";var t=(0,s(27378).createContext)({});a.Z=t},74473:(n,a,s)=>{"use strict";s.d(a,{r:()=>i});var t=s(59312),p=s(24246),e=s(27378),o=s(60042),c=s.n(o),l=s(65225),u=s(48591),k=s(81093),i=function(n){function a(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(a,n),a.prototype.render=function(){var n=this;return(0,p.jsx)(u.Z.Consumer,{children:function(a){return(0,p.jsx)(l.Z.Consumer,{children:function(s){var e,o=n.props,l=o.span,u=o.offset,i=o.order,r=o.className,d=o.style,m=(0,t._T)(o,["span","offset","order","className","style"]),g=d,h=(0,k.r)(a,s.colGutter);if(h>0){var y=h/2;g=(0,t.pi)((0,t.pi)({},g),{paddingLeft:y,paddingRight:y})}var v=(0,k.r)(a,l),b=(0,k.r)(a,u),f=(0,k.r)(a,i),w=c()("zent-col",((e={})["zent-col-offset-"+u]=b,e["zent-col-order-"+i]=f,e),"zent-col-"+v,r);return(0,p.jsx)("div",(0,t.pi)({},m,{className:w,style:g,"data-zv":"9.12.16"},{children:n.props.children}),void 0)}},void 0)}},void 0)},a.defaultProps={offset:0,order:0},a}(e.Component)},65225:(n,a,s)=>{"use strict";s.d(a,{x:()=>t});var t=(0,s(27378).createContext)({rowGutter:0,colGutter:0});a.Z=t},39550:(n,a,s)=>{"use strict";s.d(a,{W:()=>i});var t=s(59312),p=s(24246),e=s(27378),o=s(60042),c=s.n(o),l=s(65225),u=s(48591),k=s(81093),i=function(n){function a(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(a,n),a.prototype.render=function(){var n=this,a=this.props,s=a.className,e=a.style,o=a.justify,i=a.align,r=(0,t._T)(a,["className","style","justify","align"]),d=c()({"zent-row":!0},"zent-row-justify-"+o,"zent-row-align-"+i,s);return(0,p.jsx)(u.Z.Consumer,{children:function(a){return(0,p.jsx)(l.Z.Consumer,{children:function(s){var o=(0,k.r)(a,s.colGutter),c=(0,k.r)(a,s.rowGutter),l=e;if(o>0){var u=-o/2;l=(0,t.pi)((0,t.pi)({},l),{marginLeft:u,marginRight:u})}if(c&&c>0){var i=c/2;l=(0,t.pi)((0,t.pi)({},l),{paddingTop:i,paddingBottom:i})}return(0,p.jsx)("div",(0,t.pi)({},r,{className:d,style:l,"data-zv":"9.12.16"},{children:n.props.children}),void 0)}},void 0)}},void 0)},a.defaultProps={justify:"start",align:"start"},a}(e.Component)},81093:(n,a,s)=>{"use strict";var t;s.d(a,{j:()=>o,r:()=>c}),function(n){n.fhd="(min-width: 1920px)",n.xxl="(min-width: 1600px)",n.xl="(min-width: 1200px)",n.lg="(min-width: 992px)",n.md="(min-width: 768px)",n.sm="(min-width: 576px)",n.xs="(max-width: 575px)"}(t||(t={}));var p=s(72551),e=Object.keys(t).reduce((function(n,a){return n[t[a]]=a,n}),{}),o=Object.keys(e);function c(n,a){if("number"==typeof a)return a;for(var s=0;s<o.length;s++){var t=o[s],c=e[t];if(n[t]){var l=a[c];if(void 0!==l)return l}}return(0,p.n)(a,"fallback")?a.fallback:0}},4246:(n,a,s)=>{"use strict";s.d(a,{E:()=>k});var t=s(59312),p=s(24246),e=s(60042),o=s.n(e),c=s(27378),l=s(57961),u=s(1348);function k(n){var a=(0,c.useContext)(u.d),s=n.value,e=n.disabled,k=void 0===e?a.value:e,i=n.readOnly,r=void 0!==i&&i,d=n.isValueEqual,m=void 0===d?Object.is:d,g=n.className,h=n.style,y=n.children,v=n.onChange,b=(0,c.useMemo)((function(){return{value:s,disabled:k,readOnly:r,isValueEqual:m,onRadioChange:v}}),[s,k,r,m,v]);return(0,p.jsx)(l.Z.Provider,(0,t.pi)({value:b},{children:(0,p.jsx)("div",(0,t.pi)({className:o()("zent-radio-group",g),style:h,"data-zv":"9.12.16"},{children:y}),void 0)}),void 0)}a.Z=k},57961:(n,a,s)=>{"use strict";var t=(0,s(27378).createContext)(null);t.displayName="RadioGroupContext",a.Z=t},71457:(n,a,s)=>{"use strict";s.d(a,{Y:()=>m,Z:()=>g});var t=s(59312),p=s(24246),e=s(60042),o=s.n(e),c=s(1535),l=s(27378);function u(n,a){var s=(0,l.useRef)(a);s.current=a;var p=n&&n.onRadioChange;return(0,l.useCallback)((function(n){var a=function(n,a){var s=Object.create(n);return s.target=(0,t.pi)((0,t.pi)({},a),{type:"radio",checked:n.target.checked}),s}(n,s.current);if(p)p(a);else{var e=s.current.onChange;e&&e(a)}}),[p])}function k(n,a,s){var t=function(n,a,s){return"boolean"==typeof s.disabled?s.disabled:a&&"boolean"==typeof a.disabled?a.disabled:n.value}(n,a,s),p=function(n,a){return"boolean"==typeof a.readOnly?a.readOnly:!!n&&n.readOnly}(a,s);return{checked:a?a.isValueEqual(a.value,s.value):!!s.checked,disabled:t,readOnly:p}}var i=s(4246),r=s(1348),d=s(57961);function m(n){var a=n.className,s=n.style,e=n.children,i=(n.value,n.width),m=n.labelStyle,g=(n.onMouseEnter,n.onMouseLeave,(0,t._T)(n,["className","style","children","value","width","labelStyle","onMouseEnter","onMouseLeave"])),h=(0,l.useContext)(r.d),y=(0,l.useContext)(d.Z),v=k(h,y,n),b=v.checked,f=v.disabled,w=v.readOnly,j=u(y,n),C=o()(a,"zent-radio-wrap",{"zent-radio-checked":!!b,"zent-radio-disabled":f||w}),x=(0,c.Z)(i),R=(0,t.pi)((0,t.pi)({},s),x);return(0,p.jsxs)("label",(0,t.pi)({className:C,style:R,onMouseEnter:n.onMouseEnter,onMouseLeave:n.onMouseLeave,"data-zv":"9.12.16"},{children:[(0,p.jsxs)("span",(0,t.pi)({className:"zent-radio","data-zv":"9.12.16"},{children:[(0,p.jsx)("span",{className:"zent-radio-inner","data-zv":"9.12.16"},void 0),(0,p.jsx)("input",(0,t.pi)({},g,{type:"radio",checked:!!b,disabled:f,readOnly:w,onChange:j,"data-zv":"9.12.16"}),void 0)]}),void 0),void 0!==e&&(0,p.jsx)("span",(0,t.pi)({className:"zent-radio-label",style:m,"data-zv":"9.12.16"},{children:e}),void 0)]}),void 0)}m.Button=function(n){var a=n.className,s=n.style,e=n.children,i=(n.value,n.width),m=n.onMouseEnter,g=n.onMouseLeave,h=(0,t._T)(n,["className","style","children","value","width","onMouseEnter","onMouseLeave"]),y=(0,l.useContext)(r.d),v=(0,l.useContext)(d.Z);if(!v)throw new Error("Radio.Button must be nested within Radio.Group");var b=k(y,v,n),f=b.checked,w=b.disabled,j=b.readOnly,C=u(v,n),x=o()(a,"zent-radio-button",{"zent-radio-button--checked":!!f,"zent-radio-button--disabled":w||j}),R=(0,c.Z)(i),z=(0,t.pi)((0,t.pi)({},s),R);return(0,p.jsxs)("label",(0,t.pi)({className:x,style:z,onMouseEnter:m,onMouseLeave:g,"data-zv":"9.12.16"},{children:[(0,p.jsx)("input",(0,t.pi)({},h,{type:"radio",checked:!!f,disabled:w,readOnly:j,onChange:C,"data-zv":"9.12.16"}),void 0),(0,p.jsx)("span",(0,t.pi)({className:"zent-radio-button__content","data-zv":"9.12.16"},{children:e}),void 0)]}),void 0)},m.Group=i.Z;var g=m},1535:(n,a,s)=>{"use strict";function t(n){return"string"==typeof n||"number"==typeof n?{width:n}:{}}s.d(a,{Z:()=>t})}}]);