98 lines
5.9 KiB
JavaScript
98 lines
5.9 KiB
JavaScript
import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as i}from"./index-Z-6k0Xrj.js";import{p as a}from"./docsPage-CT2vyZOj.js";import{H as o}from"./Highlight-rHebhLku.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";function s(t){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...r(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Bare minimum Svelte",parameters:{...a}}),`
|
|
`,e.jsx(n.h1,{id:"introduction-to-svelte-components",children:"Introduction to Svelte components"}),`
|
|
`,e.jsx(n.p,{children:"Svelte is a modern JavaScript framework for building parts of HTML pages. Components are the building blocks of Svelte pages, allowing you to create reusable and interactive parts of your page."}),`
|
|
`,e.jsxs(n.p,{children:["Here's ",e.jsx(n.strong,{children:"the bare minimum"})," you need to know to start using graphics components:"]}),`
|
|
`,e.jsx(n.h2,{id:"whats-a-component",children:"What's a component?"}),`
|
|
`,e.jsxs(n.p,{children:["A Svelte ",e.jsx(o,{children:"component"})," is just a ",e.jsx(n.code,{children:".svelte"})," file."]}),`
|
|
`,e.jsx(n.p,{children:"A component is usually composed of several parts: JavaScript for managing data, HTML to represent the elements it creates on the page and CSS to style those elements."}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- JavaScript -->
|
|
<script>
|
|
let {
|
|
imgSrc = 'https://reuters.com/image.jpg',
|
|
altText = 'A cat',
|
|
caption = 'Mousing all day is hard work ...',
|
|
} = $props();
|
|
<\/script>
|
|
|
|
<!-- HTML -->
|
|
<figure>
|
|
<img src={imgSrc} alt={altText} />
|
|
<figcaption>{caption}</figcaption>
|
|
</figure>
|
|
|
|
<!-- CSS -->
|
|
<style>
|
|
figure {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
`})}),`
|
|
`,e.jsx(n.h2,{id:"importing-and-using-components",children:"Importing and using components"}),`
|
|
`,e.jsxs(n.p,{children:["To use a component, you first need to import it. For example, below is a component called ",e.jsx(n.code,{children:"Button.svelte"}),":"]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- Button.svelte -->
|
|
<script>
|
|
let { text = 'Click me' } = $props();
|
|
<\/script>
|
|
|
|
<button>{text}</button>
|
|
`})}),`
|
|
`,e.jsx(n.p,{children:"You can import and use this component in another file:"}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
|
|
<script>
|
|
import Button from './Button.svelte';
|
|
<\/script>
|
|
|
|
<main>
|
|
<h1>Welcome to Svelte</h1>
|
|
<Button text="Press here" />
|
|
</main>
|
|
`})}),`
|
|
`,e.jsxs(n.p,{children:["Here, the ",e.jsx(n.code,{children:"Button"})," component is imported and used in the ",e.jsx(n.code,{children:"App"})," component."]}),`
|
|
`,e.jsx(n.p,{children:"The components in this project are pre-made so you can install, import and use them directly in your page without needing to write them yourself or have a copy of each component in your project."}),`
|
|
`,e.jsx(n.p,{children:"For example, a basic page might look like this:"}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
|
|
// Importing our pre-made components from this project
|
|
import {
|
|
BodyText,
|
|
SiteHeader,
|
|
SiteFooter,
|
|
Headline,
|
|
} from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<SiteHeader />
|
|
|
|
<Headline hed="My new story" dek="The beginning of a beautiful page" />
|
|
<BodyText text="Lorem ipsum ..." />
|
|
|
|
<SiteFooter />
|
|
`})}),`
|
|
`,e.jsx(n.h2,{id:"passing-data-to-components-with-props",children:"Passing data to components with props"}),`
|
|
`,e.jsx(n.p,{children:`All graphics components are written to work across different stories. That means they expect to be given the content they'll add (or "render") on the page by you.`}),`
|
|
`,e.jsxs(n.p,{children:["We pass the data components use to render their part of a page using ",e.jsx(o,{children:"props"}),"."]}),`
|
|
`,e.jsxs(n.p,{children:["In the ",e.jsx(n.code,{children:"Button.svelte"})," example above, the ",e.jsx(n.code,{children:"text"})," prop provides a way to pass the text that will be rendered in the button like this:"]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<Button text="Click me!" />
|
|
`})}),`
|
|
`,e.jsx("button",{children:"Click me!"}),`
|
|
`,e.jsx(n.h2,{id:"reading-component-props",children:"Reading component props"}),`
|
|
`,e.jsx(n.p,{children:"All graphics components are documented with a code snippet showing how to import them and what props that component has with the kind of data each expects."}),`
|
|
`,e.jsx(n.p,{children:"For example, the default FeaturePhoto example looks like:"}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
|
|
import { FeaturePhoto } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<FeaturePhoto
|
|
src="https://reuters.com/images/myImage.jpg"
|
|
altText="Some alt text"
|
|
caption="A caption"
|
|
width="normal"
|
|
/>
|
|
`})}),`
|
|
`,e.jsxs(n.p,{children:["The component's props are ",e.jsx(n.code,{children:"src"}),", ",e.jsx(n.code,{children:"altTtext"}),", ",e.jsx(n.code,{children:"caption"})," and ",e.jsx(n.code,{children:"width"})," and each shows an example of the type of data that should go into that prop. For example, the ",e.jsx(n.code,{children:"src"})," prop expects a full URL to the image it will render."]}),`
|
|
`,e.jsx(n.h2,{id:"next-steps",children:"Next steps"}),`
|
|
`,e.jsxs(n.p,{children:["To learn more about Svelte, check out the ",e.jsx(n.a,{href:"https://svelte.dev/tutorial/svelte/welcome-to-svelte",rel:"nofollow",children:"official interactive tutorial"}),"."]}),`
|
|
`,e.jsx(n.p,{children:'All are also welcome to join the "⚙️ Graphics Dev Group" channel in Teams, where we occasionally chat about code tips or tricks.'})]})}function j(t={}){const{wrapper:n}={...r(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{j as default};
|