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 ಫೈಲ್, ಅದರ ಪರೀಕ್ಷೆಗಳು, stories ಮತ್ತು ದಾಖಲೆಗಳು ಅಕ್ಕಪಕ್ಕ. ನಿಮಗೆ ಬೇಕಾದ ಡೈರೆಕ್ಟರಿಗಳನ್ನು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ನಕಲಿಸಿ, ಅಥವಾ ರೆಪೊವನ್ನು ಅವಲಂಬಿಸಿ ನೇರವಾಗಿ ಆಮದು ಮಾಡಿ.

ಹಂತ 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">. ಪ್ರಾಪ್‌ಗಳು ಟೈಪ್ ಮಾಡಲ್ಪಟ್ಟಿವೆ: 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 ತನ್ನದೇ ಪ್ರಾಪ್ ಆಗಿ, ನೆಸ್ಟ್ ಮಾಡಿದ ಲೇಬಲ್ ಘಟಕವಾಗಿ ಅಲ್ಲ — ಅದನ್ನು ಒಮ್ಮೆ ಕೊಡಿ, Field, ಮತ್ತು TextInputನಲ್ಲಿ label ಪ್ರವೇಶಿಸಬಹುದಾದ ಹೆಸರನ್ನು ಒದಗಿಸುತ್ತದೆ. TextInput's value ಒಂದು $bindable rune ಪ್ರಾಪ್, ಹೀಗಾಗಿ bind:value ನಿಮಗೆ ತಕ್ಷಣ ಎರಡು-ಮಾರ್ಗ ಬೈಂಡಿಂಗ್ ನೀಡುತ್ತದೆ.

ಹಂತ 4 — ಶೈಲೀಕರಿಸಿ

ಮೇಲಿನ ಎಲ್ಲವೂ ಶುದ್ಧ ರಚನೆಯಾಗಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ, ನಿಮ್ಮ ಶೈಲಿಗಳಿಗೆ ಸಿದ್ಧ. ಕ್ಲಾಸ್ ಹುಕ್‌ಗಳನ್ನು ಶೈಲೀಕರಿಸಿ — .button, .text-input, .label, .field — ನಿಮ್ಮ ಜಾಗತಿಕ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ, ಅಥವಾ ಸಿದ್ಧ ಥೀಮ್ ಅನ್ನು ಇದರಲ್ಲಿ ಲಿಂಕ್ ಮಾಡಿ app.html:

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

ಪ್ರತಿ-ಉದಾಹರಣೆ ಹೊಂದಾಣಿಕೆಗಳು ಇದರ ಮೂಲಕ ಹೋಗುತ್ತವೆ class ಪ್ರಾಪ್, ಇದು ಮೂಲ ಹುಕ್‌ಗೆ ಸೇರಿಸಲ್ಪಡುತ್ತದೆ: <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, ಮತ್ತು ಕೀಬೋರ್ಡ್.

ದಾರಿಯಲ್ಲಿ ಪ್ರಶ್ನೆಗಳಿವೆಯೇ? ಸಹಾಯ ಪುಟ ಉತ್ತರಗಳಿಂದ ತುಂಬಿದೆ — ಮತ್ತು ಯಾವುದೇ ಹಂತ ಸ್ಪಷ್ಟವಾಗಬಹುದಾದರೆ, ನಮಗೆ ತಿಳಿಸಿ ಮತ್ತು ನಾವು ಸಂತೋಷದಿಂದ ಟ್ಯುಟೋರಿಯಲ್ ಸುಧಾರಿಸುತ್ತೇವೆ.