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 کے ذریعے صارفین کو تھیم، زبان، متن کے سائز، حرکت، تلاش، صفحے کے لنکس، شیئرنگ، اور تاریخ/وقت کے اندراج پر اختیار دیں: headless کنٹرولز جن میں محفوظ کاری، SSR کی حفاظت، اور دائیں سے بائیں تحریر کی خودکار شناخت شامل ہے۔
ٹیوٹوریلز کے بعد
- کمپوننٹ کیٹلاگ دیکھیں — ہر کمپوننٹ اپنی پراپرٹیز، ARIA معاہدہ، اور کی بورڈ رویہ دستاویز کرتا ہے۔
- تمام 571 کمپوننٹس کو سٹائل شدہ اور ساتھ کام کرتے دیکھنے کے لیے ایک مثالی ایپ کلون کریں — اس کی CSS انہی کلاس ہُکس کو ہدف بناتی ہے جو آپ نے ابھی استعمال کیے، اس لیے جو چاہیں اپنے منصوبے میں نقل کریں اور اپنی مرضی سے بدلیں۔
- سوالات؟ مدد کے صفحے پر جوابات، عمومی سوالات، اور کسی ملنسار انسان تک پہنچنے کے طریقے موجود ہیں۔ اور اگر کوئی ٹیوٹوریل زیادہ واضح ہو سکتا ہے تو ہمیں بتائیں — ہم خوشی سے اسے بہتر کریں گے۔