Tabs

المان Tabs محتوای tabbed با چیدمان افقی یا عمودی و fallback accordion واکنش‌گرا ایجاد می‌کند.

تنظیمات

Tabs (repeater) — آیتم‌های tab را اضافه کنید. هر tab شامل:
Icon (icon) — آیکون اختیاری برای tab.
Icon position (select) — موقعیت آیکون نسبت به متن. پیش‌فرض: Left. نیاز به تنظیم آیکون دارد.
Title (text) — عنوان tab.
ID (text) — Anchor ID برای لینک دادن به tab.
Content (editor) — محتوای نمایش داده‌شده وقتی tab فعال است.
Layout (select) — جهت tab. گزینه‌ها: horizontal، vertical. پیش‌فرض: horizontal.
Accordion layout at breakpoint (select) — در breakpoint زیر این مقدار به چیدمان accordion تغییر دهید.
Open tab on (select) — تریگر برای باز کردن tab. گزینه‌ها: click، hover. پیش‌فرض: click.
Open tab index (text) — ایندکس tab برای باز شدن هنگام بارگذاری صفحه، از 0 شروع می‌شود. پیش‌فرض: 0.

Stretch (checkbox) — عناوین tab را تا پر کردن فضای موجود کشیده کنید (فقط چیدمان افقی). flex-grow: 1 را روی .tab-title تنظیم می‌کند.
Align (justify-content) — تراز افقی عناوین tab (فقط چیدمان افقی). justify-content را روی .tab-menu کنترل می‌کند.
Padding (spacing) — padding داخل عناوین tab. پیش‌فرض: 20px (بالا، راست، پایین، چپ).
Background (color) — رنگ پس‌زمینه عناوین tab.
Border (border) — استایل border برای عناوین tab. پیش‌فرض: 1px solid #dedede (بالا، راست، چپ؛ بدون پایین).
Typography (typography) — استایل فونت برای عناوین tab.
Active background (color) — رنگ پس‌زمینه عناوین tab فعال.
Active border (border) — استایل border برای عناوین tab فعال.
Active typography (typography) — استایل فونت برای عناوین tab فعال.

Padding (spacing) — padding داخل محتوای tab. پیش‌فرض: 20px (بالا، راست، پایین، چپ).
Text align (text-align) — تراز متن برای محتوای tab.
Text color (color) — رنگ متن محتوای tab.
Background color (color) — رنگ پس‌زمینه محتوای tab.
Border (border) — استایل border برای محتوای tab. پیش‌فرض: 1px solid #dedede (همه طرف‌ها).

مرجع توسعه‌دهنده

JSON schema کامل: tabs Schema