# 右侧详情面板 Panel

分类：浮层 · React：LayerDialog

从右侧滑出的详情面板（会员站资源详情）。

## 示例
```html
<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
```js
Xxd.openPanel(el); Xxd.toast("已保存", { within: el.querySelector(".xxd-panel__body") })
```

## 键盘与读屏
- aria-labelledby 指向标题；打开时焦点进面板，Esc 关闭并把焦点还回去
- 关闭按钮有 aria-label

## 规则
- 面板里的操作，toast 出现在面板里