کامپوننت‌ها

دکمه‌ی اصلی برای اجرای یک عمل، با چند حالت رنگ و اندازه.

چند دکمه‌ی چسبیده به هم برای انتخاب یا اجرای گزینه‌های مرتبط.

دکمه‌ی ضربدریِ کوچک برای بستن دیالوگ، تب یا اعلان.

برچسبِ متنیِ هر فیلد فرم، همراه با اتصال دسترس‌پذیر به ورودی.

ورودیِ متنیِ پایه برای دریافت یک خط داده از کاربر.

بسته‌بندیِ ورودی با آیکون یا متنِ کمکی در ابتدا/انتهای فیلد.

ورودیِ متنی به‌همراه برچسب، توضیح و پیام خطا در یک بسته.

ورودیِ رمزِ عبور با دکمه‌ی نمایش/پنهان‌کردنِ کاراکترها.

ورودیِ جست‌وجو با آیکون ذره‌بین و دکمه‌ی پاک‌کردن.

ورودیِ متنیِ چندخطی برای پیام‌ها و توضیحاتِ بلند.

ورودیِ عددی با دکمه‌های افزایش و کاهشِ مقدار.

گزینه‌ی تیک‌خورِ دوحالته یا سه‌حالته برای انتخاب‌های چندگانه.

انتخابِ یک گزینه از میانِ چند گزینه‌ی هم‌گروه.

کلیدِ روشن/خاموش برای تنظیماتِ دوحالته.

فهرستِ کشویی برای انتخابِ یک مقدار از میانِ گزینه‌ها.

فهرستِ گزینه‌های قابل‌انتخاب بدون نیاز به باز/بسته‌شدن.

ورودیِ متنی با پیشنهادِ گزینه‌ها هنگامِ تایپ.

ترکیبِ ورودیِ متنی و فهرستِ کشویی برای جست‌وجو و انتخاب.

انتخابِ مقدار از یک بازه با کشیدنِ دستگیره روی خط.

دکمه‌ی دوحالته‌ی فشرده، مثلِ روشن/خاموش‌کردنِ یک ابزار.

چند Toggle کنارِ هم برای انتخابِ یک یا چند گزینه.

امتیازِ ستاره‌ای برای ثبت یا نمایشِ نظرِ کاربر.

ناحیهٔ کشیدن‌ورهاکردن با فهرست و حذفِ فایل‌ها.

ضبطِ پیامِ صوتی و پخشِ دوبارهٔ آن پیش از ارسال.

لوگوی بانک از شماره کارت یا شبا، داخلِ فیلد یا کنارِ حساب.

فیلدِ پلاکِ خودروی ایران با ظاهرِ خودِ پلاک.

ورودیِ کدِ یک‌بارمصرف با خانه‌های جداگانه برای هر رقم.

نمایشِ گاه‌شمار برای انتخابِ یک تاریخ.

ورودیِ تاریخ همراه با تقویمِ کشویی برای انتخابِ سریع.

انتخابِ یک بازه‌ی تاریخ (شروع تا پایان) از تقویم.

ورودیِ بازه‌ی تاریخ همراه با تقویمِ کشویی.

ورودیِ تاریخ به‌صورتِ بخش‌بخش (روز، ماه، سال).

ورودیِ ساعت به‌صورتِ بخش‌بخش (ساعت، دقیقه).

بسته‌بندیِ کاملِ یک فرم با اعتبارسنجی و مدیریتِ مقادیر.

گروه‌بندیِ بصریِ چند فیلدِ مرتبط زیرِ یک عنوان.

یک تکه‌رنگِ تک، برای نمایشِ سریعِ مقدارِ انتخاب‌شده در فهرست‌ها.

ناحیهٔ دوبعدیِ اشباع/روشنایی به‌همراه نوارِ هیو، برای انتخابِ دقیقِ رنگ.

ورودیِ متنیِ رنگ با پیش‌نمایشِ زنده، داخلِ یک فرمِ معمولی.

اسلایدرهای هیو و آلفا، هرکدام با ترکِ گرادیانِ خودشان.

پنلِ کاملِ انتخابِ رنگ که از یک سواچِ کوچک باز می‌شود.

