-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path2221-004e488f028d439da217.js
1 lines (1 loc) · 64.2 KB
/
2221-004e488f028d439da217.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[2221],{42221:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>b});var t=a(73450),p=a(27378),o=a(57318),e=a(32109),c=a(39550),l=a(74473),u=a(75438),i=a(24246);function r(n,s){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);s&&(t=t.filter((function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable}))),a.push.apply(a,t)}return a}function k(n){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?r(Object(a),!0).forEach((function(s){(0,t.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):r(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var d=function(){return(0,i.jsxs)(e.J,{className:"layout-demo-basic",children:[(0,i.jsx)(c.W,{children:(0,i.jsx)(l.r,{span:24,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-24"})})}),(0,i.jsxs)(c.W,{children:[(0,i.jsx)(l.r,{span:8,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8"})}),(0,i.jsx)(l.r,{span:8,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8"})}),(0,i.jsx)(l.r,{span:8,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8"})})]}),(0,i.jsxs)(c.W,{children:[(0,i.jsx)(l.r,{span:8,order:3,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8 order-3"})}),(0,i.jsx)(l.r,{span:8,order:2,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8 order-2"})}),(0,i.jsx)(l.r,{span:8,order:1,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8 order-1"})})]}),(0,i.jsxs)(c.W,{children:[(0,i.jsx)(l.r,{span:8,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8"})}),(0,i.jsx)(l.r,{span:8,offset:8,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8 offset-8"})})]}),(0,i.jsxs)(c.W,{justify:"center",children:[(0,i.jsx)(l.r,{span:4,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-4"})}),(0,i.jsx)(l.r,{span:4,offset:4,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-4 offset-4"})}),(0,i.jsx)(l.r,{span:4,offset:4,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-4 offset-4"})})]})]})},m=function(){return(0,i.jsx)(u.Zr,{value:{rowGutter:8,colGutter:{fallback:8,xxl:48,xl:24,lg:16,md:8,sm:8,xs:0}},children:(0,i.jsxs)(e.J,{className:"layout-demo-basic",children:[(0,i.jsx)(c.W,{children:(0,i.jsx)(l.r,{span:24,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-24"})})}),(0,i.jsxs)(c.W,{children:[(0,i.jsx)(l.r,{span:{fallback:8,xxl:8,xl:6,lg:5,md:4,sm:3,xs:2},children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-x"})}),(0,i.jsx)(l.r,{span:8,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8"})}),(0,i.jsx)(l.r,{span:8,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8"})})]}),(0,i.jsxs)(c.W,{children:[(0,i.jsx)(l.r,{span:8,order:3,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8 order-3"})}),(0,i.jsx)(l.r,{span:8,order:2,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8 order-2"})}),(0,i.jsx)(l.r,{span:8,order:1,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8 order-1"})})]}),(0,i.jsxs)(c.W,{children:[(0,i.jsx)(l.r,{span:8,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8"})}),(0,i.jsx)(l.r,{span:8,offset:8,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-8 offset-8"})})]}),(0,i.jsxs)(c.W,{justify:"center",children:[(0,i.jsx)(l.r,{span:4,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-4"})}),(0,i.jsx)(l.r,{span:4,offset:4,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-4 offset-4"})}),(0,i.jsx)(l.r,{span:4,offset:4,children:(0,i.jsx)("div",{className:"layout-demo-cell",children:"col-4 offset-4"})})]})]})})};function g(n){return(0,i.jsx)(n.tag,k(k({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function h(n){return(0,i.jsx)(g,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function v(n){return(0,i.jsx)(g,{tag:"style",html:n.style})}function f(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),f(n.parentNode,s);return s}class y 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,s=this.props,a=s.title,t=s.src,p=s.children;return(0,i.jsxs)("div",{className:"zandoc-react-demo",children:[(0,i.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,i.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,i.jsx)("div",{className:"zandoc-react-demo__title",children:(0,i.jsx)("p",{children:a||""})}),(0,i.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,i.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,i.jsx)(g,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class b extends p.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,o.l)(document.documentElement,0,f(s,-9))}}render(){return p.createElement("div",{className:"zandoc-react-container"},p.createElement(v,{style:".layout-demo-cell {\n\t background: #155bd4;\n\t\t\topacity: 0.8;\n\t color: #fff;\n\t text-align: center;\n\t\t\tline-height: 64px;\n\t}"}),p.createElement(h,{html:'<h2 class="anchor-heading"><a href="#layout">¶</a><a href="javascript:void(0)" id="layout" class="anchor-point"></a>Layout</h2>\n<ul>\n<li><code>flex</code> based 24 column grid layout component</li>\n<li><code>Row</code> and <code>Col</code> must be within a <code>Grid</code></li>\n<li>Configurable gutter for rows and columns</li>\n<li>Responsive</li>\n</ul>\n<h3 class="anchor-heading"><a href="#dependencies">¶</a><a href="javascript:void(0)" id="dependencies" class="anchor-point"></a>Dependencies</h3>\n<p>⚠️ Note: The responsive ability relies on <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia"><code>matchMedia</code></a> and <code>matchMedia.addListener</code>. It is user\'s responsibility to make sure these functions\nare available, especially for legacy browsers. Polyfills to consider:</p>\n<ul>\n<li><a href="https://github.com/paulirish/matchMedia.js">Paul Irish/Scott Jehl\'s matchMedia polyfill</a></li>\n<li><a href="https://github.com/weblinc/media-match">David Knight\'s media-match polyfill</a></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>'}),p.createElement(y,{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">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 class="token maybe-class-name">LayoutGrid</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">Grid</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 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">Grid</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-basic<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">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">24</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">24</span><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">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\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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span><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">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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span><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">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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span><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">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\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 attr-name">order</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span> order<span class="token operator">-</span><span class="token number">3</span><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">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 attr-name">order</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span> order<span class="token operator">-</span><span class="token number">2</span><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">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 attr-name">order</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span> order<span class="token operator">-</span><span class="token number">1</span><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">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\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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span><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">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 attr-name">offset</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span> offset<span class="token operator">-</span><span class="token number">8</span><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">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\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 attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<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">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">4</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">4</span><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">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">4</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">4</span> offset<span class="token operator">-</span><span class="token number">4</span><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">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">4</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">4</span> offset<span class="token operator">-</span><span class="token number">4</span><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">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">Grid</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(d)),p.createElement(y,{title:"Responsive",id:"Demoresponsive",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>\n <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>\n <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>\n <span class="token maybe-class-name">LayoutGrid</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">Grid</span><span class="token punctuation">,</span>\n <span class="token maybe-class-name">LayoutConfigProvider</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">ConfigProvider</span><span class="token punctuation">,</span>\n<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 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">ConfigProvider</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 punctuation">{</span>\n <span class="token literal-property property">rowGutter</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>\n <span class="token literal-property property">colGutter</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token literal-property property">xxl</span><span class="token operator">:</span> <span class="token number">48</span><span class="token punctuation">,</span> <span class="token literal-property property">xl</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token literal-property property">lg</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token literal-property property">md</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token literal-property property">sm</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token literal-property property">xs</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <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">Grid</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-basic<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">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">24</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">24</span><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">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\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 punctuation">{</span> <span class="token literal-property property">fallback</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token literal-property property">xxl</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token literal-property property">xl</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token literal-property property">lg</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">md</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token literal-property property">sm</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">xs</span><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>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span>x<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">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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span><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">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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span><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">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\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 attr-name">order</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span> order<span class="token operator">-</span><span class="token number">3</span><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">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 attr-name">order</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span> order<span class="token operator">-</span><span class="token number">2</span><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">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 attr-name">order</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span> order<span class="token operator">-</span><span class="token number">1</span><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">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\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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span><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">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 attr-name">offset</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">8</span> offset<span class="token operator">-</span><span class="token number">8</span><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">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\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 attr-name">justify</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<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">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">4</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">4</span><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">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">4</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">4</span> offset<span class="token operator">-</span><span class="token number">4</span><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">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">4</span><span class="token punctuation">}</span></span> <span class="token attr-name">offset</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</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>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layout-demo-cell<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>col<span class="token operator">-</span><span class="token number">4</span> offset<span class="token operator">-</span><span class="token number">4</span><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">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">Grid</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">ConfigProvider</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(m)),p.createElement(h,{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="#grid">¶</a><a href="javascript:void(0)" id="grid" class="anchor-point"></a>Grid</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</tr>\n</thead>\n<tbody>\n<tr>\n<td>className</td>\n<td>Custom class name</td>\n<td><code>string</code></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#row">¶</a><a href="javascript:void(0)" id="row" class="anchor-point"></a>Row</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>justify</td>\n<td>Horizontal alignment</td>\n<td><code>string</code></td>\n<td>No</td>\n<td><code>start</code></td>\n<td><code>end</code>\n \n<code>center</code>\n \n<code>space-around</code>\n \n<code>space-between</code>\n \n<code>space-evenly</code></td>\n</tr>\n<tr>\n<td>align</td>\n<td>Vertical alignment</td>\n<td><code>string</code></td>\n<td>No</td>\n<td><code>top</code></td>\n<td><code>middle</code>\n \n<code>bottom</code></td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom class name</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="#col">¶</a><a href="javascript:void(0)" id="col" class="anchor-point"></a>Col</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</tr>\n</thead>\n<tbody>\n<tr>\n<td>span</td>\n<td>Number of cells to occupy</td>\n<td><code>number | ResponsiveValue</code></td>\n<td>Yes</td>\n<td></td>\n</tr>\n<tr>\n<td>offset</td>\n<td>Number of cells to offset from left</td>\n<td><code>number | ResponsiveValue</code></td>\n<td>No</td>\n<td>0</td>\n</tr>\n<tr>\n<td>order</td>\n<td>Cell flex order</td>\n<td><code>number | ResponsiveValue</code></td>\n<td>No</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom class name</td>\n<td><code>string</code></td>\n<td>No</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#configprovider">¶</a><a href="javascript:void(0)" id="configprovider" class="anchor-point"></a>ConfigProvider</h4>\n<p>Default config is <code>{ rowGutter: 0, colGutter: 0 }</code>.</p>\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</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Grid configuration</td>\n<td><code>LayoutConfig</code></td>\n<td>Yes</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#responsivevalue">¶</a><a href="javascript:void(0)" id="responsivevalue" class="anchor-point"></a>ResponsiveValue</h4>\n<pre><code class="language-typescript"><span class="token keyword">interface</span> <span class="token class-name">ResponsiveValue</span> <span class="token punctuation">{</span>\n <span class="token comment">// Fallback value when no breakpoint is matched</span>\n fallback<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>\n\n <span class="token comment">// Breakpoints from bootstrap 4</span>\n xs<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// width <576px</span>\n sm<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// width ≥576px</span>\n md<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// width ≥768px</span>\n lg<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// width ≥992px</span>\n xl<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// width ≥1200px</span>\n\n <span class="token comment">// These breakpoints are not in bootstrap</span>\n xxl<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// width ≥1600px;</span>\n fhd<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// width ≥1920px;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">interface</span> <span class="token class-name">LayoutConfig</span> <span class="token punctuation">{</span>\n colGutter<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">|</span> ResponsiveValue<span class="token punctuation">;</span>\n rowGutter<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">|</span> ResponsiveValue<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>'}))}}},48591:(n,s,a)=>{"use strict";var t=(0,a(27378).createContext)({});s.Z=t},74473:(n,s,a)=>{"use strict";a.d(s,{r:()=>r});var t=a(59312),p=a(24246),o=a(27378),e=a(60042),c=a.n(e),l=a(65225),u=a(48591),i=a(81093),r=function(n){function s(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this;return(0,p.jsx)(u.Z.Consumer,{children:function(s){return(0,p.jsx)(l.Z.Consumer,{children:function(a){var o,e=n.props,l=e.span,u=e.offset,r=e.order,k=e.className,d=e.style,m=(0,t._T)(e,["span","offset","order","className","style"]),g=d,h=(0,i.r)(s,a.colGutter);if(h>0){var v=h/2;g=(0,t.pi)((0,t.pi)({},g),{paddingLeft:v,paddingRight:v})}var f=(0,i.r)(s,l),y=(0,i.r)(s,u),b=(0,i.r)(s,r),j=c()("zent-col",((o={})["zent-col-offset-"+u]=y,o["zent-col-order-"+r]=b,o),"zent-col-"+f,k);return(0,p.jsx)("div",(0,t.pi)({},m,{className:j,style:g,"data-zv":"10.0.10"},{children:n.props.children}),void 0)}},void 0)}},void 0)},s.defaultProps={offset:0,order:0},s}(o.Component)},65225:(n,s,a)=>{"use strict";a.d(s,{x:()=>t});var t=(0,a(27378).createContext)({rowGutter:0,colGutter:0});s.Z=t},32109:(n,s,a)=>{"use strict";a.d(s,{J:()=>f});var t=a(59312),p=a(24246),o=a(27378),e=a(60042),c=a.n(e),l=a(65225),u=a(79352),i=function(){function n(n){this.options=n,!n.deferSetup&&this.setup()}return n.prototype.setup=function(){var n,s;null===(s=(n=this.options).setup)||void 0===s||s.call(n),this.initialized=!0},n.prototype.on=function(){var n,s;!this.initialized&&this.setup(),null===(s=(n=this.options).match)||void 0===s||s.call(n)},n.prototype.off=function(){var n,s;null===(s=(n=this.options).unmatch)||void 0===s||s.call(n)},n.prototype.destroy=function(){this.options.destroy?this.options.destroy():this.off()},n.prototype.equals=function(n){return this.options===n||this.options.match===n},n}(),r=function(){function n(n,s){var a=this;void 0===s&&(s=!1),this.query=n,this.isUnconditional=s,this.handlers=[],this.mql=window.matchMedia(n),this.listener=function(n){a.mql=n.currentTarget||n,a.assess()},this.mql.addListener(this.listener)}return n.prototype.addHandler=function(n){var s=new i(n);this.handlers.push(s),this.matches()&&s.on()},n.prototype.removeHandler=function(n){for(var s=this.handlers,a=0;a<s.length;a++){var t=s[a];if(t.equals(n)){t.destroy(),s.splice(a,1);break}}},n.prototype.matches=function(){return this.mql.matches||this.isUnconditional},n.prototype.clear=function(){this.handlers.forEach((function(n){n.destroy()})),this.mql.removeListener(this.listener),this.handlers.length=0},n.prototype.assess=function(){var n=this.matches();this.handlers.forEach((function(s){n?s.on():s.off()}))},n}(),k=function(){function n(){if(!window.matchMedia)throw new Error("matchMedia not present, legacy browsers require a polyfill");this.queries={},this.browserIsIncapable=!window.matchMedia("only all").matches}return n.prototype.register=function(n,s,a){void 0===a&&(a=!1);var t=this.queries,p=a&&this.browserIsIncapable;t[n]||(t[n]=new r(n,p)),"function"==typeof s&&(s={match:s}),Array.isArray(s)||(s=[s]);var o=t[n];return s.forEach((function(n){"function"==typeof n&&(n={match:n}),o.addHandler(n)})),this},n.prototype.unregister=function(n,s){var a=this.queries[n];return a&&(s?a.removeHandler(s):(a.clear(),delete this.queries[n])),this},n}(),d=u.Z&&window.matchMedia,m=d?new k:null,g=function(n){function s(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(s,n),s.prototype.render=function(){return null},s.prototype.componentDidMount=function(){this.registerBreakpoints(this.props)},s.prototype.componentDidUpdate=function(n){n.breakpoints===this.props.breakpoints&&n.onChange===this.props.onChange||(this.unregisterBreakpoints(n),this.registerBreakpoints(this.props))},s.prototype.registerBreakpoints=function(n){if(d){var s=n.breakpoints,a=n.onChange;s.forEach((function(n){m.register(n,{match:function(){a(n,!0)},unmatch:function(){a(n,!1)}})}))}},s.prototype.unregisterBreakpoints=function(n){d&&n.breakpoints.forEach((function(n){m.unregister(n)}))},s}(o.Component),h=a(48591),v=a(81093),f=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.state={breakpoints:{}},s.onBreakpointChange=function(n,a){s.setState((function(s){var p,o=s.breakpoints;return{breakpoints:(0,t.pi)((0,t.pi)({},o),(p={},p[n]=a,p))}}))},s}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this,s=this.props,a=s.className,o=s.style,e=(0,t._T)(s,["className","style"]),u=this.state.breakpoints;return(0,p.jsx)(l.Z.Consumer,{children:function(s){var l=(0,v.r)(u,s.rowGutter),i=o;if(l>0){var r=-l/2;i=(0,t.pi)((0,t.pi)({},i),{marginTop:r,marginBottom:r})}return(0,p.jsxs)("div",(0,t.pi)({},e,{className:c()("zent-layout-grid",a),style:i,"data-zv":"10.0.10"},{children:[(0,p.jsx)(h.Z.Provider,(0,t.pi)({value:u},{children:n.props.children}),void 0),(0,p.jsx)(g,{breakpoints:v.j,onChange:n.onBreakpointChange},void 0)]}),void 0)}},void 0)},s}(o.Component)},39550:(n,s,a)=>{"use strict";a.d(s,{W:()=>r});var t=a(59312),p=a(24246),o=a(27378),e=a(60042),c=a.n(e),l=a(65225),u=a(48591),i=a(81093),r=function(n){function s(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this,s=this.props,a=s.className,o=s.style,e=s.justify,r=s.align,k=(0,t._T)(s,["className","style","justify","align"]),d=c()({"zent-row":!0},"zent-row-justify-"+e,"zent-row-align-"+r,a);return(0,p.jsx)(u.Z.Consumer,{children:function(s){return(0,p.jsx)(l.Z.Consumer,{children:function(a){var e=(0,i.r)(s,a.colGutter),c=(0,i.r)(s,a.rowGutter),l=o;if(e>0){var u=-e/2;l=(0,t.pi)((0,t.pi)({},l),{marginLeft:u,marginRight:u})}if(c&&c>0){var r=c/2;l=(0,t.pi)((0,t.pi)({},l),{paddingTop:r,paddingBottom:r})}return(0,p.jsx)("div",(0,t.pi)({},k,{className:d,style:l,"data-zv":"10.0.10"},{children:n.props.children}),void 0)}},void 0)}},void 0)},s.defaultProps={justify:"start",align:"start"},s}(o.Component)},81093:(n,s,a)=>{"use strict";var t;a.d(s,{j:()=>e,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=a(72551),o=Object.keys(t).reduce((function(n,s){return n[t[s]]=s,n}),{}),e=Object.keys(o);function c(n,s){if("number"==typeof s)return s;for(var a=0;a<e.length;a++){var t=e[a],c=o[t];if(n[t]){var l=s[c];if(void 0!==l)return l}}return(0,p.n)(s,"fallback")?s.fallback:0}},75438:(n,s,a)=>{"use strict";a.d(s,{Zr:()=>t});var t=a(65225).x.Provider}}]);