Οδηγός Svelte — Lily Design System

Τι θα φτιάξετε

Μια μικρή φόρμα επικοινωνίας — πεδίο με ετικέτα, κουμπί υποβολής, αμφίδρομη δέσμευση, πραγματική συμπεριφορά πληκτρολογίου και προγράμματος ανάγνωσης οθόνης — πρώτα γυμνή, μετά μορφοποιημένη, σε περίπου 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">. Τα 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 είναι ένα prop bind:value rune, οπότε το

Επαληθεύτηκε στις 2026-08-29: σας δίνει αμέσως αμφίδρομη δέσμευση. svelte/server αυτό ακριβώς το απόσπασμα μεταγλωττίστηκε μέσω <label for> και ελέγχθηκε για μία μόνο, σωστά συνδεδεμένη ετικέτα Label μέσα στο Field— ένα προηγούμενο προσχέδιο ένθετε ξεχωριστό δύο ετικέτες (η μία κενή) επειδή το Field αποδίδει ήδη τη δική του από την είσοδο label μέσα του, το οποίο απέδιδε Η σύνθετη διαδρομή της φόρμας επικοινωνίας είναι το ίδιο μοτίβο, δοκιμασμένο με πραγματικά τεστ e2e και axe.

Ελέγξτε τη δουλειά σας: τρέξτε την εφαρμογή και η φόρμα φαίνεται γυμνή — ακριβώς όπως προβλέπεται: η μορφοποίηση έρχεται μετά. Πατήστε Tab: η εστίαση περνά από κάθε στοιχείο ελέγχου, η ετικέτα ανακοινώνεται και η υποβολή δουλεύει. Η συμπεριφορά είναι έτοιμη· η εμφάνιση είναι δική σας και είναι το επόμενο βήμα.

Βήμα 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

Επόμενα βήματα

Θέματα — εναλλαγή κατά την εκτέλεση με τον βοηθό theme-picker για Svelte.
Βοηθοί προτιμήσεων — γλώσσα και μέγεθος κειμένου.
Κατάλογος στοιχείων — ιδιότητες, ARIA και πληκτρολόγιο ανά στοιχείο.

Ερωτήσεις στην πορεία; Η σελίδα βοήθειας είναι γεμάτη απαντήσεις — και αν ένα βήμα μπορεί να γίνει πιο σαφές, πείτε μας και θα βελτιώσουμε με χαρά τον οδηγό.