CSS: tabs ​

.instui-tabs — एक टैब्ड पैनल सेट: एक टैब सूची, चयन योग्य टैब, और उनके पैनल।

व्यक्तिगत टैब बटन और उनके सामग्री पैनलों के लिए tabs.tab और tabs.panel सदस्यों को देखें।

Source: panel.css

एक्सेसिबिलिटी ​

टैब सूची को 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">Overview</button>
    <button class="tab" role="tab" aria-selected="false">Details</button>
    <button class="tab -disabled" role="tab" aria-disabled="true" disabled>Disabled</button>
    <button class="tab" role="tab" aria-selected="false">History</button>
  </div>
  <div class="panel" role="tabpanel">The Overview tab's content shows here.</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

सबकम्पोनेन्ट्स ​