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Η σειρά των καρτελών.

Καταναλωμένα tokens ​

TokenΤύποςΤιμή
--instui-component-tabs-default-background<color>#00000000

Υποσυστατικά ​