CSS: page-layout

div[class~="instui-page-layout"] — Πρότυπη διάταξη σελίδας με τρεις στήλες με κεφαλίδα, πλαϊνή στήλη και κύριο περιεχόμενο.

✅ Χρησιμοποιήστε το Page-Layout όταν:

• Χρειάζεστε μια κλασική δομή σελίδας με περιοχές πλοήγησης και περιεχομένου

• Η σελίδα έχει σαφή κύρια περιοχή περιεχομένου πλαισιωμένη από συμπληρωματικές περιοχές

• Θέλετε συνεπή αποστάσεις και ευθυγράμμιση σε όλη τη διάταξη 🚫 Μην χρησιμοποιείτε το Page-Layout όταν:

• Δημιουργείτε σελίδα μιας στήλης — χρησιμοποιήστε αντ' αυτού απλούστερη διάταξη

• Η πλαϊνή στήλη ανταγωνίζεται το κύριο περιεχόμενο για σημασία

Προσβασιμότητα

• Χαρτογραφήστε την κύρια περιοχή περιεχομένου σε ένα σημείο αναφοράς <main>
• Δώστε στην πλαϊνή στήλη role="navigation" ή role="complementary" ανάλογα
• Βεβαιωθείτε ότι οι περιοχές σημείων αναφοράς έχουν διακριτές aria-labels

Χρήση

@import "@pantoken/plugin-layouts/layouts.css";

Μέρη

Μέρος	Περιγραφή
.instui-body	Κύριο σώμα που περιέχει την πλαϊνή στήλη και το περιεχόμενο.
.instui-footer	Κάτω περιοχή υποσέλιδου.
.instui-header	Πάνω περιοχή κεφαλίδας.
.instui-main	Κεντρική περιοχή περιεχομένου.
.instui-sidebar	Αριστερή στήλη πλοήγησης ή βοηθητική στήλη.

Καταστάσεις

Κατάσταση	Περιγραφή
:optional	—

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

Token	Τύπος	Τιμή
--instui-color-border	—	—
--instui-color-footer-background	—	—
--instui-color-footer-text	—	—
--instui-color-header-background	—	—
--instui-color-sidebar-background	—	—
--instui-font-size-small	<length>	—
--instui-space-medium	—	—

Σχετιζόμενα

• wrapper