Svelte ਟਿਊਟੋਰਿਅਲ

ਤੁਸੀਂ ਕੀ ਬਣਾਓਗੇ

ਇੱਕ ਛੋਟਾ ਸੰਪਰਕ ਫ਼ਾਰਮ — ਲੇਬਲ ਵਾਲਾ ਖੇਤਰ, ਜਮ੍ਹਾਂ ਕਰਨ ਦਾ ਬਟਨ, ਦੋ-ਪਾਸੀ ਬਾਈਂਡਿੰਗ, ਅਸਲੀ ਕੀਬੋਰਡ ਅਤੇ ਸਕ੍ਰੀਨ-ਰੀਡਰ ਵਿਹਾਰ — ਪਹਿਲਾਂ ਨੰਗਾ, ਫਿਰ ਸਟਾਈਲ ਕੀਤਾ, ਲਗਭਗ 10 ਮਿੰਟਾਂ ਵਿੱਚ।

ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ

ਤੁਹਾਨੂੰ git, Node 22 ਜਾਂ ਨਵਾਂ, ਅਤੇ pnpm 10 ਜਾਂ ਨਵਾਂ ਚਾਹੀਦਾ ਹੈ। ਕੋਈ ਵੀ Svelte 5 ਪ੍ਰੋਜੈਕਟ ਚੱਲੇਗਾ — ਇੱਕ ਬਿਲਕੁਲ ਨਵੀਂ npx sv create ਐਪ ਕਾਫ਼ੀ ਹੈ।

ਪੜਾਅ 1 — ਕੋਡ ਪ੍ਰਾਪਤ ਕਰੋ

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-headless
pnpm install
pnpm test        # vitest — thousands of component cases
pnpm run storybook   # browse all 571 components

ਕੰਪੋਨੈਂਟ ਇੱਥੇ ਰਹਿੰਦੇ ਹਨ: src/lib/components/{Name}/, ਹਰ ਕੰਪੋਨੈਂਟ ਲਈ ਇੱਕ ਡਾਇਰੈਕਟਰੀ ਜਿਸ ਵਿੱਚ .svelte ਫ਼ਾਈਲ, ਉਸਦੇ ਟੈਸਟ, story ਅਤੇ ਦਸਤਾਵੇਜ਼ ਨਾਲ-ਨਾਲ ਹਨ। ਜੋ ਡਾਇਰੈਕਟਰੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ ਉਨ੍ਹਾਂ ਨੂੰ ਆਪਣੀ ਐਪ ਵਿੱਚ ਕਾਪੀ ਕਰੋ, ਜਾਂ ਰਿਪੋ ਉੱਤੇ ਨਿਰਭਰ ਕਰੋ ਅਤੇ ਸਿੱਧਾ ਆਯਾਤ ਕਰੋ।

ਪੜਾਅ 2 — ਤੁਹਾਡਾ ਪਹਿਲਾ ਕੰਪੋਨੈਂਟ

<script>
  import Button from "#lib/components/Button/Button.svelte";

  function save() { console.log("saved"); }
</script>

<Button onclick={save}>Save</Button>

ਇਹ ਦਿਖਾਉਂਦਾ ਹੈ <button class="button" type="button">। Props ਟਾਈਪ ਕੀਤੇ ਹਨ: type, disabled, pressed (ਦਿਖਾਉਂਦਾ ਹੈ aria-pressed (ਦਿਖਾਉਂਦਾ ਹੈ label (ਇੱਕ aria-label ਟੌਗਲ ਬਟਨਾਂ ਲਈ),

ਪੜਾਅ 3 — ਇੱਕ ਛੋਟਾ ਫ਼ਾਰਮ ਬਣਾਓ

<script>
  import Form from "#lib/components/Form/Form.svelte";
  import Field from "#lib/components/Field/Field.svelte";
  import TextInput from "#lib/components/TextInput/TextInput.svelte";
  import Button from "#lib/components/Button/Button.svelte";

  let name = $state("");
</script>

<Form label="Contact form" onsubmit={handleSubmit}>
  <Field label="Full name" required>
    <TextInput id="name" label="Full name" bind:value={name} required />
  </Field>
  <Button type="submit">Save</Button>
</Form>

Field ਦਿੱਸਦੇ label ਨੂੰ ਆਪਣੇ prop ਵਜੋਂ ਲੈਂਦਾ ਹੈ, ਨਾ ਕਿ ਅੰਦਰ ਰੱਖੇ ਲੇਬਲ ਕੰਪੋਨੈਂਟ ਵਜੋਂ — ਇਸਨੂੰ ਇੱਕ ਵਾਰ ਦਿਓ, ਉੱਤੇ Field, ਅਤੇ TextInputਦਾ label ਪਹੁੰਚਯੋਗ ਨਾਮ ਦਿੰਦਾ ਹੈ। TextInput's value ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ), ਅਤੇ ਕੋਈ ਵੀ ਵਾਧੂ ਗੁਣ ਜੜ੍ਹ ਉੱਤੇ ਫੈਲ ਜਾਂਦਾ ਹੈ। $bindable ਇੱਕ bind:value rune prop ਹੈ, ਇਸ ਲਈ

ਪੜਾਅ 4 — ਇਸਨੂੰ ਸਟਾਈਲ ਕਰੋ

ਉੱਪਰ ਸਭ ਕੁਝ ਸ਼ੁੱਧ ਬਣਤਰ ਵਜੋਂ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ, ਤੁਹਾਡੇ ਸਟਾਈਲਾਂ ਲਈ ਤਿਆਰ। ਕਲਾਸ ਹੁੱਕਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰੋ — .button, .text-input, .label, .field — ਆਪਣੀ ਗਲੋਬਲ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ, ਜਾਂ ਇੱਕ ਤਿਆਰ ਥੀਮ ਇੱਥੇ ਲਿੰਕ ਕਰੋ app.html:

<link rel="stylesheet" href="/themes/dark.css" />

ਹਰ ਇੱਕ ਉਦਾਹਰਨ ਦੇ ਅਨੁਸਾਰ ਸੁਧਾਰ ਇਸ ਰਾਹੀਂ ਜਾਂਦੇ ਹਨ class prop, ਜੋ ਮੂਲ ਹੁੱਕ ਨਾਲ ਜੁੜ ਜਾਂਦਾ ਹੈ: <Button class="wide"> ਦਿਖਾਉਂਦਾ ਹੈ class="button wide".

ਪੜਾਅ 5 — ਸਭ ਕੁਝ ਕੰਮ ਕਰਦਾ ਵੇਖੋ

SvelteKit ਉਦਾਹਰਨ ਐਪ ਉਹੀ ਕੈਟਾਲਾਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਟਾਈਲ ਕੀਤਾ ਹੈ, ਜੀਵੰਤ ਡੈਮੋ, Playwright e2e ਟੈਸਟਾਂ ਅਤੇ axe-core ਪਹੁੰਚਯੋਗਤਾ ਆਧਾਰ-ਰੇਖਾ ਨਾਲ:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install && pnpm run dev

ਅਗਲੇ ਕਦਮ

• ਥੀਮ — Svelte theme-picker ਸਹਾਇਕ ਨਾਲ ਚੱਲਦੇ ਸਮੇਂ ਬਦਲਣਾ।
• ਤਰਜੀਹ ਸਹਾਇਕ — ਭਾਸ਼ਾ ਅਤੇ ਲਿਖਤ ਦਾ ਆਕਾਰ।
• ਕੰਪੋਨੈਂਟ ਕੈਟਾਲਾਗ — ਹਰ ਕੰਪੋਨੈਂਟ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ARIA ਅਤੇ ਕੀਬੋਰਡ।

ਰਾਹ ਵਿੱਚ ਸਵਾਲ ਹਨ? ਮਦਦ ਪੰਨਾ ਜਵਾਬਾਂ ਨਾਲ ਭਰਿਆ ਹੈ — ਅਤੇ ਜੇ ਕੋਈ ਕਦਮ ਹੋਰ ਸਾਫ਼ ਹੋ ਸਕਦਾ ਹੈ, ਸਾਨੂੰ ਦੱਸੋ ਅਤੇ ਅਸੀਂ ਖ਼ੁਸ਼ੀ ਨਾਲ ਟਿਊਟੋਰਿਅਲ ਸੁਧਾਰਾਂਗੇ।