CSS: drawer-layout.content ​

.content — پانل محتوای اصلی که فضای باقی‌مانده کنار سینی را پر می‌کند.

زمانی که inline-size والد به کمتر از 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

مرتبط ​