Pamatykite Lily tikrose programose
Septyni parengti pavyzdiniai projektai rodo, kaip paimti bevaigius komponentus, uždėti stilizavimą ir paleisti tikrą svetainę. Pasirinkite naudojamą karkasą.
Demonstracinės programos su pilnu CSS ir maršrutizavimu
HTML JavaScript
Paprasti HTML puslapiai, grynas JavaScript, jokių kūrimo įrankių. Tinka bet kuriam statiniam prieglobos — puikiai tiks mažoms svetainėms ir laipsniškam tobulinimui.
Svelte + SvelteKit
SvelteKit 3 programa, naudojanti Svelte 5 runas. Komponentų maršrutai, failais pagrįstas maršrutizavimas ir stilizuotas kiekvieno komponento storybook.
React + Next.js
Next.js 16 programa, rodanti kiekvieną komponentą kontekste, su TypeScript visur ir demonstraciniais puslapiais sudėtiniams šablonams.
Vue + Nuxt.js
Nuxt 4 programa. <script setup> ir Composition API kiekviename demonstraciniame maršrute.
Angular + Analog
Angular 22 + Analog.js programa. Failais pagrįstas maršrutizavimas, signalai, zonų neturintis pakeitimų aptikimas ir pilnas SSG išankstinis atvaizdavimas.
Blazor Web
Blazor Web programa su Razor komponentais. Tinka ir serveriui, ir WebAssembly, su .NET 10 baze.
Nunjucks + Eleventy
Eleventy svetainė, naudojanti Nunjucks makrokomandas. Idealu turiniu turtingoms statinėms svetainėms, kurios vis dėlto nori tikros komponentų sistemos.
Kiekviena pavyzdinė programa turi tą pačią formą
Kad šuoliai tarp karkasų atrodytų pažįstami, kiekviena pavyzdinė programa suteikia:
- Sveikinimo maršrutą adresu
/kuris pristato projektą. - Komponentų indeksą adresu
/componentskuris išvardija kiekvieną komponentą. - Demonstracinį puslapį kiekvienam komponentui adresu
/components/<component>. - Tikrą CSS — ne abstrakčius dizaino žetonus — kad galėtumėte tiesiogiai pasiskolinti stilius.
- Veikiantį naršymą klaviatūra ir fokuso valdymą iškart.
Reikia pamatyti, kaip stilizuotas atskiras komponentas?
Atidarykite atitinkamą pavyzdinę programą, eikite į
/components/<name>ir nukopijuokite žymėjimą bei CSS į savo projektą. Pavyzdinės programos sąmoningai naudoja paprastą (arba beveik paprastą) CSS, kad galėtumėte jas pritaikyti bet kuriai jūsų pageidaujamai sistemai.
Norite bevaigio?
Suporuokite bet kurią pavyzdinę programą su atitinkamu bevaigiu paketu — jie skelbia tuos pačius komponentus be jokio CSS, paruoštus jūsų pačių dizaino žetonams.