تم تاریک

خط جداکننده Divider ​

کامپوننت Divider یا خط جداکننده، یک المان بصری سبک است که برای ایجاد مرز، تفکیک محتوا و گروه‌بندی منطقی المان‌ها در داخل صفحات، سکشن‌ها، لیست‌ها یا منوها استفاده می‌شود. این کامپوننت بدون اضافه کردن بار شناختی اضافی، ریتم بصری و سلسله‌مراتب صفحه را بهبود می‌بخشد.

نمونه زنده ​

افقیSelect option
تنظیماتSelect option
تنظیمات

آناتومی و انواع ​

دیوایدرها در سیستم طراحی سرخآب به دو جهت‌گیری اصلی تقسیم می‌شوند.

با هاور روی شماره‌های روی Divider (یا آیتم‌های لیست کنار آن)، هر بخش برجسته می‌شود.

تنظیمات
  1. 1Title
  2. 2Line
  3. 3Gap
  1. عنوان (Title): برچسب متنی اختیاری در ابتدای خط که کانتکس بخش بعدی را مشخص می‌کند.
  2. خط (Line): خط جداکننده با ضخامت 1px که فضای باقی‌مانده را پر می‌کند.
  3. فاصله (Gap): فاصله ثابت بین عنوان و خط.

افقی ​

رایج‌ترین نوع دیوایدر است که محتوای عمودی را به بخش‌های مجزا تقسیم می‌کند.

عمودی ​

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

افقی همراه با متن ​

حالت خاصی از دیوایدر افقی که یک برچسب متنی کوتاه در ابتدای خط قرار می‌گیرد تا کانتکس بخش بعدی را مشخص کند.

ساختار ​

رعایت ضخامت و فواصل اطراف دیوایدر برای حفظ تعادل بصری صفحه بسیار حیاتی است.

با هاور روی بخش‌های Divider (یا روی آیتم‌های لیست زیر آن)، اندازه‌ی مرتبط با هر بخش نمایش داده می‌شود.

تنظیمات
  1. 1pxLine Thickness
  2. 16pxTitle to Line Gap
  3. AllAll Sizes

ضخامت و رنگ ​

  • ضخامت خط (Thickness): به صورت استاندارد 1px است.
  • رنگ خط: از توکن‌های رنگ ضعیف سیستم neutral/t1/st5/default استفاده می‌کند تا بیش از حد جلب توجه نکند.

فواصل دیوایدر همراه با متن ​

  • فاصله متن تا خط (Gap): مقدار space-4 معادل 16px.
  • تایپوگرافی متن: از استایل body-2 با رنگ خنثی neutral/t1/fg2/default استفاده می‌شود.

موارد کاربرد ​

چه زمانی استفاده کنیم؟ ​

  • تفکیک گروه‌های فرم: برای جدا کردن گروه تنظیمات شبکه از تنظیمات عمومی در یک فرم طولانی.
  • ساید پنل (Side Panel) یا مودال.
  • منوهای کشویی: برای دسته‌بندی اکشن‌های خطرناک (مثل حذف) از بقیه اکشن‌های عادی در Dropdown Menu.
  • نوار ابزار (Toolbar): استفاده از دیوایدر عمودی برای گروه‌بندی دکمه‌های هم‌خانواده.

چه زمانی استفاده نکنیم؟ ​

  • استفاده بیش از حد: اگر فضای سفید (White Space) به تنهایی می‌تواند دو بخش را تفکیک کند، از دیوایدر استفاده نکنید؛ خطوط زیاد باعث شلوغی بصری می‌شود.
  • بین تمام ردیف‌های جدول: در جداول سرخآب، رنگ پس‌زمینه زبرا (Zebra) یا border سلول‌ها کافی است و نیازی به قرار دادن Divider جداگانه نیست.