24 lines
3 KiB
JavaScript
24 lines
3 KiB
JavaScript
import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as n}from"./index-CO-0pc0F.js";import{M as s,C as r}from"./index-Z-6k0Xrj.js";import{V as l,D as p}from"./Visible.stories-B2Ba9QDY.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"./index-client-BAw8T8-V.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./this-CrUBQEQ_.js";import"./BodyText-CXnxLnBi.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./Block-D3Ui8rd-.js";import"./FeaturePhoto-CKELMwR8.js";import"./PaddingReset-_TGvg1_B.js";import"./shark-D70DK9Ak.js";function i(t){const o={a:"a",blockquote:"blockquote",code:"code",h1:"h1",p:"p",pre:"pre",strong:"strong",...n(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:l}),`
|
|
`,e.jsx(o.h1,{id:"visible",children:"Visible"}),`
|
|
`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Visible"})," component wraps around other components or HTML elements and uses the ",e.jsx(o.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API",rel:"nofollow",children:"Intersection Observer API"})," to determine if they are visible on the page."]}),`
|
|
`,e.jsx(o.p,{children:"This is useful for lazy loading elements, especially expensive media files or components that fetch lots of data. You can also use it trigger animations or play media once a reader scrolls a component into view."}),`
|
|
`,e.jsxs(o.p,{children:["By default, ",e.jsx(o.code,{children:"visible"})," will switch between ",e.jsx(o.code,{children:"false"})," and ",e.jsx(o.code,{children:"true"})," whenever the element is in our out of view. To trigger this just once, set the prop ",e.jsx(o.code,{children:"once"})," to ",e.jsx(o.code,{children:"true"}),". This is useful for loading expensive media when they first come into view and then keeping them around once they're loaded."]}),`
|
|
`,e.jsxs(o.blockquote,{children:[`
|
|
`,e.jsxs(o.p,{children:[e.jsx(o.strong,{children:"Note:"}),` Don't use this for content that's "above the fold" at the top of the page. That'll just slow down the first load of important visible content.`]}),`
|
|
`]}),`
|
|
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<script>
|
|
import { Visible } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<!-- Optionally set your own \`top\`, \`bottom\`, \`right\` and \`left\` values with \`px\` or \`%\` units -->
|
|
<Visible top="10px">
|
|
{#snippet children(visible)}
|
|
{#if visible}
|
|
<p>Visible!</p>
|
|
{:else}
|
|
<p>Not yet visible.</p>
|
|
{/if}
|
|
{/snippet}
|
|
</Visible>
|
|
`})}),`
|
|
`,e.jsx(r,{of:p})]})}function P(t={}){const{wrapper:o}={...n(),...t.components};return o?e.jsx(o,{...t,children:e.jsx(i,{...t})}):i(t)}export{P as default};
|