CSS: callout ​

div[class~="instui-callout"] — 用于简短提醒或注释的内联信息提示。

✅ 在以下情况使用 Callout：

  • 需要在内联中突出重要信息或提醒

  • 信息相对简短（一个句子到短段落）

  • 提示应引起注意但不打断主要流程 🚫 以下情况不应使用 Callout：

  • 信息需要交互或多个操作 — 使用 Modal 或 Alert Dialog

  • 内容是页面的主要焦点 — 改用 Card 或 Hero 布局

无障碍 ​

  • 确保正确应用 alert 角色（role="alert" 或 role="status"）
  • 使用符合 WCAG AA 标准的语义颜色对比
  • 不要仅依赖颜色来传达含义

用法 ​

css
@import "@pantoken/plugin-layouts/layouts.css";

插槽 ​

插槽描述
message提示消息内容

部件 ​

部件描述
.instui-content文本内容的容器。
.instui-icon置于内容左侧的可选图标。

伪元素 ​

伪元素描述
::before—

状态 ​

状态描述
:optional—

消耗代币 ​

Token类型值
--instui-color-info-background——
--instui-color-info-border——
--instui-color-info-text——
--instui-radius-medium——
--instui-size-small<length>—
--instui-space-medium——
--instui-space-small——

相关 ​