Lily Design System™

Naučte sa Lily krok za krokom

Vitajte! Každý návod začína od nuly a stavia tú istú malú vec — prístupný, naštýlovaný formulár — asi za 10 minút, aby ste mohli frameworky porovnať za rovnakých podmienok. Potom choďte hlbšie k témam a používateľským predvoľbám.

Skôr než začnete

Potrebujete prekvapivo málo:

  • Pre návod k HTML — len prehliadač a textový editor. To je celá sada nástrojov.
  • Pre Svelte, React, Vue, Angular alebo Nunjucks — git, Node 26 a pnpm 10 alebo novší.
  • Pre Blazor — git a .NET SDK 8 alebo novší.

Ste v bezhlavých komponentoch noví? Ste na správnom mieste — každý návod vysvetľuje, čo sa deje, a každý krok ukazuje presný kód na skopírovanie.

Štyri kroky od nuly k nasadeniu

  1. Váš prvý komponent (~5 minút) — vyberte nižšie svoj framework, získajte kód a vykreslite Button.
  2. Skladanie a štýlovanie (~5 minút) — postavte formulár so štítkami a naštýlujte ho pomocou háčikov tried v kebab-case (súčasť každého návodu k frameworku).
  3. Dajte mu tému (~15 minút) — vymeňte ručne písané CSS za jednu z 57 hotových tém a potom nechajte používateľov prepínať za behu: návod k témam.
  4. Rešpektujte predvoľby (~15 minút) — pridajte výber jazyka a veľkosti textu pomocou pomocníkov pre predvoľby: návod k pomocníkom.

Vyberte svoj framework

HTML

Skopírujte sémantické HTML s háčikmi tried a ideme na to — stačí prehliadač a editor.

~10 minút · najjednoduchší štart

Svelte

Runy Svelte 5, snippety a obojsmerná väzba bind:value .

~10 minút

React

Funkčné komponenty s value + onChange a rozprestretím zvyšných vlastností.

~10 minút

Vue

Jednosúborové komponenty Vue 3 s podporou v-model .

~10 minút

Angular

Samostatné komponenty Angularu so signálovými vstupmi a [(value)].

~10 minút

Blazor

Komponenty Razor s parametrami, ChildContenta testami bUnit.

~10 minút

Nunjucks

Makrá renderované na serveri pre Eleventy a akýkoľvek šablónovací reťazec Node.

~10 minút

Neviete sa rozhodnúť? Začnite s HTML — učí zmluvu o háčikoch tried, ktorú zdieľajú všetky ostatné frameworky, a beží priamo zo súboru.

Choďte hlbšie

Témy

Prepojte jednu z 57 hotových tém — NHS, GOV.UK, USWDS, svetlú, tmavú a ďalšie — prepíšte ju vlastným CSS a pridajte prepínanie tém za behu pomocníkom theme-picker.

~15 minút

Pomocníci pre predvoľby

Dajte používateľom kontrolu nad témou, jazykom, veľkosťou textu, pohybom, hľadaním, odkazmi na stránky, zdieľaním a zadávaním dátumu/času pomocou theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker a date-time-picker: bezhlavé ovládacie prvky s perzistenciou, bezpečnosťou SSR a automatickou detekciou RTL.

~15 minút

Po návodoch

  • Prezrite si katalóg komponentov — každý komponent dokumentuje svoje vlastnosti, zmluvu ARIA a správanie klávesnice.
  • Naklonujte ukážkovú aplikáciu , aby ste videli všetkých 571 komponentov naštýlovaných a spolupracujúcich — CSS cieli na rovnaké háčiky tried, ktoré ste práve použili, takže skopírujte ľubovoľnú časť do svojho projektu a upravte ju podľa chuti.
  • Otázky? Stránka pomocníka má odpovede, často kladené otázky a spôsoby, ako sa spojiť s priateľským človekom. A ak by niektorý návod mohol byť jasnejší, povedzte nám — radi ho vylepšíme.