组件 · 内容 · 原生 HTML 与 React
分层卡片 LayerCard
主体(纸)+ 次要区(洗色):卡片上方或下方的一条说明 / 操作。不要层层嵌套。
演示
下一步
用小小东 UI 做第一个插件
下一步
用小小东 UI 做第一个插件
<div class="xxd-layer" style="width:100%;max-width:300px">
<div class="xxd-layer__secondary">下一步<button class="xxd-btn" data-variant="ghost" data-icon-only data-size="xs" aria-label="前往" style="margin-left:auto"><i data-xxd-icon="ArrowRight" data-size="14"></i></button></div>
<div class="xxd-layer__primary">用小小东 UI 做第一个插件</div>
</div>export function LayerCardDemo() {
return (
<LayerCard className="w-72">
<LayerCard.Secondary>下一步</LayerCard.Secondary>
<LayerCard.Primary>用小小东 UI 做第一个插件</LayerCard.Primary>
</LayerCard>
);
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-layer xxd-layer__secondary xxd-layer__primary |
键盘与读屏
- 次要区里的操作按钮有文字或 aria-label
- 层级靠底色和分隔线,读屏按 DOM 顺序读:主体在前
规则
- 不要把分层卡片叠在分层卡片里