component---docs-layout-space-mdx-8641b47bdde97820bee6.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{Yb8s:function(e,n,t){"use strict";t.r(n),t.d(n,"_frontmatter",(function(){return r})),t.d(n,"default",(function(){return p}));t("5hJT"),t("W1QL"),t("K/PF"),t("t91x"),t("75LO"),t("PJhk");var l=t("/FXl"),i=t("TjRS"),a=t("ZFoC"),c=t("3re2");t("aD51");function b(){return(b=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var l in t)Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l])}return e}).apply(this,arguments)}var r={};void 0!==r&&r&&r===Object(r)&&Object.isExtensible(r)&&!r.hasOwnProperty("__filemeta")&&Object.defineProperty(r,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"docs/layout/space.mdx"}});var d={_frontmatter:r},o=i.a;function p(e){var n,t=e.components,p=function(e,n){if(null==e)return{};var t,l,i={},a=Object.keys(e);for(l=0;l<a.length;l++)t=a[l],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,["components"]);return Object(l.b)(o,b({},d,p,{components:t,mdxType:"MDXLayout"}),Object(l.b)("h1",{id:"space"},"Space"),Object(l.b)(a.c,{__position:0,__code:"() => {\n  const directionBlockStyle = {\n    margin: 0,\n    padding: 4,\n    flex: 'none',\n    border: '1px solid blue',\n  }\n  const alignBlockStyle = {\n    margin: '8px 4px',\n    padding: 4,\n    flex: 'none',\n    border: '1px solid blue',\n  }\n  const grayStyle = {\n    display: 'inline-block',\n    padding: '32px 8px 16px',\n    background: 'gray',\n  }\n  return (\n    <>\n      <div>\n        <Space size=\"sm\">\n          <h1>Small</h1>\n          <h1>Size</h1>\n          <h1>!</h1>\n        </Space>\n      </div>\n      <div>\n        <Space size=\"md\">\n          <h1>Middle</h1>\n          <h1>Size</h1>\n          <h1>!</h1>\n        </Space>\n      </div>\n      <div>\n        <Space size=\"lg\">\n          <h1>Large</h1>\n          <h1>Size</h1>\n          <h1>!</h1>\n        </Space>\n      </div>\n      <div>\n        <Space size={100}>\n          <h1>Number 100</h1>\n          <h1>Size</h1>\n          <h1>!</h1>\n        </Space>\n      </div>\n      <div style={{ marginBottom: 10 }}>\n        <Space direction=\"horizontal\">\n          <div style={directionBlockStyle}>HELLO</div>\n          <div style={directionBlockStyle}>HORIZONTAL</div>\n        </Space>\n      </div>\n      <div>\n        <Space direction=\"vertical\">\n          <div style={directionBlockStyle}>HELLO</div>\n          <div style={directionBlockStyle}>VERTICAL</div>\n        </Space>\n      </div>\n      <div style={{ flexWrap: 'wrap', display: 'flex' }}>\n        <div style={alignBlockStyle}>\n          <Space align=\"center\">\n            center\n            <button>Primary</button>\n            <span style={grayStyle}>Block</span>\n          </Space>\n        </div>\n        <div style={alignBlockStyle}>\n          <Space align=\"start\">\n            start\n            <button>Primary</button>\n            <span style={grayStyle}>Block</span>\n          </Space>\n        </div>\n        <div style={alignBlockStyle}>\n          <Space align=\"end\">\n            end\n            <button>Primary</button>\n            <span style={grayStyle}>Block</span>\n          </Space>\n        </div>\n        <div style={alignBlockStyle}>\n          <Space align=\"baseline\">\n            baseline\n            <button>Primary</button>\n            <span style={grayStyle}>Block</span>\n          </Space>\n        </div>\n      </div>\n    </>\n  )\n}",__scope:(n={props:p,DefaultLayout:i.a,Playground:a.c,Space:c.i},n.DefaultLayout=i.a,n._frontmatter=r,n),mdxType:"Playground"},(function(){var e={margin:0,padding:4,flex:"none",border:"1px solid blue"},n={margin:"8px 4px",padding:4,flex:"none",border:"1px solid blue"},t={display:"inline-block",padding:"32px 8px 16px",background:"gray"};return Object(l.b)(React.Fragment,null,Object(l.b)("div",null,Object(l.b)(c.i,{size:"sm",mdxType:"Space"},Object(l.b)("h1",null,"Small"),Object(l.b)("h1",null,"Size"),Object(l.b)("h1",null,"!"))),Object(l.b)("div",null,Object(l.b)(c.i,{size:"md",mdxType:"Space"},Object(l.b)("h1",null,"Middle"),Object(l.b)("h1",null,"Size"),Object(l.b)("h1",null,"!"))),Object(l.b)("div",null,Object(l.b)(c.i,{size:"lg",mdxType:"Space"},Object(l.b)("h1",null,"Large"),Object(l.b)("h1",null,"Size"),Object(l.b)("h1",null,"!"))),Object(l.b)("div",null,Object(l.b)(c.i,{size:100,mdxType:"Space"},Object(l.b)("h1",null,"Number 100"),Object(l.b)("h1",null,"Size"),Object(l.b)("h1",null,"!"))),Object(l.b)("div",{style:{marginBottom:10}},Object(l.b)(c.i,{direction:"horizontal",mdxType:"Space"},Object(l.b)("div",{style:e},"HELLO"),Object(l.b)("div",{style:e},"HORIZONTAL"))),Object(l.b)("div",null,Object(l.b)(c.i,{direction:"vertical",mdxType:"Space"},Object(l.b)("div",{style:e},"HELLO"),Object(l.b)("div",{style:e},"VERTICAL"))),Object(l.b)("div",{style:{flexWrap:"wrap",display:"flex"}},Object(l.b)("div",{style:n},Object(l.b)(c.i,{align:"center",mdxType:"Space"},"center",Object(l.b)("button",null,"Primary"),Object(l.b)("span",{style:t},"Block"))),Object(l.b)("div",{style:n},Object(l.b)(c.i,{align:"start",mdxType:"Space"},"start",Object(l.b)("button",null,"Primary"),Object(l.b)("span",{style:t},"Block"))),Object(l.b)("div",{style:n},Object(l.b)(c.i,{align:"end",mdxType:"Space"},"end",Object(l.b)("button",null,"Primary"),Object(l.b)("span",{style:t},"Block"))),Object(l.b)("div",{style:n},Object(l.b)(c.i,{align:"baseline",mdxType:"Space"},"baseline",Object(l.b)("button",null,"Primary"),Object(l.b)("span",{style:t},"Block")))))})))}void 0!==p&&p&&p===Object(p)&&Object.isExtensible(p)&&!p.hasOwnProperty("__filemeta")&&Object.defineProperty(p,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"docs/layout/space.mdx"}}),p.isMDXComponent=!0}}]);
//# sourceMappingURL=component---docs-layout-space-mdx-8641b47bdde97820bee6.js.map