CSS: drawer-layout.tray

.tray — Η πλευρική παλέτα δίπλα στο κύριο περιεχόμενο, με προαιρετικούς τροποποιητές επικάλυψης και επιφάνειας τύπου δίσκου.

Η τοποθέτηση χρησιμοποιεί inset-inline-start/inset-inline (ποτέ left/right), οπότε το -placement-end αγκυρώνεται στην πραγματική τελική άκρη τόσο σε LTR όσο και σε RTL.

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

Αν χρησιμοποιείται ως πλοήγηση, τυλίξτε τους συνδέσμους σε ένα σημασιολογικό <nav> και προσφέρετε ένα προσβάσιμο όνομα.

Χρήση

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

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

<div class="instui-drawer-layout" open>
  <aside class="tray" aria-label="Course navigation">
    <a class="instui-link" href="#">Μονάδες</a>
  </aside>
  <main class="content" role="region">Κύριο περιεχόμενο</main>
</div>

Δομή

@scope (@component drawer-layout)
  .tray
    ‹content›

flowchart TD subgraph sg0 ["@scope (@component drawer-layout)"] n1(".tray"):::cssdoc-part n2[/"‹content›"/]:::cssdoc-slot end n1 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

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

Τροποποιητής	Περιγραφή
.-placement-end	Αγκυρώστε αυτόν τον δίσκο στο inline-end όταν η λειτουργία επικάλυψης είναι ενεργή.
.-without-border	Αφαιρέστε το περίγραμμα στην ακμή του πάνελ.
.-without-shadow	Αφαιρέστε το εφέ ανύψωσης όταν η λειτουργία επικάλυψης είναι ενεργή.

Συνθήκες

Τύπος	Ερώτημα	Περιγραφή
container	pantoken-drawer-layout (max-width: 64em)	—

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

Token	Τύπος	Τιμή
--drawer-layout-tray-width	—	—
--instui-border-width-sm	<length>	0.0625rem
--instui-color-background-elevated-surface-base	<color>	LightDarklight-dark(#ffffff, #171B21)
--instui-color-stroke-base	<color>	LightDarklight-dark(#8D959F, #6A7883)
--instui-component-tray-width-xs	<length>	16em
--instui-component-tray-z-index	<integer>	9999
--instui-elevation-topmost	none | <shadow>#	—

Σχετιζόμενα

• drawer-layout.content — Το κύριο πλαίσιο που προσαρμόζεται ευέλικτα παράλληλα με αυτό το στοιχείο.