ನಿಜವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ Lily ನೋಡಿ

ಏಳು ಕಾರ್ಯನಿರತ ಉದಾಹರಣೆ ಯೋಜನೆಗಳು ಹೆಡ್‌ಲೆಸ್ ಘಟಕಗಳನ್ನು ತೆಗೆದುಕೊಂಡು, ಶೈಲಿಯನ್ನು ಸೇರಿಸಿ, ನಿಜವಾದ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಹೇಗೆ ಬಿಡುಗಡೆ ಮಾಡುವುದು ಎಂದು ತೋರಿಸುತ್ತವೆ. ನೀವು ಬಳಸುವ ಫ್ರೇಮ್‌ವರ್ಕ್ ಆರಿಸಿ.

ಸಂಪೂರ್ಣ CSS ಮತ್ತು ರೂಟಿಂಗ್ ಹೊಂದಿರುವ ಡೆಮೊ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು

HTML JavaScript

ಸರಳ HTML ಪುಟಗಳು, ವೆನಿಲ್ಲಾ JavaScript, ಬಿಲ್ಡ್ ಸಾಧನಗಳಿಲ್ಲ. ಯಾವುದೇ ಸ್ಥಿರ ಹೋಸ್ಟ್‌ಗೆ ಹೊಂದುತ್ತದೆ — ಸಣ್ಣ ಸೈಟ್‌ಗಳು ಮತ್ತು ಕ್ರಮೇಣ ವರ್ಧನೆಗೆ ಪರಿಪೂರ್ಣ.

→ GitHub ನಲ್ಲಿ ನೋಡಿ

Svelte + SvelteKit

Svelte 5 runes ಬಳಸುವ SvelteKit 3 ಅಪ್ಲಿಕೇಶನ್. ಘಟಕ ಮಾರ್ಗಗಳು, ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್, ಮತ್ತು ಪ್ರತಿ ಘಟಕದ ಶೈಲೀಕೃತ ಸ್ಟೋರಿಬುಕ್.

→ GitHub ನಲ್ಲಿ ನೋಡಿ

React + Next.js

ಪ್ರತಿ ಘಟಕವನ್ನು ಸಂದರ್ಭದಲ್ಲಿ ತೋರಿಸುವ Next.js 16 ಅಪ್ಲಿಕೇಶನ್, ಉದ್ದಕ್ಕೂ TypeScript ಮತ್ತು ಸಂಯುಕ್ತ ಮಾದರಿಗಳಿಗೆ ಡೆಮೊ ಪುಟಗಳೊಂದಿಗೆ.

→ GitHub ನಲ್ಲಿ ನೋಡಿ

Vue + Nuxt.js

Nuxt 4 ಅಪ್ಲಿಕೇಶನ್. <script setup> ಮತ್ತು ಪ್ರತಿ ಡೆಮೊ ಮಾರ್ಗದಲ್ಲಿ Composition API.

→ GitHub ನಲ್ಲಿ ನೋಡಿ

Angular + Analog

Angular 22 + Analog.js ಅಪ್ಲಿಕೇಶನ್. ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್, ಸಿಗ್ನಲ್‌ಗಳು, ಝೋನ್‌ಲೆಸ್ ಬದಲಾವಣೆ ಪತ್ತೆ, ಮತ್ತು ಸಂಪೂರ್ಣ SSG ಪ್ರಿರೆಂಡರಿಂಗ್.

→ GitHub ನಲ್ಲಿ ನೋಡಿ

Blazor Web

Razor ಘಟಕಗಳೊಂದಿಗೆ Blazor Web ಅಪ್ಲಿಕೇಶನ್. ಸರ್ವರ್- ಮತ್ತು WebAssembly-ಸ್ನೇಹಿ, .NET 10 ಮೂಲರೇಖೆಯೊಂದಿಗೆ.

→ GitHub ನಲ್ಲಿ ನೋಡಿ

Nunjucks + Eleventy

