69 lines
6.4 KiB
JavaScript
69 lines
6.4 KiB
JavaScript
import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as i}from"./index-CO-0pc0F.js";import{M as c,C as s}from"./index-Z-6k0Xrj.js";import{B as r,D as l,C as a,S as d}from"./Block.stories-DTERDOok.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./Block-D3Ui8rd-.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./Article-DL33WKIV.js";import"./actions-BHcvdwVC.js";function t(n){const o={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{of:r}),`
|
|
`,e.jsx(o.h1,{id:"block",children:"Block"}),`
|
|
`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Block"})," component is the basic building block of pages, a responsive container that wraps around each section of your piece."]}),`
|
|
`,e.jsxs(o.p,{children:["Blocks are stacked vertically within the well created by the ",e.jsx(o.a,{href:"./?path=/docs/components-page-layout-article--docs",children:"Article"})," component. They can have different widths on larger screens depending on the ",e.jsx(o.code,{children:"width"})," prop."]}),`
|
|
`,e.jsxs(o.blockquote,{children:[`
|
|
`,e.jsxs(o.p,{children:["📌 Many of our other components already use the ",e.jsx(o.code,{children:"Block"})," component internally. You'll usually only need to use it yourself if you're making something custom."]}),`
|
|
`]}),`
|
|
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<script>
|
|
import { Block } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<Block>
|
|
<!-- Contents for this block goes here -->
|
|
</Block>
|
|
`})}),`
|
|
`,e.jsx(s,{of:l}),`
|
|
`,e.jsx(o.h2,{id:"custom-layouts",children:"Custom layouts"}),`
|
|
`,e.jsx(o.p,{children:"Our article well is designed to provide a basic responsive layout for you, but it also lets you customise."}),`
|
|
`,e.jsxs(o.p,{children:["The radical but easiest way to do this is to create a ",e.jsx(o.code,{children:"Block"})," with a ",e.jsx(o.code,{children:"fluid"})," width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework."]}),`
|
|
`,e.jsxs(o.p,{children:["The demo below does exactly that to create an edge-to-edge grid with ",e.jsx(o.a,{href:"https://css-tricks.com/snippets/css/a-guide-to-flexbox/",rel:"nofollow",children:"flexbox"}),"."]}),`
|
|
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<Block width="fluid">
|
|
<div class="my-radical-container">
|
|
<!-- Now, you have full control over layout! -->
|
|
</div>
|
|
</Block>
|
|
`})}),`
|
|
`,e.jsx(s,{of:a}),`
|
|
`,e.jsx(o.h2,{id:"snap-widths",children:"Snap widths"}),`
|
|
`,e.jsxs(o.p,{children:["Normally, ",e.jsx(o.code,{children:"Block"})," containers resize fluidly below the original ",e.jsx(o.code,{children:"width"}),". Sometimes, though, you may want the container to snap to the next breakpoint -- for example, if you have a static graphic that looks fine at the set block breakpoints, but isn't so great at widths inbetween."]}),`
|
|
`,e.jsxs(o.p,{children:["You can use the ",e.jsx(o.code,{children:"snap"})," prop to force the container to snap to each block width successively as the window sizes down."]}),`
|
|
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<Block width="wider" snap={true}>
|
|
<!-- Contents for this block -->
|
|
</Block>
|
|
`})}),`
|
|
`,e.jsx(s,{of:d}),`
|
|
`,e.jsxs(o.p,{children:["If you want to skip certain block widths entirely, you can add one or more class of ",e.jsx(o.code,{children:"skip-{block width class}"})," to the ",e.jsx(o.code,{children:"Block"}),"."]}),`
|
|
`,e.jsxs(o.blockquote,{children:[`
|
|
`,e.jsxs(o.p,{children:[e.jsx(o.strong,{children:"NOTE:"})," The snap width breakpoints only work on ",e.jsx(o.code,{children:"Block"})," components with widths ",e.jsx(o.code,{children:"wider"})," and below. ",e.jsx(o.code,{children:"widest"})," and ",e.jsx(o.code,{children:"fluid"})," are both ",e.jsx(o.strong,{children:"always"})," fluid, since they go edge-to-edge."]}),`
|
|
`]}),`
|
|
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<!-- Will skip wide and go straight to normal column width on resize. -->
|
|
<Block width="wider" snap={true} class="skip-wide">
|
|
<!-- Contents for this block -->
|
|
</Block>
|
|
`})}),`
|
|
`,e.jsxs(o.p,{children:["This is probably easier to see in action than explain in words, so ",e.jsx(o.a,{href:"./?path=/docs/components-page-layout-block--snap-skip-widths",children:"resize the demo"})," to get a better picture of how it all works."]}),`
|
|
`,e.jsx(o.h2,{id:"using-with-custom-column-widths",children:"Using with custom column widths"}),`
|
|
`,e.jsxs(o.p,{children:["Snap width breakpoints are hard-coded to the default article well column widths, so if you set custom ",e.jsx(o.code,{children:"columnWidths"})," on the ",e.jsx(o.a,{href:"./?path=/docs/components-page-layout-article--docs",children:"Article"})," component (",e.jsx(o.strong,{children:"rare!"}),"), you need to do a littie work to use this functionality."]}),`
|
|
`,e.jsxs(o.p,{children:["Luckily, it's still pretty easy. Just add a ",e.jsx(o.code,{children:"cls"})," or ",e.jsx(o.code,{children:"id"})," to your ",e.jsx(o.code,{children:"Block"})," so you can target it with some custom SCSS. Then define a few SCSS variables corresponding to your custom column widths, and use the ",e.jsx(o.code,{children:"block-snap-widths"})," SCSS mixin to get the same functionality at your custom breakpoints."]}),`
|
|
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<Block width="wider" snap={true} class="custom-blocks">
|
|
<!-- Contents for this block -->
|
|
</Block>
|
|
|
|
<style lang="scss">
|
|
// Define custom column widths
|
|
$column-width-narrower: 310px;
|
|
$column-width-narrow: 450px;
|
|
$column-width-normal: 600px;
|
|
$column-width-wide: 860px;
|
|
$column-width-wider: 1400px;
|
|
|
|
@use '@reuters-graphics/graphics-components/scss/mixins' as mixins;
|
|
|
|
:global {
|
|
div.custom-blocks {
|
|
@include mixins.block-snap-widths; // Use the \`block-snap-widths\` mixin
|
|
}
|
|
}
|
|
</style>
|
|
`})})]})}function $(n={}){const{wrapper:o}={...i(),...n.components};return o?e.jsx(o,{...n,children:e.jsx(t,{...n})}):t(n)}export{$ as default};
|