Skatiet Lily īstās lietotnēs
Septiņi pabeigti paraugu projekti rāda, kā paņemt bezgalvas komponentes, uzlikt stilizēšanu un izlaist īstu vietni. Izvēlieties ietvaru, ko izmantojat.
Demonstrācijas lietotnes ar pilnu CSS un maršrutēšanu
HTML JavaScript
Vienkāršas HTML lapas, tīrs JavaScript, nekādu būvēšanas rīku. Der jebkuram statiskam hostam — lieliski mazām vietnēm un pakāpeniskai uzlabošanai.
Svelte + SvelteKit
SvelteKit 3 lietotne, kas izmanto Svelte 5 runas. Komponenšu maršruti, uz failiem balstīta maršrutēšana un katras komponentes stilizēts storybook.
React + Next.js
Next.js 16 lietotne, kas rāda katru komponenti kontekstā, ar TypeScript visur un demonstrācijas lapām saliktiem paraugiem.
Vue + Nuxt.js
Nuxt 4 lietotne. <script setup> un Composition API katrā demonstrācijas maršrutā.
Angular + Analog
Angular 22 + Analog.js lietotne. Uz failiem balstīta maršrutēšana, signāli, izmaiņu noteikšana bez zonām un pilna SSG priekšrenderēšana.
Blazor Web
Blazor Web lietotne ar Razor komponentēm. Piemērota gan serverim, gan WebAssembly, ar .NET 10 kā bāzi.
Nunjucks + Eleventy
Eleventy vietne, kas izmanto Nunjucks makro. Ideāla saturā bagātām statiskām vietnēm, kas tomēr vēlas īstu komponenšu sistēmu.
Katrai paraugu lietotnei ir viena un tā pati forma
Lai pārlēkšana starp ietvariem šķistu pazīstama, katra paraugu lietotne nodrošina:
- Sveiciena maršrutu uz
/kas iepazīstina ar projektu. - Komponenšu indeksu uz
/componentskas uzskaita katru komponenti. - Demonstrācijas lapu katrai komponentei uz
/components/<component>. - Īstu CSS — nevis abstraktus dizaina marķierus — lai varētu tieši aizņemties stilus.
- Darbojošos navigāciju ar tastatūru un fokusa pārvaldību uzreiz.
Jāredz, kā ir stilizēta atsevišķa komponente?
Atveriet attiecīgo paraugu lietotni, dodieties uz
/components/<name>un nokopējiet marķējumu un CSS savā projektā. Paraugu lietotnes apzināti izmanto vienkāršu (vai gandrīz vienkāršu) CSS, lai varētu tās pielāgot jebkurai jūsu vēlamai sistēmai.
Vēlaties drīzāk bezgalvas?
Savienojiet jebkuru paraugu lietotni ar atbilstošo bezgalvas pakotni — tās publicē tās pašas komponentes bez jebkāda CSS, gatavas jūsu pašu dizaina marķieriem.