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">
  <div class="list" role="tablist" aria-label="Default tabs">
    <button class="tab -selected" role="tab" aria-selected="true" aria-controls="overview-panel">Ամփոփում</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="details-panel">Մանրամասներ</button>
    <button class="tab -disabled" role="tab" aria-disabled="true" aria-controls="disabled-panel" disabled>Անջատված</button>
    <button class="tab" role="tab" aria-selected="false" aria-controls="history-panel">Պատմություն</button>
  </div>
  <div class="panel" id="overview-panel" role="tabpanel">«Ամփոփում» ներդիրի պարունակությունը ցուցադրվում է այստեղ.</div>
  <div class="panel" id="details-panel" role="tabpanel" hidden>«Ամփոփում» ներդիրի պարունակությունը ցուցադրվում է այստեղ.</div>
  <div class="panel" id="disabled-panel" role="tabpanel" hidden>«Ամփոփում» ներդիրի պարունակությունը ցուցադրվում է այստեղ.</div>
  <div class="panel" id="history-panel" role="tabpanel" hidden>«Ամփոփում» ներդիրի պարունակությունը ցուցադրվում է այստեղ.</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Գլանավոր "folder" տաբեր՝ ընտրված տաբով, որը տեսողականորեն միացվում է ստորև գտնվող վահանակին. @affects tabs.tab — Տաբ-կոճակները վերաձևում է դեպի գլանավոր "folder" տեսք.

Մասեր ​

ՄասՆկարագիր
.listՏաբերի տողը.

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--instui-component-tabs-default-background<color>#00000000

Ենթակարողություններ ​