组件 · 浮层
右侧详情面板 Panel
从右侧滑出的详情面板（会员站资源详情）。
演示
详情
…
<aside class="xxd-panel" id="pd" aria-labelledby="pd-title"><div class="xxd-panel__head"><h2 class="xxd-panel__title" id="pd-title">详情</h2><button class="xxd-btn" data-variant="ghost" data-icon-only data-xxd-panel-close aria-label="关闭"><i data-xxd-icon="X"></i></button></div><div class="xxd-panel__body">…</div></aside>
<button class="xxd-btn" data-xxd-panel-open="pd">详情</button>属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-panel xxd-panel__head xxd-panel__title xxd-panel__body xxd-panel-scrim |
JS
Xxd.openPanel(el); Xxd.toast("已保存", { within: el.querySelector(".xxd-panel__body") })键盘与读屏
- aria-labelledby 指向标题；打开时焦点进面板，Esc 关闭并把焦点还回去
- 关闭按钮有 aria-label
规则
- 面板里的操作，toast 出现在面板里