1"use strict";(self.webpackChunk_electricui_blog=self.webpackChunk_electricui_blog||[]).push([[4943],{11669:function(l,t){var e="angle-right",n=[8250],s="f105",a="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z";t.DF={prefix:"fas",iconName:e,icon:[320,512,n,s,a]},t.yO=t.DF},66124:function(l,t,e){e.r(t),e.d(t,{default:function(){return g}});var n=e(45392),s=e(2784);e(71360);function a(l){const t=Object.assign({p:"p",h2:"h2",span:"span"},(0,n.ah)(),l.components),{CodeBlock:e}=t;return e||function(l,t){throw new Error("Expected "+(t?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodeBlock",!0),s.createElement(s.Fragment,null,s.createElement(t.p,null,"Generic container primitive used for alignment and spacing."),"\n",s.createElement(t.h2,null,"Usage"),"\n",s.createElement(e,null,s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #777777">{</span><span style="color: #333333"> </span><span style="color: #39927F"><data-lsp lsp=\'<div class='line'><span style="color: #333333">(</span><span style="color: #39927F">alias</span><span style="color: #333333">) </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F">Box</span><span style="color: #777777">:</span><span style="color: #333333"> </span><span style="color: #248725">React</span><span style="color: #777777">.</span><span style="color: #248725">FC</span><span style="color: #777777">&lt;</span><span style="color: #248725">BoxProps</span><span style="color: #777777">&gt;</span></div><div class='line'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #39927F">Box</span></div>\' >Box</data-lsp></span><span style="color: #333333"> </span><span style="color: #777777">}</span><span style="color: #333333"> </span><span style="color: #4B83CD">from</span><span style="color: #333333"> </span><span style="color: #777777">'</span><span style="color: #886338">atomic-layout</span><span style="color: #777777">'</span></div><div class=\'line\'> </div><div class=\'line\'><span style="color: #777777"><</span><span style="color: #248725"><data-lsp lsp=\'<div class='line'><span style="color: #333333">(</span><span style="color: #39927F">alias</span><span style="color: #333333">) </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F">Box</span><span style="color: #777777">:</span><span style="color: #333333"> </span><span style="color: #248725">React</span><span style="color: #777777">.</span><span style="color: #248725">FC</span><span style="color: #777777">&lt;</span><span style="color: #248725">BoxProps</span><span style="color: #777777">&gt;</span></div><div class='line'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #39927F">Box</span></div>\' >Box</data-lsp></span><span style="color: #777777">></span><span style="color: #1C1C1C">Fun Content in Here</span><span style="color: #777777"></</span><span style="color: #248725"><data-lsp lsp=\'<div class='line'><span style="color: #333333">(</span><span style="color: #39927F">alias</span><span style="color: #333333">) </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F">Box</span><span style="color: #777777">:</span><span style="color: #333333"> </span><span style="color: #248725">React</span><span style="color: #777777">.</span><span style="color: #248725">FC</span><span style="color: #777777">&lt;</span><span style="color: #248725">BoxProps</span><span style="color: #777777">&gt;</span></div><div class='line'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #39927F">Box</span></div>\' >Box</data-lsp></span><span style="color: #777777">></span></div>'}})),"\n",s.createElement(t.h2,null,"Alignment"),"\n",s.createElement(e,null,s.createElement(t.span,{dangerouslySetInnerHTML:{__html:"<div class='line'><span style=\"color: undefined\">flexDirection</span></div><div class='line'><span style=\"color: undefined\">flexShrink</span></div><div class='line'><span style=\"color: undefined\">flexGrow</span></div><div class='line'><span style=\"color: undefined\">flexWrap</span></div><div class='line'><span style=\"color: undefined\">align</span></div><div class='line'><span style=\"color: undefined\">alignItems</span></div><div class='line'><span style=\"color: undefined\">alignContent</span></div><div class='line'><span style=\"color: undefined\">justify</span></div><div class='line'><span style=\"color: undefined\">justifyItems</span></div><div class='line'><span style=\"color: undefined\">justifyContent</span></div><div class='line'><span style=\"color: undefined\">place</span></div><div class='line'><span style=\"color: undefined\">placeItems</span></div><div class='line'><span style=\"color: undefined\">placeContent</span></div>"}})),"\n",s.createElement(t.h2,null,"Sizing"),"\n",s.createElement(e,null,s.createElement(t.span,{dangerouslySetInnerHTML:{__html:"<div class='line'><span style=\"color: undefined\">minHeight</span></div><div class='line'><span style=\"color: undefined\">maxHeight</span></div><div class='line'><span style=\"color: undefined\">height</span></div><div class='line'><span style=\"color: undefined\">minWidth</span></div><div class='line'><span style=\"color: undefined\">maxWidth</span></div><div class='line'><span style=\"color: undefined\">width</span></div>"}})),"\n",s.createElement(t.h2,null,"Spacing"),"\n",s.createElement(e,null,s.createElement(t.span,{dangerouslySetInnerHTML:{__html:"<div class='line'><span style=\"color: undefined\">margin</span></div><div class='line'><span style=\"color: undefined\">marginVertical</span></div><div class='line'><span style=\"color: undefined\">marginHorizontal</span></div><div class='line'><span style=\"color: undefined\">marginTop</span></div><div class='line'><span style=\"color: undefined\">marginRight</span></div><div class='line'><span style=\"color: undefined\">marginLeft</span></div><div class='line'><span style=\"color: undefined\">marginBottom</span></div><div class='line'><span style=\"color: undefined\">padding</span></div><div class='line'><span style=\"color: undefined\">paddingVertical</span></div><div class='line'><span style=\"color: undefined\">paddingHorizontal</span></div><div class='line'><span style=\"color: undefined\">paddingTop</span></div><div class='line'><span style=\"color: undefined\">paddingRight</span></div><div class='line'><span style=\"color: undefined\">paddingLeft</span></div><div class='line'><span style=\"color: undefined\">paddingBottom</span></div>"}})),"\n",s.createElement(t.p,null,"Padding example:"),"\n",s.createElement(e,null,s.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<div class=\'line\'><span style="color: #777777"><</span><span style="color: #248725"><data-lsp lsp=\'<div class='line'><span style="color: #333333">(</span><span style="color: #39927F">alias</span><span style="color: #333333">) </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F">Box</span><span style="color: #777777">:</span><span style="color: #333333"> </span><span style="color: #248725">React</span><span style="color: #777777">.</span><span style="color: #248725">FC</span><span style="color: #777777">&lt;</span><span style="color: #248725">BoxProps</span><span style="color: #777777">&gt;</span></div><div class='line'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #39927F">Box</span></div>\' >Box</data-lsp></span><span style="color: #1C1C1C"> </span><span style="color: #4481B7"><data-lsp lsp=\'<div class='line'><span style="color: #333333">(</span><span style="color: #39927F">property</span><span style="color: #333333">) </span><span style="color: #39927F">GenericProps</span><span style="color: #777777">.</span><span style="color: #39927F">
1padding</span><span style="color: #777777">?:</span><span style="color: #333333"> </span><span style="color: #39927F">Numeric</span><span style="color: #333333"> </span><span style="color: #777777">|</span><span style="color: #333333"> </span><span style="color: #AB6526">undefined</span></div>\' >padding</data-lsp></span><span style="color: #777777">={</span><span style="color: #9E6D5A">10</span><span style="color: #777777">}></span><span style="color: #1C1C1C"> ... </span><span style="color: #777777"></</span><span style="color: #248725"><data-lsp lsp=\'<div class='line'><span style="color: #333333">(</span><span style="color: #39927F">alias</span><span style="color: #333333">) </span><span style="color: #7A3E9D">const</span><span style="color: #333333"> </span><span style="color: #39927F">Box</span><span style="color: #777777">:</span><span style="color: #333333"> </span><span style="color: #248725">React</span><span style="color: #777777">.</span><span style="color: #248725">FC</span><span style="color: #777777">&lt;</span><span style="color: #248725">BoxProps</span><span style="color: #777777">&gt;</span></div><div class='line'><span style="color: #4B83CD">import</span><span style="color: #333333"> </span><span style="color: #39927F">Box</span></div>\' >Box</data-lsp></span><span style="color: #777777">></span></div>'}})))}var o=function(l){void 0===l&&(l={});const{wrapper:t}=Object.assign({},(0,n.ah)(),l.components);return t?s.createElement(t,l,s.createElement(a,l)):a(l)};e(63281);var p=e(95303),r=e(94229),c=e(10484),i=e(41170),d=(e(68270),e(9876)),y=e(59111),u=e(8711),m=e(6192),v=e(2598);function f(l){const{pageContext:t,data:e}=l;if(!e)return console.error(l,"no data"),null;const a=t,{data:{mdx:{tableOfContents:o}}}=l,f=o.items&&0!==o.items.length?s.createElement("div",null,s.createElement(y.Z,{items:o.items})):null;return s.createElement(i.Z,{location:l.location},s.createElement(c.A,{title:a.frontmatter.title+" - Electric UI",keywords:a.frontmatter.keywords,description:a.frontmatter.description,type:"guide"===a.frontmatter.category?"article":"website",image:a.image,imageHeight:a.imageHeight,imageWidth:a.imageWidth}),s.createElement(r.Z,{location:l.location,currentTitle:a.frontmatter.title,toc:f},a.breadcrumbs?s.createElement(v.O,{breadcrumbs:a.breadcrumbs}):null,s.createElement("h1",{id:(0,m.Z)(a.frontmatter.title)},a.frontmatter.title),s.createElement("main",{style:{display:"block",marginBottom:(0,p.qZ)(1),marginTop:(0,p.qZ)(1)}},s.createElement(d.Z.Provider,{value:t},s.createElement(n.Zo,{components:u.Z},l.children)))))}function g(l){return s.createElement(f,l,s.createElement(o,l))}},2598:function(l,t,e){e.d(t,{O:function(){return r}});var n=e(2784),s=e(68270),a=e(68251),o=e(11669),p=e(17370);function r(l){return n.createElement("div",{className:"breadcrumbs"},l.breadcrumbs.map(((t,e)=>e===l.breadcrumbs.length-1?n.createElement(n.Fragment,null):n.createElement(n.Fragment,null," ",n.createElement(s.rU,{to:t.slug},t.title)," ",n.createElement(p.G,{icon:o.yO,size:"xs"})))),l.breadcrumbs.length>=2?n.createElement(a.BreadcrumbJsonLd,{itemListElements:l.breadcrumbs.map(((l,t)=>({position:t+1,name:l.title,item:"https://electricui.com"+l.slug})))}):null)}},89285:function(l,t,e){e(63281),e(2784);t.Z=l=>null},71360:function(l,t,e){var n=e(9876),s=e(89285),a=e(2784);const o="undefined"!=typeof window;class p extends a.Component{constructor(){super(...arguments),this.getScreenshotInfo=l=>{const{component:t,name:e}=this.props,n=l.componentScreenshots[t];if(!n)return console.log("No screenshot available for "+t+", "+e),null;const s=n.mobile,a=n.desktop;let p=!1;if(o&&(p=window.innerWidth<900),p){const l=s.find((l=>l.name===e));if(l)return l}const r=a.find((l=>l.name===e));return r||null},this.renderWithContext=l=>{if(null===l)return a.createElement("div",null,"Component context failure");const{component:t,name:e}=this.props,n=l.componentScreenshots[t];if(!e)return a.createElement("div",null,"Screenshots available:",a.createElement("ul",null,n.desktop.map((l=>l.name)).map((l=>a.createElement("li",null,l)))));const o=this.getScreenshotInfo(l);return null===o?a.createElement("div",null,a.createElement(s.Z,{note:"No screenshot available for "+t+": "+e})):a.createElement("div",{style:{textAlign:"center"}},a.createElement("img",{src:o.src,srcSet:o.srcSet,alt:"Screenshot of component "+t+" "+e}))}}render(){return a.createElement(n.Z.Consumer,null,(l=>this.renderWithContext(l)))}}t.Z=p},9876:function(l,t,e){const n=e(2784).createContext(null);t.Z=n},8711:function(l,t,e){e.d(t,{Z:function(){return o}});var n=e(90803),s=e(2784);function a(l){const t=(0,s.useRef)(null),e=(0,s.useRef)(null),n=(0,s.useRef)(null),a=(0,s.useCallback)((l=>{if(!t.current)return;if(!e.current)return;if(!n.current)return;const s=l.target;if("DATA-LSP"!==s.nodeName)return;const a=s.getAttribute("lsp");let o=s.getBoundingClientRect(),p=t.current.getBoundingClientRect(),r=o.left-p.left;e.current.style.display="block",e.current.style.top=o.top+20-p.top+"px",e.current.style.left=r+"px",e.current.style.maxWidth=Math.min(3*p.width/4,p.width-r-2)+"px",a&&(n.current.innerHTML=a)}),[]),o=(0,s.useCallback)((l=>{e.current&&(e.current.style.display="none")}),[]);return s.createElement("div",{className:"code-container"},s.createElement("div",{className:"eui-syntax-highlighting line-numbers"},s.createElement("pre",{className:"shiki twoslash"},s.createElement("code",{className:"code-container",onMouseOver:a,onMouseOut:o,ref:t},l.children)),s.createElement("div",{className:"shiki-twoslash-tooltip",ref:e},s.createElement("pre",{className:"shiki twoslash"},s.createElement("code",{ref:n})))))}var o={h1:l=>s.createElement(n.Z,Object.assign({is:"h1"},l)),h2:l=>s.createElement(n.Z,Object.assign({is:"h2"},l)),h3:l=>s.createElement(n.Z,Object.assign({is:"h3"},l)),h4:l=>s.createElement(n.Z,Object.assign({is:"h4"},l)),h5:l=>s.createElement(n.Z,Object.assign({is:"h5"},l)),h6:l=>s.createElement(n.Z,Object.assign({is:"h6"},l)),pre:l=>s.createElement(a,l),code:l=>s.createElement("code",l),table:l=>s.createElement("div",{className:"table-wrapper"},s.createElement("table",l)),CodeBlock:l=>s.createElement(a,l)}},6192:function(l,t){t.Z=function(l){return l.toString().toLowerCase().replace(/\s+/g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"")}},45392:function(l,t,e){e.d(t,{Zo:function(){return p},ah:function(){return a}});var n=e(2784);const s=n.createContext({});function a(l){const t=n.useContext(s);return n.useMemo((()=>"function"==typeof l?l(t):{...t,...l}),[t,l])}const o={};function p({components:l,children:t,disableParentContext:e}){let p;return p=e?"function"==typeof l?l({}):l||o:a(l),n.createElement(s.Provider,{value:p},t)}}}]); 2//# sourceMappingURL=component---src-templates-template-docs-page-js-content-file-path-src-pages-docs-components-box-md-1d85331d00bdc53aac20.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.