CSS: drawer-layout.content ​

.content — հիմնական պարունակության վահանակը, որը լրացնում է տրեյի կողքին մնացած տարածքը.

Երբ ծնողի inline-size-ը կնվազի 46em-ից ներքև ( 16em tray-ի լայնություն + 30em breakpoint ), ծնողի pantoken-drawer-layout կոնտեյների վրա կատարվող @container հարցումը ավտոմատաբար իջեցնում է այս անդամի min-inline-size-ը դեպի 0, համապատասխանելով ձեռքով սահմանված [should-overlay-tray] փոխարինմանը.

Մուտքականություն ​

Պահել role="region" (InstUI's DrawerLayout convention) և անվանել այն aria-label/aria-labelledby-ով, երբ միայն համատեքստը չի նույնացնում այն.

Օգտագործում ​

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

Օրինակներ ​

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

Կառուցվածք ​

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;

Պայմաններ ​

ՏիպՀարցումՆկարագիր
containerpantoken-drawer-layout (max-width: 46em)—

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--drawer-layout-content-min-inline-size<length>—
--pantoken-bp-md<length>30em

Ավելին կապված ​