CSS: drawer-layout.content ​

.content — トレイの横の残りスペースを埋める主要なコンテンツペイン。

親のインラインサイズが46em（16emトレイ幅 + 30emブレークポイント）未満になると、親のpantoken-drawer-layoutコンテナに対する@containerクエリがこのメンバーのmin-inline-sizeを自動的に0に下げ、手動の[should-overlay-tray]上書きと一致します。

アクセシビリティ ​

コンテキストだけで識別できない場合、role="region"（InstUI の DrawerLayout 規約）を引き継ぎ、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

関連項目 ​