属性

属性	类型	默认值	说明
status	'info' | 'success' | 'warning' | 'error'	—	必需。消息状态。
title	string	—	必需。消息标题。
description	string	—	标题下方的说明。
icon	Component	—	自定义装饰图标。
isDismissable	boolean	false	显示关闭按钮。关闭后组件自行隐藏。
dismissLabel	string	Dismiss {title}	关闭按钮的无障碍名称。
container	'card' | 'section'	card	card 使用圆角。section 使用直角。
elevation	'none' | 'low' | 'med' | 'high'	none	整体阴影层级。
collapsible	boolean	true	默认插槽内容是否可折叠。
defaultIsOpen	boolean	false	未绑定 isOpen 时的初始展开状态。
v-model:isOpen	boolean	—	由父组件控制展开状态。
expandLabel	string	Expand details	展开按钮的无障碍名称。
collapseLabel	string	Collapse details	收起按钮的无障碍名称。

插槽

• 默认插槽：标题区域下方的详情。
• title：替换标题的视觉内容。仍需提供 title 属性。
• description：替换说明文本。
• icon：替换状态图标。图标仅作装饰。
• end：标题区域末尾的操作按钮。

标题、说明和详情插槽可包含块级内容。

展开与收起

• 默认插槽有内容时，组件显示展开按钮。
• 默认从收起状态开始。
• defaultIsOpen 只设置初始状态。
• v-model:isOpen 控制当前状态。
• collapsible 为 false 时，详情始终显示。
• 收起时，详情内容卸载。
• 父组件收起详情时，若焦点在详情内，焦点返回展开按钮。

<Banner v-model:is-open="open" status="info" title="Configuration changes">
  <p>Review the updated settings before continuing.</p>
</Banner>

关闭

• isDismissable 显示关闭按钮。
• 点击关闭后，组件自行隐藏。
• 组件触发 dismiss 事件。
• 关闭时，组件尝试将焦点返回进入提示前的元素。
• 需要再次显示时，重新挂载组件或改变 key。

事件与模板引用

• update:isOpen(value)：请求更新展开状态。
• dismiss()：关闭提示。
• element：根元素的 HTMLDivElement | null。关闭后为 null。

本地化

中文界面可设置以下文本：

• dismissLabel="关闭提示"。
• expandLabel="展开详情"。
• collapseLabel="收起详情"。

主题

.my-banner {
  --astryx-banner-info-background: #ecfdf5;
  --astryx-banner-info-foreground: #065f46;
}

• --astryx-banner-info-background：信息背景。
• --astryx-banner-info-foreground：信息文字和图标。
• --astryx-banner-success-background：成功背景。
• --astryx-banner-success-foreground：成功文字和图标。
• --astryx-banner-warning-background：警告背景。
• --astryx-banner-warning-foreground：警告文字和图标。
• --astryx-banner-error-background：错误背景。
• --astryx-banner-error-foreground：错误文字和图标。
• --astryx-banner-content-background：详情区域背景。
• --astryx-banner-border：详情区域边框。
• --astryx-radius-container：card 容器圆角。

Neutral 自动适配明暗模式。