Nunjucks ಮ್ಯಾಕ್ರೋಗಳನ್ನು ಬಳಸುವ Eleventy ಸೈಟ್. ಇನ್ನೂ ನಿಜವಾದ ಘಟಕ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಯಸುವ ವಿಷಯ-ಭರಿತ ಸ್ಥಿರ ಸೈಟ್‌ಗಳಿಗೆ ಆದರ್ಶ.

→ GitHub ನಲ್ಲಿ ನೋಡಿ

ಪ್ರತಿ ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್ ಒಂದೇ ಆಕಾರ ಹೊಂದಿದೆ

ಫ್ರೇಮ್‌ವರ್ಕ್ ಬದಲಾವಣೆ ಪರಿಚಿತವೆನಿಸಲು, ಪ್ರತಿ ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್ ಒದಗಿಸುತ್ತದೆ:

ಇಲ್ಲಿ ಸ್ವಾಗತ ಮಾರ್ಗ / ಅದು ಯೋಜನೆಯನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ.
ಇಲ್ಲಿ ಘಟಕ ಸೂಚಿ /components ಅದು ಪ್ರತಿ ಘಟಕವನ್ನು ಪಟ್ಟಿ ಮಾಡುತ್ತದೆ.
ಇಲ್ಲಿ ಪ್ರತಿ ಘಟಕಕ್ಕೆ ಡೆಮೊ ಪುಟ /components/<component>.
ನಿಜವಾದ CSS — ಅಮೂರ್ತ ವಿನ್ಯಾಸ ಟೋಕನ್‌ಗಳಲ್ಲ — ಹೀಗಾಗಿ ನೀವು ಶೈಲಿಗಳನ್ನು ನೇರವಾಗಿ ನಕಲಿಸಬಹುದು.
ಪೆಟ್ಟಿಗೆಯಿಂದಲೇ ಕೆಲಸ ಮಾಡುವ ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ಫೋಕಸ್ ನಿರ್ವಹಣೆ.

ಒಂದು ಘಟಕ ಹೇಗೆ ಶೈಲೀಕರಿಸಲ್ಪಟ್ಟಿದೆ ಎಂದು ನೋಡಬೇಕೇ?

ಸಂಬಂಧಿತ ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್ ತೆರೆಯಿರಿ, ಇಲ್ಲಿಗೆ ಹೋಗಿ /components/<name>, ಮತ್ತು ಮಾರ್ಕ್‌ಅಪ್ ಹಾಗೂ CSS ಅನ್ನು ನಿಮ್ಮ ಸ್ವಂತ ಯೋಜನೆಗೆ ನಕಲಿಸಿ. ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಸರಳ (ಅಥವಾ ಸುಮಾರು ಸರಳ) CSS ಬಳಸುತ್ತವೆ, ಹೀಗಾಗಿ ನೀವು ಇಷ್ಟಪಡುವ ಯಾವುದೇ ವ್ಯವಸ್ಥೆಗೆ ಅವನ್ನು ಹೊಂದಿಸಬಹುದು.

ಬದಲಿಗೆ ಹೆಡ್‌ಲೆಸ್ ಬೇಕೇ?

ಯಾವುದೇ ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಅದರ ಅನುಗುಣವಾದ ಹೆಡ್‌ಲೆಸ್ ಪ್ಯಾಕೇಜ್‌ನೊಂದಿಗೆ ಜೋಡಿಸಿ — ಅವು ಅದೇ ಘಟಕಗಳನ್ನು ಯಾವುದೇ CSS ಇಲ್ಲದೆ ಪ್ರಕಟಿಸುತ್ತವೆ, ನಿಮ್ಮದೇ ವಿನ್ಯಾಸ ಟೋಕನ್‌ಗಳಿಗೆ ಸಿದ್ಧ.

ಕ್ಯಾಟಲಾಗ್ ಬ್ರೌಸ್ ಮಾಡಿ → ಸೆಟಪ್ ಮಾರ್ಗದರ್ಶಿ ಓದಿ