CSS: tabs ​

.instui-tabs — یک مجموعه پنل تب‌دار: یک فهرست تب، تب‌های انتخاب‌شدنی، و پنل‌های مربوطه.

برای دکمه‌های تب منفرد و پنل‌های محتوای آنها، اعضای tabs.tab و tabs.panel را ببینید.

Source: panel.css

TIP

افزایش JS — CSS این مؤلفه به‌تنهایی رندر و کار می‌کند؛ آن را با @pantoken/interactions جفت کنید تا رفتار تعاملی اضافه شود. جدول مدیفایرها در پایین را ببینید.

دسترس‌پذیری ​

فهرست تب را با role="tablist"، هر تب را با role="tab" و aria-selected، و هر پنل را با role="tabpanel" سیم‌کشی کنید.

نحوه استفاده ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/tabs.css";

نمونه‌ها ​

html
<div class="instui-tabs -variant-secondary">
  <div class="list" role="tablist" aria-label="Project views">
    <button class="tab -selected" role="tab" aria-selected="true">نمای کلی</button>
    <button class="tab" role="tab" aria-selected="false">فعالیت</button>
  </div>
  <div class="panel" role="tabpanel">نمای کلی پروژه</div>
</div>

ساختار ​

text
.instui-tabs
  list (component)
    tabs.tab (component, 0..n)
  tabs.panel (component, 0..n)
flowchart TD n0[".instui-tabs"]:::cssdoc-root n1(["list"]):::cssdoc-component n2(["tabs.tab"]):::cssdoc-component n3(["tabs.panel"]):::cssdoc-component n1 -->|0..n| n2 n0 --> n1 n0 -->|0..n| n3 click n1 "/api/css/list.md" click n2 "/api/css/tabs.tab.md" click n3 "/api/css/tabs.panel.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

تعدیل‌کننده‌ها ​

تعدیل‌کنندهتوضیحات
.-overflow-scrollفهرست تب را در یک خط نگه دارید و به‌جای شکستن سطرها، آن را به‌صورت افقی اسکرول‌پذیر کنید و نوار اسکرول را مخفی نمایید.
.-variant-secondaryتب‌های «پوشه‌ای» گرد با یک تب انتخاب‌شده که از نظر بصری به پنل زیر متصل می‌شود. @affects tabs.tab — دکمه‌های تب را به ظاهر گردِ «پوشه‌ای» بازطراحی می‌کند.

قسمت‌ها ​

قسمتتوضیحات
.listردیف تب‌ها.

توکن‌های مصرف‌شده ​

Tokenنوعمقدار
--instui-component-tabs-default-background<color>#00000000

زیرمولفه‌ها ​