Vaata Lilyt päris rakendustes
Seitse läbitöötatud näiteprojekti näitavad, kuidas võtta päisteta komponendid, lisada kujundus ja avaldada päris veebisait. Vali raamistik, mida kasutad.
Demorakendused täieliku CSS-i ja marsruutimisega
HTML JavaScript
Lihtsad HTML-lehed, puhas JavaScript, ei mingeid ehitusvahendeid. Sobib igale staatilisele hostile – ideaalne väikeste saitide ja järkjärgulise täiustamise jaoks.
Svelte + SvelteKit
SvelteKit 3 rakendus, mis kasutab Svelte 5 rune. Komponendimarsruudid, failipõhine marsruutimine ja iga komponendi kujundatud storybook.
React + Next.js
Next.js 16 rakendus, mis näitab iga komponenti kontekstis, läbivalt TypeScriptiga ja demolehtedega liitmustrite jaoks.
Vue + Nuxt.js
Nuxt 4 rakendus. <script setup> ja Composition API igal demomarsruudil.
Angular + Analog
Angular 22 + Analog.js rakendus. Failipõhine marsruutimine, signaalid, tsoonita muutuste tuvastus ja täielik SSG eelrenderdus.
Blazor Web
Blazor Web rakendus Razor-komponentidega. Sobib serverile ja WebAssembly'le, baasiks .NET 10.
Nunjucks + Eleventy
Eleventy sait, mis kasutab Nunjucksi makrosid. Ideaalne sisurikaste staatiliste saitide jaoks, mis siiski tahavad päris komponendisüsteemi.
Igal näiterakendusel on sama kuju
Et raamistike vahel hüppamine tunduks tuttav, pakub iga näiterakendus:
- Tervitusmarsruudi aadressil
/mis tutvustab projekti. - Komponendiindeksi aadressil
/componentsmis loetleb iga komponendi. - Demolehe iga komponendi kohta aadressil
/components/<component>. - Päris CSS-i – mitte abstraktseid disainitunnuseid –, nii et saad stiile otse üle võtta.
- Töötava klaviatuurinavigatsiooni ja fookuse halduse karbist välja võttes.
Kas pead nägema, kuidas üksik komponent on kujundatud?
Ava vastav näiterakendus, mine aadressile
/components/<name>ja kopeeri märgendus ning CSS oma projekti. Näiterakendused kasutavad tahtlikult tavalist (või peaaegu tavalist) CSS-i, et saaksid neid kohandada mis tahes süsteemile, mida eelistad.
Tahad hoopis päisteta?
Seo mis tahes näiterakendus vastava päisteta paketiga – need avaldavad samu komponente ilma CSS-ita, valmis sinu enda disainitunnuste jaoks.