Lily Design System™

Poznaj Lily krok po kroku

Witaj! Każdy samouczek zaczyna od zera i buduje tę samą małą rzecz — dostępny, ostylowany formularz — w około 10 minut, żebyś mógł porównać frameworki na równych zasadach. Potem zejdź głębiej do motywów i preferencji użytkownika.

Zanim zaczniesz

Potrzebujesz zaskakująco mało:

  • Do samouczka HTML — tylko przeglądarka i edytor tekstu. To cały zestaw narzędzi.
  • Do Svelte, React, Vue, Angular lub Nunjucks — git, Node 26 i pnpm 10 lub nowszy.
  • Do Blazor — git i .NET SDK 8 lub nowszy.

Nowy w komponentach bezgłowych? Jesteś we właściwym miejscu — każdy samouczek wyjaśnia, co się dzieje po drodze, a każdy krok pokazuje dokładny kod do skopiowania.

Cztery kroki od zera do wdrożenia

  1. Twój pierwszy komponent (~5 minut) — wybierz poniżej swój framework, pobierz kod i wyrenderuj Button.
  2. Składanie i stylizacja (~5 minut) — zbuduj formularz z etykietami i ostyluj go za pomocą haków klas w kebab-case (część każdego samouczka frameworka).
  3. Nadaj motyw (~15 minut) — zamień ręcznie napisany CSS na jeden z 57 gotowych motywów, a następnie pozwól użytkownikom przełączać się w czasie działania: samouczek o motywach.
  4. Szanuj preferencje (~15 minut) — dodaj wybór języka i rozmiaru tekstu za pomocą pomocników preferencji: samouczek o pomocnikach.

Wybierz swój framework

HTML

Skopiuj semantyczny HTML z hakami klas i ruszaj — wystarczy przeglądarka i edytor.

~10 minut · najłatwiejszy start

Svelte

Runy Svelte 5, snippety i dwukierunkowe wiązanie bind:value .

~10 minut

React

Komponenty funkcyjne z value + onChange i rozprowadzaniem pozostałych właściwości.

~10 minut

Vue

Jednoplikowe komponenty Vue 3 z obsługą v-model .

~10 minut

Angular

Samodzielne komponenty Angulara z wejściami sygnałowymi i [(value)].

~10 minut

Blazor

Komponenty Razor z parametrami, ChildContenti testami bUnit.

~10 minut

Nunjucks

Makra renderowane po stronie serwera dla Eleventy i dowolnego potoku szablonów Node.

~10 minut

Nie możesz się zdecydować? Zacznij od HTML — uczy kontraktu haków klas, który dzielą wszystkie inne frameworki, i działa prosto z pliku.

Zejdź głębiej

Motywy

Podlinkuj jeden z 57 gotowych motywów — NHS, GOV.UK, USWDS, jasny, ciemny i więcej — nadpisz go własnym CSS i dodaj przełączanie motywów w czasie działania za pomocą pomocnika theme-picker.

~15 minut

Pomocnicy preferencji

Daj użytkownikom kontrolę nad motywem, językiem, rozmiarem tekstu, ruchem, wyszukiwaniem, linkami do stron, udostępnianiem i wprowadzaniem daty/godziny dzięki theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker i date-time-picker: bezgłowym kontrolkom z trwałością, bezpieczeństwem SSR i automatycznym wykrywaniem RTL.

~15 minut

Po samouczkach

  • Przeglądaj katalog komponentów — każdy komponent dokumentuje swoje właściwości, kontrakt ARIA i zachowanie klawiatury.
  • Sklonuj aplikację przykładową , aby zobaczyć wszystkie 571 komponentów ostylowanych i współpracujących — CSS celuje w te same haki klas, których właśnie użyłeś, więc skopiuj dowolną jego część do swojego projektu i dostosuj ją, jak chcesz.
  • Pytania? Strona pomocy zawiera odpowiedzi, FAQ i sposoby dotarcia do życzliwego człowieka. A jeśli któryś samouczek mógłby być jaśniejszy, powiedz nam — chętnie go poprawimy.