CSS: drawer-layout ​

.instui-drawer-layout — Διάταξη με διπλή στήλη με συρόμενο πλάι και κύριο κύλινδρο περιεχομένου με δυνατότητα κύλισης.

-placement-end και η προεπιλεγμένη (start) χρησιμοποιούν και οι δύο τις λογικές ιδιότητες flex-direction/inset-inline-*, όχι left/right, έτσι η πλευρά του δίσκου ακολουθεί αυτόματα direction/dir="rtl" — δεν χρειάζονται ξεχωριστοί κανόνες RTL.

Source: drawer-layout.css

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

Όταν ο δίσκος λειτουργεί ως πλοήγηση, επισημάνετε τον με έναν προσβάσιμο τίτλο ή aria-label. Δώστε σε .content role="region" (συμβατότητα InstUI DrawerLayout) και ονομάστε τον με aria-label/aria-labelledby όταν το πλαίσιο από μόνο του δεν τον προσδιορίζει.

Χρήση ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/drawer-layout.css";

Παραδείγματα ​

html
<div class="instui-drawer-layout" id="drawer" open>
  <aside class="tray">Navigation</aside>
  <main class="content" role="region">Main content</main>
</div>

Δομή ​

text
.instui-drawer-layout
  drawer-layout.tray (component)
  drawer-layout.content (component)
flowchart TD n0[".instui-drawer-layout"]:::cssdoc-root n1(["drawer-layout.tray"]):::cssdoc-component n2(["drawer-layout.content"]):::cssdoc-component n0 --> n1 n0 --> n2 click n1 "/api/css/drawer-layout.tray.md" click n2 "/api/css/drawer-layout.content.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;

Τροποποιητές ​

ΤροποποιητήςΠεριγραφή
.-openΕμφάνιση του δίσκου ακόμη και όταν το χαρακτηριστικό open λείπει.
.-placement-endΤοποθέτηση (dock) του δίσκου στην πλευρά inline-end.
.-placement-startΤοποθέτηση (dock) του δίσκου στην πλευρά inline-start (η προεπιλογή· το ορίζει ρητά).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Μέρη ​

ΜέροςΠεριγραφή
.contentΤο κύριο πλαίσιο.
.trayΗ πλαϊνή παλέτα.

Προσαρμοσμένες ιδιότητες ​

ΙδιότηταΤύποςΠροεπιλογήΠεριγραφή
--pantoken-bp-md——Όριο πλάτους για τη λειτουργία επικάλυψης (30em, θεματοποιείται μέσω βοηθητικών responsive).

Υποστήριξη προγράμματος περιήγησης ​

  • Τα μέλη drawer-layout.tray/drawer-layout.content μεταβαίνουν αυτόματα σε λειτουργία επικάλυψης μέσω ενός ερωτήματος @container μόλις το inline-size αυτού του στοιχείου πέσει κάτω από tray-width + --pantoken-bp-md. Η συμπεριφορά @pantoken/interactions επιπλέον εναλλάσσει [should-overlay-tray]/.-should-overlay-tray (μια χειροκίνητη υπερισχύουσα ρύθμιση) και εκπέμπει overlaytraychange για εφαρμογές που χρειάζονται την αλλαγή ως συμβάν.

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

Σχετιζόμενα ​

  • tray — Αυτόνομη επιστρωμένη άκρη (edge overlay); αυτή η διάταξη διατηρεί τον δίσκο και το περιεχόμενο στην ίδια ροή.
  • context-view — Μικρότερη αγκυροβολημένη επιφάνεια για συγκειμενικές ενέργειες και λεπτομέρεια.