CSS: drawer-layout.content ​

.content — ส่วนเนื้อหาหลักที่เติมพื้นที่ที่เหลือข้างถาด

เมื่อขนาดแนวนอนขององค์ประกอบแม่ลดลงต่ำกว่า 46em (ความกว้างถาด 16em + จุดตัด 30em), การคิวรี @container บนคอนเทนเนอร์ pantoken-drawer-layout ขององค์ประกอบแม่จะลดค่า min-inline-size ของสมาชิกนี้เป็น 0 โดยอัตโนมัติ ให้สอดคล้องกับการเขียนทับด้วยตนเอง [should-overlay-tray]

การเข้าถึง ​

นำ role="region" มาใช้ (แนวปฏิบัติ DrawerLayout ของ InstUI) และตั้งชื่อด้วย 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

ที่เกี่ยวข้อง ​