CSS: drawer-layout.tray ​

.tray — 主コンテンツの横にあるサイドパネル。オーバーレイやトレイ風の表面修飾をオプションで持つ。

配置には inset-inline-start/inset-inline を使用します（left/right は使用しません）。そのため -placement-end は LTR と RTL の両方で実際のトレーリングエッジにドックします。

アクセシビリティ ​

ナビゲーションとして使用する場合、リンクを意味的な <nav> でラップし、アクセシブルな名前を付与してください。

使用法 ​

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

例 ​

html
<div class="instui-drawer-layout" open>
  <aside class="tray" aria-label="Course navigation">
    <a class="instui-link" href="#">Modules</a>
  </aside>
  <main class="content" role="region">Main content</main>
</div>

構造 ​

text
@scope (@component drawer-layout)
  .tray
    ‹content›
flowchart TD subgraph sg0 ["@scope (@component drawer-layout)"] n1(".tray"):::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;

修飾子 ​

修飾子説明
.-placement-endオーバーレイモードが有効なとき、このトレイを inline-end にドックしてください。
.-without-borderパネルの端のボーダーを取り除きます。
.-without-shadowオーバーレイモードが有効なとき、エレベーションを取り除きます。

条件 ​

型クエリ説明
containerpantoken-drawer-layout (max-width: 46em)—

使用トークン ​

Token型値
--drawer-layout-tray-width——
--instui-border-width-sm<length>0.0625rem
--instui-color-background-elevated-surface-base<color>LightDarklight-dark(#ffffff, #171B21)
--instui-color-stroke-base<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-component-tray-width-xs<length>16em
--instui-component-tray-z-index<integer>9999
--instui-elevation-topmostnone | <shadow>#—

関連項目 ​