ਅਸਲ ਐਪਾਂ ਵਿੱਚ Lily ਵੇਖੋ
ਸੱਤ ਕੰਮ ਕਰਨ ਵਾਲੇ ਉਦਾਹਰਨ ਪ੍ਰੋਜੈਕਟ ਦਿਖਾਉਂਦੇ ਹਨ ਕਿ ਹੈੱਡਲੈੱਸ ਕੰਪੋਨੈਂਟ ਲੈ ਕੇ, ਸਟਾਈਲਿੰਗ ਚੜ੍ਹਾ ਕੇ, ਅਸਲ ਵੈੱਬਸਾਈਟ ਕਿਵੇਂ ਸ਼ਿਪ ਕਰਨੀ ਹੈ। ਉਹ ਫ੍ਰੇਮਵਰਕ ਚੁਣੋ ਜੋ ਤੁਸੀਂ ਵਰਤਦੇ ਹੋ।
ਪੂਰੀ CSS ਅਤੇ ਰੂਟਿੰਗ ਵਾਲੀਆਂ ਡੈਮੋ ਐਪਾਂ
HTML JavaScript
ਸਾਦੇ HTML ਪੰਨੇ, ਵਨੀਲਾ JavaScript, ਕੋਈ ਬਿਲਡ ਟੂਲ ਨਹੀਂ। ਕਿਸੇ ਵੀ ਸਟੈਟਿਕ ਹੋਸਟ ਤੇ ਫਿੱਟ ਹੋ ਜਾਂਦੀ ਹੈ — ਛੋਟੀਆਂ ਸਾਈਟਾਂ ਅਤੇ ਹੌਲੀ-ਹੌਲੀ ਸੁਧਾਰ ਲਈ ਸੰਪੂਰਨ।
Svelte + SvelteKit
Svelte 5 ਰੂਨ ਵਰਤਣ ਵਾਲੀ SvelteKit 3 ਐਪ। ਕੰਪੋਨੈਂਟ ਰੂਟ, ਫਾਈਲ-ਆਧਾਰਿਤ ਰੂਟਿੰਗ, ਅਤੇ ਹਰ ਕੰਪੋਨੈਂਟ ਦੀ ਸਟਾਈਲ ਕੀਤੀ ਸਟੋਰੀਬੁੱਕ।
React + Next.js
Next.js 16 ਐਪ ਜੋ ਹਰ ਕੰਪੋਨੈਂਟ ਨੂੰ ਪ੍ਰਸੰਗ ਵਿੱਚ ਦਿਖਾਉਂਦੀ ਹੈ, ਸਾਰੇ ਪਾਸੇ TypeScript ਅਤੇ ਮਿਸ਼ਰਿਤ ਪੈਟਰਨਾਂ ਲਈ ਡੈਮੋ ਪੰਨਿਆਂ ਨਾਲ।
Vue + Nuxt.js
Nuxt 4 ਐਪ। <script setup> ਅਤੇ Composition API ਹਰ ਡੈਮੋ ਰੂਟ ਵਿੱਚ।
Angular + Analog
Angular 22 + Analog.js ਐਪ। ਫਾਈਲ-ਆਧਾਰਿਤ ਰੂਟਿੰਗ, ਸਿਗਨਲ, ਜ਼ੋਨ-ਰਹਿਤ ਤਬਦੀਲੀ ਖੋਜ, ਅਤੇ ਪੂਰਾ SSG ਪ੍ਰੀਰੈਂਡਰਿੰਗ।
Blazor Web
Razor ਕੰਪੋਨੈਂਟਾਂ ਵਾਲੀ Blazor Web ਐਪ। ਸਰਵਰ- ਅਤੇ WebAssembly-ਅਨੁਕੂਲ, .NET 10 ਬੇਸਲਾਈਨ ਨਾਲ।
Nunjucks + Eleventy
Nunjucks ਮੈਕਰੋ ਵਰਤਣ ਵਾਲੀ Eleventy ਸਾਈਟ। ਸਮੱਗਰੀ-ਭਾਰੀ ਸਟੈਟਿਕ ਸਾਈਟਾਂ ਲਈ ਆਦਰਸ਼ ਜੋ ਫਿਰ ਵੀ ਅਸਲ ਕੰਪੋਨੈਂਟ ਸਿਸਟਮ ਚਾਹੁੰਦੀਆਂ ਹਨ।
ਹਰ ਉਦਾਹਰਨ ਐਪ ਦਾ ਇੱਕੋ ਜਿਹਾ ਰੂਪ ਹੈ
ਫ੍ਰੇਮਵਰਕਾਂ ਵਿਚਕਾਰ ਛਾਲ ਮਾਰਨ ਨੂੰ ਜਾਣਿਆ-ਪਛਾਣਿਆ ਬਣਾਉਣ ਲਈ, ਹਰ ਉਦਾਹਰਨ ਐਪ ਇਹ ਦਿੰਦੀ ਹੈ:
- ਇੱਥੇ ਇੱਕ ਸਵਾਗਤ ਰੂਟ
/ਜੋ ਪ੍ਰੋਜੈਕਟ ਦੀ ਜਾਣ-ਪਛਾਣ ਕਰਵਾਉਂਦਾ ਹੈ। - ਇੱਥੇ ਇੱਕ ਕੰਪੋਨੈਂਟ ਸੂਚਕਾਂਕ
/componentsਜੋ ਹਰ ਕੰਪੋਨੈਂਟ ਦੀ ਸੂਚੀ ਦਿੰਦਾ ਹੈ। - ਇੱਥੇ ਹਰ ਕੰਪੋਨੈਂਟ ਲਈ ਇੱਕ ਡੈਮੋ ਪੰਨਾ
/components/<component>. - ਅਸਲ CSS — ਅਮੂਰਤ ਡਿਜ਼ਾਈਨ ਟੋਕਨ ਨਹੀਂ — ਤਾਂ ਜੋ ਤੁਸੀਂ ਸਟਾਈਲ ਸਿੱਧੇ ਉਧਾਰ ਲੈ ਸਕੋ।
- ਡੱਬੇ ਵਿੱਚੋਂ ਹੀ ਕੰਮ ਕਰਦੀ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਫੋਕਸ ਪ੍ਰਬੰਧਨ।
ਇੱਕ ਇਕੱਲੇ ਕੰਪੋਨੈਂਟ ਦੀ ਸਟਾਈਲਿੰਗ ਵੇਖਣੀ ਹੈ?
ਸੰਬੰਧਿਤ ਉਦਾਹਰਨ ਐਪ ਖੋਲ੍ਹੋ, ਇੱਥੇ ਜਾਓ
/components/<name>ਅਤੇ ਮਾਰਕਅੱਪ ਤੇ CSS ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕਾਪੀ ਕਰੋ। ਉਦਾਹਰਨ ਐਪਾਂ ਜਾਣ-ਬੁੱਝ ਕੇ ਸਾਦੀ (ਜਾਂ ਲਗਭਗ ਸਾਦੀ) CSS ਵਰਤਦੀਆਂ ਹਨ ਤਾਂ ਜੋ ਤੁਸੀਂ ਇਨ੍ਹਾਂ ਨੂੰ ਆਪਣੇ ਪਸੰਦੀਦਾ ਕਿਸੇ ਵੀ ਸਿਸਟਮ ਵਿੱਚ ਢਾਲ ਸਕੋ।
ਇਸ ਦੀ ਬਜਾਏ ਹੈੱਡਲੈੱਸ ਚਾਹੀਦਾ ਹੈ?
ਕਿਸੇ ਵੀ ਉਦਾਹਰਨ ਐਪ ਨੂੰ ਇਸ ਦੇ ਸੰਬੰਧਿਤ ਹੈੱਡਲੈੱਸ ਪੈਕੇਜ ਨਾਲ ਜੋੜੋ — ਉਹ ਉਹੀ ਕੰਪੋਨੈਂਟ ਬਿਨਾਂ ਕਿਸੇ CSS ਦੇ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਦੇ ਹਨ, ਤੁਹਾਡੇ ਆਪਣੇ ਡਿਜ਼ਾਈਨ ਟੋਕਨਾਂ ਲਈ ਤਿਆਰ।