CSS: tabs ​

.instui-tabs — Set o bynnau tabiedig: rhes o dabiau, tabiau y gellir eu dewis, a'u paneli.

Gweler yr aelodau tabs.tab a tabs.panel ar gyfer y botymau tab unigol a'u paneli cynnwys.

Source: panel.css

TIP

Gwelliant JS — Mae CSS y cydran hwn yn rendro ac yn gweithio ar ei ben ei hun; paru ag @pantoken/interactions i ychwanegu’r ymddygiad rhyngweithiol. Gweler y tabl modifier isod.

Hygyrchedd ​

Gwnewch y rhes dabiau â role="tablist", pob tab â role="tab" a aria-selected, a phob panel â role="tabpanel".

Defnydd ​

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

Enghreifftiau ​

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">Trosolwg</button>
    <button class="tab" role="tab" aria-selected="false">Gweithgarwch</button>
  </div>
  <div class="panel" role="tabpanel">Trosolwg y prosiect</div>
</div>

Strwythur ​

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;

Modyfiwyr ​

ModyfiwrDisgrifiad
.-overflow-scrollCadwch y rhes dabiau ar un llinell a gadewch iddi sgrolio'n llorweddol yn hytrach na thorri i linellau, gan guddio'r bar sgrolio.
.-variant-secondaryTabiau “ffolder” crwn gydag un tab wedi'i ddewis sy'n cysylltu'n weledol â'r panel isod. @affects tabs.tab — Ailddylunio'r botymau tab i'r edrychiad “ffolder” crwn.

Rhannau ​

RhanDisgrifiad
.listY rhes o dabiau.

Tocynnau a ddefnyddiwyd ​

TokenMathGwerth
--instui-component-tabs-default-background<color>#00000000

Is-gydrannau ​