CSS: drawer-layout.content

.content — Az elsődleges tartalmi panel, amely kitölti a tálca melletti fennmaradó helyet.

Amint a szülő elem inline-size mérete 46em alá csökken (16em tálcaszélesség + 30em töréspont), a szülő pantoken-drawer-layout konténerén lévő @container lekérdezés automatikusan 0 értékre csökkenti ezen tag min-inline-size értékét, igazodva a kézi [should-overlay-tray] felülbíráláshoz.

Akadálymentesség

Tartalmazza a(z) role="region" elemet (az InstUI DrawerLayout konvenciója), és nevezze el a(z) aria-label/aria-labelledby segítségével, ha a kontextus önmagában nem azonosítja.

Használat

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

Példák

<div class="instui-drawer-layout">
  <div class="content" role="region">
    <p class="instui-text">Tray content</p>
  </div>
</div>

Felépítés

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

flowchart TD subgraph sg0 ["@scope (@component drawer-layout)"] n1(".content"):::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;

Feltételek

Típus	Lekérdezés	Leírás
container	pantoken-drawer-layout (max-width: 46em)	—

Felhasznált tokenek

Token	Típus	Érték
--drawer-layout-content-min-inline-size	<length>	—
--pantoken-bp-md	<length>	30em

Kapcsolódó

• drawer-layout.tray — A szomszédos panel ugyanabban a flex sorban.