CSS: drawer-layout.content

.content — Príomhphána ábhar a líonann an spás atá fágtha taobh den tráid.

Nuair a thiteann méid-inline an tuismitheora faoi 46em (leithead an tráid 16em + pointe-briseadh 30em), laghdaíonn fiosrúchán @container ar choimeádán pantoken-drawer-layout an tuismitheora min-inline-size an bhall seo go 0 go huathoibríoch, ag teacht le breisú láimhe [should-overlay-tray].

Inrochtaineacht

Bain úsáid as role="region" (InstUI's DrawerLayout convention) agus ainmníocht é le aria-label/aria-labelledby nuair nach n-aithnítear é trí chomhthéacs amháin.

Úsáid

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

Samplaí

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

Struchtúr

@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;

Coinníollacha

Cineál	Ceist	Cur síos
container	pantoken-drawer-layout (max-width: 46em)	—

Tóicíní a úsáideadh

Token	Cineál	Luach
--drawer-layout-content-min-inline-size	<length>	—
--pantoken-bp-md	<length>	30em

Gaolmhar

• drawer-layout.tray — The adjacent panel in the same flex row.