79 lines
6.4 KiB
JavaScript
79 lines
6.4 KiB
JavaScript
import{f as c,a as o,t as r}from"./props-b4vEeO_8.js";import{B as R,C as E,F as l,I as _,G as M}from"./runtime-C3rQLW--.js";import{i as T}from"./lifecycle-F2p_Qkk3.js";import{c as z,d as F}from"./create-runtime-stories-7AWWVphH.js";import{B as t}from"./Block-D3Ui8rd-.js";import{A as b}from"./Article-DL33WKIV.js";const g={title:"Components/Page layout/Block",component:t,tags:["autodocs"],argTypes:{width:{control:"select",options:["narrower","narrow","normal","wide","wider","widest","fluid"]}}},{Story:u}=F();var G=c('<div class="label">Block</div>'),I=c('<div class="article-boundaries"><div class="label">Article</div> <!></div>'),q=c('<div id="block-flex-example" class="svelte-j0m1tv"><div class="row svelte-j0m1tv"><div class="col svelte-j0m1tv">Column</div> <div class="col-6 svelte-j0m1tv">Column</div> <div class="col svelte-j0m1tv">Column</div></div> <div class="row svelte-j0m1tv"><div class="col svelte-j0m1tv">Column</div> <div class="col svelte-j0m1tv">Column</div></div></div>'),H=c('<div class="label">Block</div>'),J=c('<div class="article-boundaries"><div class="label">Article</div> <h4 class="svelte-j0m1tv">snap widths</h4> <!></div>'),K=c('<div class="article-boundaries"><div class="label">Article</div> <h4 class="svelte-j0m1tv">Regular layout</h4> <!> <!> <!> <!> <!> <h4 class="svelte-j0m1tv">with snap and skip</h4> <!> <!> <!> <!> <!></div>'),Q=c("<!> <!> <!> <!>",1);function W(D,L){R(L,!1),T();var f=Q(),B=E(f);u(B,{name:"Demo",children:(d,k)=>{b(d,{id:"block-demo-article",children:(i,$)=>{var a=I(),v=l(_(a),2);t(v,{children:(p,w)=>{var m=G();o(p,m)},$$slots:{default:!0}}),o(i,a)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Article id="block-demo-article">
|
|
<div class="article-boundaries">
|
|
<div class="label">Article</div>
|
|
<Block>
|
|
<div class="label">Block</div>
|
|
</Block>
|
|
</div>
|
|
</Article>`}}});var C=l(B,2);u(C,{name:"Custom layout",exportName:"CustomLayout",children:(d,k)=>{t(d,{width:"fluid",children:(i,$)=>{var a=q();o(i,a)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Block width="fluid">
|
|
<!-- Enter bootstrap grid! -->
|
|
<div id="block-flex-example">
|
|
<div class="row">
|
|
<div class="col">Column</div>
|
|
<div class="col-6">Column</div>
|
|
<div class="col">Column</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">Column</div>
|
|
<div class="col">Column</div>
|
|
</div>
|
|
</div>
|
|
</Block>`}}});var P=l(C,2);u(P,{name:"Snap widths",exportName:"SnapWidthsBasic",children:(d,k)=>{b(d,{id:"block-demo-article",children:(i,$)=>{var a=J(),v=l(_(a),4);t(v,{snap:!0,children:(p,w)=>{var m=H();o(p,m)},$$slots:{default:!0}}),o(i,a)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Article id="block-demo-article">
|
|
<div class="article-boundaries">
|
|
<div class="label">Article</div>
|
|
<h4>snap widths</h4>
|
|
<Block snap={true}>
|
|
<div class="label">Block</div>
|
|
</Block>
|
|
</div>
|
|
</Article>`}}});var N=l(P,2);u(N,{name:"Snap and skip widths",exportName:"SnapSkipWidths",children:(d,k)=>{b(d,{id:"block-demo-article",children:(i,$)=>{var a=K(),v=l(_(a),4);t(v,{width:"narrower",snap:!0,class:"block-snap-widths-demo",children:(s,n)=>{var e=r("narrower");o(s,e)},$$slots:{default:!0}});var p=l(v,2);t(p,{width:"narrow",snap:!0,class:"block-snap-widths-demo",children:(s,n)=>{var e=r("narrow");o(s,e)},$$slots:{default:!0}});var w=l(p,2);t(w,{width:"normal",snap:!0,class:"block-snap-widths-demo",children:(s,n)=>{var e=r("normal");o(s,e)},$$slots:{default:!0}});var m=l(w,2);t(m,{width:"wide",snap:!0,class:"block-snap-widths-demo",children:(s,n)=>{var e=r("wide");o(s,e)},$$slots:{default:!0}});var x=l(m,2);t(x,{width:"wider",snap:!0,class:"block-snap-widths-demo",children:(s,n)=>{var e=r("wider");o(s,e)},$$slots:{default:!0}});var S=l(x,4);t(S,{width:"narrower",snap:!0,class:"block-snap-widths-demo even",children:(s,n)=>{var e=r("narrower");o(s,e)},$$slots:{default:!0}});var A=l(S,2);t(A,{width:"narrow",snap:!0,class:"block-snap-widths-demo even",children:(s,n)=>{var e=r("narrow");o(s,e)},$$slots:{default:!0}});var j=l(A,2);t(j,{width:"normal",snap:!0,class:"block-snap-widths-demo even skip-narrow",children:(s,n)=>{var e=r("normal.skip-narrow");o(s,e)},$$slots:{default:!0}});var y=l(j,2);t(y,{width:"wide",snap:!0,class:"block-snap-widths-demo even skip-normal skip-narrow",children:(s,n)=>{var e=r("wide.skip-normal.skip-narrow");o(s,e)},$$slots:{default:!0}});var O=l(y,2);t(O,{width:"wider",snap:!0,class:"block-snap-widths-demo even skip-wide",children:(s,n)=>{var e=r("wider.skip-wide");o(s,e)},$$slots:{default:!0}}),o(i,a)},$$slots:{default:!0}})},$$slots:{default:!0},parameters:{__svelteCsf:{rawCode:`<Article id="block-demo-article">
|
|
<div class="article-boundaries">
|
|
<div class="label">Article</div>
|
|
<h4>Regular layout</h4>
|
|
|
|
<Block width="narrower" snap={true} class="block-snap-widths-demo">
|
|
narrower
|
|
</Block>
|
|
<Block width="narrow" snap={true} class="block-snap-widths-demo">
|
|
narrow
|
|
</Block>
|
|
<Block width="normal" snap={true} class="block-snap-widths-demo">
|
|
normal
|
|
</Block>
|
|
<Block width="wide" snap={true} class="block-snap-widths-demo">
|
|
wide
|
|
</Block>
|
|
<Block width="wider" snap={true} class="block-snap-widths-demo">
|
|
wider
|
|
</Block>
|
|
|
|
<h4>with snap and skip</h4>
|
|
<Block width="narrower" snap={true} class="block-snap-widths-demo even">
|
|
narrower
|
|
</Block>
|
|
<Block width="narrow" snap={true} class="block-snap-widths-demo even">
|
|
narrow
|
|
</Block>
|
|
<Block
|
|
width="normal"
|
|
snap={true}
|
|
class="block-snap-widths-demo even skip-narrow"
|
|
>
|
|
normal.skip-narrow
|
|
</Block>
|
|
<Block
|
|
width="wide"
|
|
snap={true}
|
|
class="block-snap-widths-demo even skip-normal skip-narrow"
|
|
>
|
|
wide.skip-normal.skip-narrow
|
|
</Block>
|
|
<Block
|
|
width="wider"
|
|
snap={true}
|
|
class="block-snap-widths-demo even skip-wide"
|
|
>
|
|
wider.skip-wide
|
|
</Block>
|
|
</div>
|
|
</Article>`}}}),o(D,f),M()}W.__docgen={version:3,name:"Block.stories.svelte",data:[],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};const h=z(W,g),U=["Demo","CustomLayout","SnapWidthsBasic","SnapSkipWidths"],V=h.Demo,X=h.CustomLayout,Y=h.SnapWidthsBasic,Z=h.SnapSkipWidths,rs=Object.freeze(Object.defineProperty({__proto__:null,CustomLayout:X,Demo:V,SnapSkipWidths:Z,SnapWidthsBasic:Y,__namedExportsOrder:U,default:g},Symbol.toStringTag,{value:"Module"}));export{rs as B,X as C,V as D,Y as S};
|