گریدِ سواچ برای انتخابِ سریع، مثلِ انتخابِ رنگِ یک محصول.

نشانِ کوچکِ عددی یا وضعیتی، معمولاً روی یک آیکون یا دکمه.

برچسبِ کوچکِ قابل‌حذف برای نمایشِ یک مقدار یا فیلتر.

مجموعه‌ای از Chip برای نمایش یا مدیریتِ چند برچسب با هم.

دکمهٔ افزودن به سبد که بعد از لمس به شمارندهٔ تعداد تبدیل می‌شود.

کارتِ محصول در سه اندازهٔ استاندارد با تصویر، قیمت، تخفیف و دکمهٔ خرید.

پخشِ پیام یا فایلِ صوتی با نوارِ زمان و مکث.

پیامِ خالی‌بودنِ فهرست یا جست‌وجو با یک کنشِ روشن.

پیامِ برجسته برای اطلاع‌رسانی، هشدار یا خطا در صفحه.

نوارِ فشرده و تک‌خطی برای خبرِ کوتاه، با آیکونِ پر، دکمهٔ کنش و بستن.

کارتِ تمام‌رنگ با آیکون، عنوان و توضیح؛ با دکمهٔ بستن یا ستونِ دوکنشی.

قابِ محتوایی برای گروه‌بندیِ عنوان، متن و عمل‌های مرتبط.

نموداری برای نمایشِ بصریِ داده‌های عددی.

هفت نوعِ نمودارِ آماده با ۷۰ نمونه: میله‌ای، خطی، ناحیه‌ای، دایره‌ای، شعاعی، راداری و تولتیپ.

نوارِ شناورِ اقدام‌های گروهی برای سطرهای انتخاب‌شده.

جدولِ داده با ردیف و ستون، برای نمایشِ مجموعه‌ای از رکوردها.

تصویر یا حرفِ اول نامِ کاربر در یک دایره یا مربعِ کوچک.

نوارِ پیشرفت برای نمایشِ درصدِ تکمیلِ یک فرایند.

قالبِ خاکستریِ چشمک‌زن برای نمایشِ حالتِ بارگذاری.

نشانگرِ چرخانِ کوچک برای بارگذاریِ نامشخص.

نمایشِ یک مقدار روی یک بازه‌ی مشخص، مثلِ ظرفیت یا امتیاز.

نمایشِ مراحلِ یک فرایندِ چندمرحله‌ای و مرحله‌ی جاری.

خطِ نازکِ جداکننده‌ی بینِ دو بخشِ محتوا.

ناحیه‌ی اسکرول‌شونده با اسکرول‌بارِ سفارشی.

سایه‌ی ظریف در لبه‌ی ناحیه‌ی اسکرول‌شونده برای نشان‌دادنِ ادامه‌ی محتوا.

بخشِ محتوایی که با کلیک باز و بسته می‌شود.

چند Collapsible کنارِ هم، مستقل از یکدیگر.

اعلانِ کوتاه و موقت در گوشه‌ی صفحه.

نگه‌داشتنِ نسبتِ ثابتِ عرض به ارتفاع برای محتوایی مثلِ تصویر یا ویدیو.

پنل‌های قابلِ تغییرِ اندازه با کشیدنِ مرزِ بینشان.

نوارِ کناریِ ناوبری، معمولاً در کنارِ محتوای اصلیِ صفحه.

نمایشِ چرخشیِ چند اسلاید یا کارت، یکی پس از دیگری.

ردیفی از دکمه‌ها و ابزارهای مرتبط، معمولاً بالای یک ناحیه‌ی کاری.

نوار ابزار تیرهٔ شناور روی متن یا تصویرِ انتخاب‌شده، با حالت افزودن لینک.

سطحِ پایه‌ی بصری با پس‌زمینه و سایه، برای ساختنِ کامپوننت‌های دیگر.

سوییچ بینِ چند نمایِ محتوایی با کلیک روی برگه‌ها.

فهرستی از بخش‌های قابلِ باز و بسته‌شدن، یکی یا چندتا هم‌زمان.

مسیرِ سلسله‌مراتبیِ صفحه‌ی جاری نسبت به صفحه‌ی اصلی.

