CSS: drawer-layout.content ​

.content — Y prif panel cynnwys sy’n llenwi’r gofod sydd ar ôl wrth ymyl y tray.

Unwaith y bydd maint-linellol y rhiant yn disgyn yn is na 46em (lled y tray 16em + pwynt torri 30em), mae ymholiad @container ar gynhwysydd pantoken-drawer-layout y rhiant yn lleihau min-inline-size yr aelod hwn i 0 yn awtomatig, gan gyd-fynd â’r disodliad llaw [should-overlay-tray].

Hygyrchedd ​

Cadwch role="region" (confensiwn DrawerLayout InstUI) a’i enwi gyda aria-label/aria-labelledby pan nad yw’r cyd-destun yn unig yn ei adnabod.

Defnydd ​

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

Enghreifftiau ​

html
<div class="instui-drawer-layout">
  <div class="content" role="region">
    <p class="instui-text">Cynnwys y tray</p>
  </div>
</div>

Strwythur ​

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

Amodau ​

MathYmchwiliadDisgrifiad
containerpantoken-drawer-layout (max-width: 64em)—

Tocynnau a ddefnyddiwyd ​

TokenMathGwerth
--drawer-layout-content-min-inline-size<length>—
--pantoken-bp-md<length>48em

Perthnasol ​