Alert 提示条

页面里一块带边框的说明区域，放一段需要用户注意的信息，可带图标与标题。

基础用法

图标、标题、描述三个插槽都可选，空着的不占位。有图标时排成两列，图标定成 16px。

<pt-alert>
  <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 16v-4"></path>
    <path d="M12 8h.01"></path>
  </svg>
  <span slot="title">数据有延迟</span>
  最近 2 小时的访问数据仍在处理中，报表可能略低于实际值。
</pt-alert>
<pt-alert>没有图标和标题时，就是一条带边框的说明文字。</pt-alert>

出错 / 警告

destructive 变体：文字、图标、标题走危险色，边框为半透明的危险色。

<pt-alert variant="destructive">
  <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 8v4"></path>
    <path d="M12 16h.01"></path>
  </svg>
  <span slot="title">保存失败</span>
  网络连接已断开，请检查网络后重试。
</pt-alert>

插槽与布局

• icon：图标，建议 16px 的 svg。插槽里的 svg 会被定成 16px，颜色跟随变体（stroke="currentColor" 即可）。 有图标时排成两列 —— 16px 图标列、12px 间距、内容列；RTL 下图标自然落在右侧。
• title：标题，中等字重、强调色。
• 默认插槽：描述文字。直接放文本或 <p>，<p> 的外边距会被清掉、行高放宽到 1.625，方便放多段。

三个插槽都可选，空着的不占位，也不留间距。

标题容器不是标题元素（源组件是 <h5>）：影子树里写死的标题层级几乎总和页面大纲对不上。 需要标题语义时往插槽里放自己的标题元素，如 <h3 slot="title">，UA 给它的字号与外边距会被清掉，外观不变。

无障碍

宿主默认 role="alert"。alert 是「立即打断式」的实时区域：提示条插入页面时， 读屏会马上念出它的内容 —— 这正适合「保存失败」这类操作反馈。

静态说明会在页面加载时被播报

页面一打开就在的说明性提示条（「数据有延迟」「此功能仍在测试中」）也会在每次进页面时被念一遍。 这类提示需要静默时，在宿主上自己写 role，组件只在宿主没有 role 时才补默认值，不会覆盖：

<pt-alert role="status">…</pt-alert>
<!-- 或者完全不作为实时区域 -->
<pt-alert role="none">…</pt-alert>

destructive 变体只改颜色；「出错了」这层意思要同时写进标题或描述文字里，不能只靠变红传达。

定制

通过 ::part() 调整：base（边框、底色、内边距）、icon、title、description。

API

属性

属性	Attribute	类型	默认值	说明
variant	variant	"default" | "destructive"	'default'	变体。`destructive` 用于出错 / 警告：文字、图标与标题走危险色，边框为半透明危险色

插槽

名称	说明
（默认）	描述文字，直接放文本或 `<p>`
icon	图标，建议 16px 的 svg（组件会把插槽里的 svg 定成 16px）
title	标题

可定制的内部元素（::part()）

part	说明
base	外层容器（边框、底色、内边距）
description	描述容器
icon	图标容器
title	标题容器