پیمایش بینِ صفحاتِ یک فهرستِ طولانی.

توضیحِ کوتاه که با هاور روی یک عنصر ظاهر می‌شود.

پیش‌نمایشِ محتوای بیشتر هنگامِ هاور روی یک عنصر.

پنلِ شناور با محتوای دلخواه که از یک دکمه باز می‌شود.

پنجره‌ی مودالِ روی صفحه برای تمرکز روی یک کار.

دیالوگِ تأییدِ یک عملِ حساس یا برگشت‌ناپذیر.

پنلِ شناور از لبه‌ی صفحه، مناسبِ فرم‌ها و جزئیات.

پنلِ کشویی از پایین یا کنارِ صفحه، بیشتر در موبایل.

فهرستِ کشویی از عمل‌ها، بازشونده از یک دکمه.

فهرستِ عمل‌ها که با کلیکِ راست ظاهر می‌شود.

نوارِ منویِ افقی با چند فهرستِ کشویی، مثلِ برنامه‌های دسکتاپ.

منویِ ناوبریِ اصلیِ سایت با زیرمنوهای تودرتو.

نوارِ بالای صفحه با عنوان، آیکون‌ها و عمل‌های اصلی.

نوارِ ناوبریِ پایینِ صفحه، مناسبِ اپ‌های موبایل.

نوار کنشِ پایینِ صفحهٔ موبایل با دکمهٔ اصلی و کنش‌های آیکونی.

پالتِ فرمانِ جست‌وجوپذیر برای اجرای سریعِ عمل‌ها.

مجموعه‌ی سبک‌های متنیِ آماده، از تیتر تا پاراگراف.

نمایشِ کلیدِ صفحه‌کلید یا میان‌بر به‌شکلِ یک دکمه‌ی کوچک.

متنِ قابل‌کلیک برای رفتن به یک صفحه یا آدرسِ دیگر.

نوارِ باریکِ بالای صفحه برای اعلانِ یک خبر یا تخفیفِ موقت.

نقل‌قولِ مشتری همراه با نام، عکس و سِمَتِ او.

کارتِ کوچکِ یک عددِ کلیدی همراه با برچسب و روندِ تغییر.

کارتِ یک پلنِ قیمت‌گذاری با فهرستِ امکانات و دکمهٔ خرید.

پاصفحهٔ چندستونهٔ صفحاتِ فرود با گروهِ لینک‌ها و شبکهٔ اجتماعی.

ردیف یا ستونی که با CSS خالص بی‌نهایت اسکرول می‌کند.

بلوکِ کد با ظاهرِ ترمینال و دکمهٔ کپی.

پترنِ تزئینیِ پس‌زمینه برای هیرو و بخش‌های تبلیغاتی.

بلوکِ تاشوی استدلالِ مدل‌های ریزنینگ، با زمان‌سنجِ خودکار.

ردیفِ یک پیام در گفتگو، با آواتار و دکمه‌های عمل.

کامپوزرِ چت با Enterِ ارسال و Shift+Enterِ خطِ جدید.

افشای تدریجیِ متن برای شبیه‌سازیِ پاسخِ جریانیِ مدل.

نشانگرِ بارگذاریِ agent با چند واریانتِ بصری و شمارندهٔ ثانیهٔ سپری‌شده.

چند سوالِ تک‌انتخابیِ پشتِ‌سرِهم که عامل قبل از یک اقدام باید تاییدشان بگیرد.

ردیفِ چیپ‌هایِ فشردهٔ فراخوانیِ ابزار با وضعیتِ در حال اجرا/تمام/خطا.

فهرستِ وضعیتِ زندهٔ تسک‌هایِ agent با امکانِ زیرردیف‌هایِ باز‌شونده.

پیشنهادِ عامل با سنجهٔ اطمینان و فهرستِ گزینه‌هایِ جایگزین.

فهرستِ قطعه‌هایِ بازیابی‌شدهٔ RAG با منبع و تعدادِ نویسه.

لایهٔ نازکِ روی Table برای نمایشِ ردیف‌هایِ افزوده/حذف/تغییرکرده.

سلول‌هایِ آماده برایِ گریدِ سبکِ CRM داخلِ Table معمولی.