CSS: drawer-layout ​

.instui-drawer-layout — Katlanabilir bir yan çekmecesi ve birincil kaydırılabilir içerik paneli olan bölünmüş bir düzen.

-placement-end ve varsayılan (başlangıç) her ikisi de flex-direction/inset-inline-* mantıksal özelliklerini kullanır, left/right değil, bu yüzden çekmecenin tarafı otomatik olarak direction/dir="rtl"'ya uyar — ayrı RTL kurallarına gerek yoktur.

Source: drawer-layout.css

Erişilebilirlik ​

Çekmeç gezinim görevi görüyorsa, erişilebilir bir başlık veya aria-label ile etiketleyin. .content'e role="region" verin (InstUI'nın DrawerLayout kuralı) ve bağlam tek başına tanımlamıyorsa ona aria-label/aria-labelledby ile ad verin.

Kullanım ​

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

Örnekler ​

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

Yapı ​

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;

Değiştiriciler ​

DeğiştiriciAçıklama
.-openopen özniteliği yokken bile çekmeç gösterilsin.
.-placement-endÇekmeciyi inline-end tarafına sabitle.
.-placement-startÇekmeciyi inline-start tarafına sabitle (varsayılan; bunu açıkça ayarlar).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Bölümler ​

ParçaAçıklama
.contentAna panel.
.trayYan panel.

Özel özellikler ​

ÖzellikTürVarsayılanAçıklama
--pantoken-bp-md——Örtü modu için genişlik eşik değeri (30em, duyarlı yardımcılarla temalandırılır).

Tarayıcı desteği ​

  • drawer-layout.tray/drawer-layout.content üyeleri, bu öğenin inline-boyutu çekmeç-genişliği + --pantoken-bp-md'ün altına düştüğünde bir @container sorgusu aracılığıyla otomatik olarak örtü moduna geçer. @pantoken/interactions davranışı ayrıca [should-overlay-tray]/.-should-overlay-tray'yı (elle geçersiz kılma) değiştirir ve değişikliği olay olarak yakalaması gereken uygulamalar için overlaytraychange yayımlar.

Alt bileşenler ​

İlgili ​

  • tray — Bağımsız bir kenar örtüsü; bu düzen çekmeç ile içeriği aynı akışta tutar.
  • context-view — Bağlamsal eylemler ve ayrıntılar için daha küçük, sabitlenmiş bir yüzey.