CSS: tabs

.instui-tabs — He huinga papa ripa: he rārangi ripa, he ripa ka taea te tīpako, me ō rātou papa.

Tirohia ngā mema tabs.tab me tabs.panel mō ngā pātene ripa takitahi me ō rātou papa ihirangi.

Source: panel.css

TIP

Whakawhānui JS — Ka tahuri te CSS o tēnei waahanga, ā, ka mahi anō ia i tōna ake; whakakotahitia ki @pantoken/interactions kia tāpiri i te whanonga tuitui. Tirohia te tāblata whakarerekētanga kei raro.

Wātea mō te katoa

Tautuhia te rārangi ripa kia role="tablist", ia ripa kia role="tab" me aria-selected, ā, ia papa kia role="tabpanel".

Ngā Whakamahi

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

Ngā tauira

<div class="instui-tabs -variant-secondary">
  <div class="list" role="tablist" aria-label="Project views">
    <button class="tab -selected" role="tab" aria-selected="true">Tirohanga whānui</button>
    <button class="tab" role="tab" aria-selected="false">Mahi</button>
  </div>
  <div class="panel" role="tabpanel">Tirohanga whānui o te kaupapa</div>
</div>

Hanganga

.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;

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
.-overflow-scroll	Puritia te rārangi ripa kia kotahi te rārangi, ā, kia taea te takahuri ā-taha (scroll horizontally) kaua e whakarōpū; hunaia te pae tārahu.
.-variant-secondary	Rounded "folder" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Ka whakahou i te āhua o ngā pātene ripa kia rite ki te āhua "kōpaki" porowhita.

Wāhanga

Wāhanga	Whakamārama
.list	Te rārangi ripa.

Ngā tohu i whakamahia

Token	Momo	Uara
--instui-component-tabs-default-background	<color>	#00000000

Ngā wāhanga-iti

• list
• tabs.panel
• tabs.tab