Lily चरण दर चरण सीखें
स्वागत है! हर ट्यूटोरियल शून्य से शुरू होता है और लगभग 10 मिनट में वही एक छोटी चीज़ — एक पहुँचनीय, स्टाइल किया हुआ फ़ॉर्म — बनाता है, ताकि आप फ़्रेमवर्कों की बराबरी से तुलना कर सकें। फिर थीम और उपयोगकर्ता की वरीयताओं में और गहराई में जाएँ।
शुरू करने से पहले
आपको आश्चर्यजनक रूप से कम चीज़ें चाहिए:
- HTML ट्यूटोरियल के लिए — बस एक ब्राउज़र और एक टेक्स्ट एडिटर। यही पूरा टूलकिट है।
- Svelte, React, Vue, Angular या Nunjucks के लिए — git, Node 26 और pnpm 10 या उसके बाद का संस्करण।
- Blazor के लिए — git और .NET SDK 8 या उसके बाद का संस्करण।
headless कंपोनेंट में नए हैं? आप सही जगह पर हैं — हर ट्यूटोरियल चलते-चलते समझाता है कि क्या हो रहा है, और हर चरण नकल करने के लिए ठीक-ठीक कोड दिखाता है।
शून्य से प्रकाशन तक चार चरण
- आपका पहला कंपोनेंट (~5 मिनट) — नीचे अपना फ़्रेमवर्क चुनें, कोड प्राप्त करें, और एक बटन रेंडर करें।
- जोड़ें और स्टाइल करें (~5 मिनट) — लेबल वाला फ़ॉर्म बनाएँ और उसे kebab-case क्लास हुक के अनुसार स्टाइल करें (हर फ़्रेमवर्क ट्यूटोरियल का हिस्सा)।
- थीम लगाएँ (~15 मिनट) — अपनी हाथ से लिखी CSS को 45 तैयार थीम में से किसी एक से बदलें, फिर उपयोगकर्ताओं को रनटाइम पर बदलने दें: थीम ट्यूटोरियल।
- वरीयताओं का सम्मान करें (~15 मिनट) — वरीयता सहायकों के साथ भाषा और पाठ आकार का चयन जोड़ें: सहायक ट्यूटोरियल।
अपना फ़्रेमवर्क चुनें
HTML
क्लास हुक के साथ अर्थपूर्ण HTML की नकल करें और शुरू हो जाएँ — ब्राउज़र और एडिटर काफ़ी हैं।
Svelte
Svelte 5 रून, स्निपेट और bind:value द्विदिश बाइंडिंग।
React
value + onChange और शेष प्रॉप्स फैलाने के साथ फ़ंक्शन कंपोनेंट।
Vue
v-model समर्थन के साथ Vue 3 सिंगल-फ़ाइल कंपोनेंट।
Angular
सिग्नल इनपुट और [(value)] के साथ Angular स्टैंडअलोन कंपोनेंट।
Blazor
पैरामीटर, ChildContent और bUnit परीक्षणों के साथ Razor कंपोनेंट।
Nunjucks
Eleventy और किसी भी Node टेम्पलेट पाइपलाइन के लिए सर्वर पर रेंडर होने वाले मैक्रो।
तय नहीं कर पा रहे? HTML से शुरू करें — यह वह क्लास हुक अनुबंध सिखाता है जो बाकी सभी फ़्रेमवर्क साझा करते हैं, और यह सीधे फ़ाइल से चलता है।
और गहराई में
थीमिंग
45 तैयार थीम में से कोई एक जोड़ें — NHS, GOV.UK, USWDS, हल्की, गहरी और अन्य — उसे अपनी CSS से ओवरराइड करें, और theme-picker सहायक के साथ रनटाइम पर थीम बदलने की सुविधा जोड़ें।
वरीयता सहायक
theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker और date-time-picker के साथ उपयोगकर्ताओं को थीम, भाषा, पाठ आकार, गति, खोज, पृष्ठ लिंक, साझा करने और दिनांक/समय प्रविष्टि पर नियंत्रण दें: संग्रहण, SSR सुरक्षा और दाएँ-से-बाएँ लेखन की स्वचालित पहचान वाले headless नियंत्रण।
ट्यूटोरियल के बाद
- कंपोनेंट कैटलॉग देखें — हर कंपोनेंट अपनी प्रॉपर्टी, ARIA अनुबंध और कीबोर्ड व्यवहार दस्तावेज़ित करता है।
- सभी 571 कंपोनेंट को स्टाइल किए और साथ काम करते देखने के लिए एक उदाहरण ऐप क्लोन करें — उसकी CSS उन्हीं क्लास हुक को लक्षित करती है जो आपने अभी इस्तेमाल किए, इसलिए जो चाहें अपने प्रोजेक्ट में नकल करें और अपनी इच्छानुसार बदलें।
- सवाल? सहायता पृष्ठ पर उत्तर, अक्सर पूछे जाने वाले प्रश्न, और किसी मिलनसार इंसान तक पहुँचने के तरीके हैं। और यदि कोई ट्यूटोरियल और स्पष्ट हो सकता है, तो हमें बताएँ — हम खुशी से उसे सुधारेंगे।