Lily را گام‌به‌گام بیاموزید
خوش آمدید! هر آموزش از صفر شروع می‌کند و همان چیز کوچک را می‌سازد — یک فرم دسترس‌پذیر و سبک‌داده‌شده — در حدود ۱۰ دقیقه، تا بتوانید چارچوب‌ها را هم‌تراز مقایسه کنید. سپس با پوسته‌سازی و ترجیحات کاربر عمیق‌تر شوید.
پیش از آغاز
به‌طرز شگفت‌آوری کم نیاز دارید:
- برای آموزش HTML — فقط یک مرورگر و یک ویرایشگر متن. همین کل جعبه‌ابزار است.
- برای Svelte، React، Vue، Angular یا Nunjucks — git، Node 26 و pnpm 10 یا بالاتر.
- برای Blazor — git و .NET SDK 8 یا بالاتر.
با مؤلفه‌های بدون‌سر تازه‌کارید؟ در جای درستی هستید — هر آموزش توضیح می‌دهد چه می‌گذرد و هر گام کد دقیق برای رونوشت را نشان می‌دهد.
چهار گام از صفر تا انتشار
- نخستین مؤلفه‌تان (حدود ۵ دقیقه) — چارچوبتان را در زیر انتخاب کنید، کد را بگیرید و یک Button رندر کنید.
- ترکیب و سبک‌دهی (حدود ۵ دقیقه) — یک فرم برچسب‌دار بسازید و آن را در برابر قلاب‌های کلاس kebab-case سبک‌دهی کنید (بخشی از هر آموزش چارچوب).
- به آن پوسته بدهید (حدود ۱۵ دقیقه) — CSS دست‌نویس‌تان را با یکی از ۵۷ پوستهٔ آماده عوض کنید، سپس بگذارید کاربران در زمان اجرا تعویض کنند: آموزش پوسته‌سازی.
- به ترجیحات احترام بگذارید (حدود ۱۵ دقیقه) — انتخاب زبان و اندازهٔ متن را با یاریگرهای ترجیحات بیفزایید: آموزش یاریگرها.
چارچوبتان را انتخاب کنید
HTML
HTML معنایی را با قلاب‌های کلاس رونوشت کنید و بروید — یک مرورگر و یک ویرایشگر کافی است.
Svelte
روون‌های Svelte 5، قطعه‌ها و پیوند دوطرفه با bind:value .
React
مؤلفه‌های تابعی با value + onChange و پخش ویژگی‌های باقی‌مانده.
Vue
مؤلفه‌های تک‌فایلی Vue 3 با پشتیبانی از v-model .
Angular
مؤلفه‌های مستقل Angular با ورودی‌های سیگنال و [(value)].
Blazor
مؤلفه‌های Razor با پارامتر، ChildContentو آزمون‌های bUnit.
Nunjucks
ماکروهای رندرشده در سرور برای Eleventy و هر خط لولهٔ قالب Node.
مردد هستید؟ با HTML شروع کنید — قرارداد قلاب‌های کلاس را می‌آموزد که هر چارچوب دیگری در آن شریک است و مستقیماً از یک فایل اجرا می‌شود.
عمیق‌تر بروید
پوسته‌سازی
یکی از ۵۷ پوستهٔ آماده را پیوند دهید — 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 و تشخیص خودکار RTL.
پس از آموزش‌ها
- فهرست مؤلفه‌ها را مرور کنید — هر مؤلفه ویژگی‌ها، قرارداد ARIA و رفتار صفحه‌کلیدش را مستند می‌کند.
- یک برنامهٔ نمونه را کلون کنید تا هر ۵۷۱ مؤلفه را سبک‌داده‌شده و هم‌کار ببینید — CSS همان قلاب‌های کلاسی را هدف می‌گیرد که همین حالا به کار بردید، پس هر بخشش را در پروژه‌تان رونوشت کنید و هر طور که می‌خواهید تنظیم کنید.
- پرسشی دارید؟ صفحهٔ راهنما پاسخ‌ها، پرسش‌های متداول و راه‌های رسیدن به یک انسان دوستانه را دارد. و اگر آموزشی می‌تواند روشن‌تر باشد، به ما بگویید — با کمال میل بهبودش می‌دهیم.