组件 · 反馈 · 17
告警条 告警条 = 图标 + 一条信息 + 一个操作，位于页面内容之上，而非嵌在内容里。
直达修改 Prompt →
i Scheduled maintenance Exports pause Sunday 02:00–03:00 UTC. Details ✕
! Connection failed The workspace token expired — reconnect to continue. Reconnect ✕
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create an alert component.
STYLE
- full-width banner, 12px radius, 14px padding, 1px tinted border
- four severities: info #0071E3, success #248A3D, warning #FF9F0A, error #FF3B30
- each uses a 16px glyph, a 14px 600 title and a 13px body
- one text action on the right, dismiss cross on the far right
STATES
- default, dismissible with a 150ms fade, sticky variant pinned to the top
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing alerts dismissible.
Use:
- a 14px cross at the far right of the banner
- dismissing fades the banner out in 150ms and collapses the space
- keep severities, radius and typography unchanged
Only add the dismiss behavior.
Create an alert component, replacing the existing one.
Requirements:
- full-width banner, 12px radius, 14px padding, 1px tinted border
- severities: info #0071E3, success #248A3D, warning #FF9F0A, error #FF3B30
- 16px glyph, 14px 600 title, 13px body, all in the severity order
- one text action plus a dismiss cross on the right
- a sticky variant pins to the top of the page above the content
Keep the surrounding layout unchanged.
MOTION
- Enter: slide down 8px + fade, 180ms ease-out. Do not animate height.
- Dismiss: 120ms fade with a 4px lift. Faster than the enter.
- Do not re-animate on re-render; an alert that reappears every render is noise.
- prefers-reduced-motion: show with no transform.
修改类 Prompt 只动目标，不碰页面其余部分。
告警条是什么？ 告警条打断的是页面，不是流程。点名它出现的位置、严重级别，以及如何关闭。
变体 点击属性即可在预览中高亮。
信息 在 Prompt 里写明这个类型。
成功 正向确认提示（已保存、已发送、已复制）。
警告 在 Prompt 里写明这个类型。
错误 无效状态：红色边框 + 提示文案，通常阻止提交。
严重级别 给具体值，不要只给感觉词。
图标 仅含单个图标、无文字的按钮，必须配 aria-label。
标题 给具体值，不要只给感觉词。
操作 给具体值，不要只给感觉词。
可关闭 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
可关闭 在 Prompt 里写明这个状态。
吸顶 在 Prompt 里写明这个状态。 结构解剖 这些是 Prompt 里应该点名的部件。
01 横幅 02 图标 03 标题 04 正文 05 操作 06 关闭 什么时候用 全站通知：故障、维护、额度 阻断提交的表单级错误 需要一个后续动作的确认提示 什么时候别用 消息属于文章内部——改用提示块 用户必须停下做决定——改用对话框 每次加载都出现且从不带操作 Alerts sit above the content and push it down — reserve that for messages the whole page needs to see.
复制 Prompt Create an alert component.
STYLE
- full-width banner, 12px radius, 14px padding, 1px tinted border
- four severities: info #0071E3, success #248A3D, warning #FF9F0A, error #FF3B30
- each uses a 16px glyph, a 14px 600 title and a 13px body
- one text action on the right, dismiss cross on the far right
STATES
- default, dismissible with a 150ms fade, sticky variant pinned to the top
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui