Indicator 指示器
Indicator 负责把状态点、徽标、按钮或任意轻量信息悬挂到内容边缘。组件展示基础复合写法, 并提供placement、offset,以及item / items这组三件套,方便快速搭角标而不必每次都手写一个Indicator.Item。
horizontal 和 vertical 仍然可直接使用,基础示例 不需要回退。
一个角标用 item,多角标用 items,页面模板代码可以明显收缩。
placement 负责主定位,offset 负责微调,适合图片、卡片、操作按钮等场景。
# Status indicator
最轻量的状态提醒,展示基础复合写法。
# Badge as indicator
把 Badge 挂到内容右上角,是最常见的信息提醒写法。
# For button
一个角标时可以直接改用 item 快捷模式,不再手写 Indicator.Item。
# For an input
表单必填、实验开关等轻提示适合放在输入框边缘。
# A button as an indicator for a card
支持基础的 vertical 写法,适合把操作按钮悬挂在卡片边缘。
Job Title
Rerum reiciendis beatae tenetur excepturi
# In center of an image
同一条提示覆盖在图片中心时,组合 horizontal 和 vertical 依然最直观。

# For avatar
头像、封面等媒体元素通常更适合搭配短文本或身份标签。

# For tab
在 tab 标题上挂未读数,适合消息、审批和工单等场景。
# Placement shorthand and offset
placement 先给出主定位,再用 offset 做细调,适合视觉需要避让边框或圆角的场景。
# Props-driven shorthand
常见的一主一辅场景可以完全通过 item 和 itemProps 表达,代码更短,也更适合数据驱动。
Web hooks, release notes and QA approvals are waiting for merge.
# Multiple indicators
items 适合一个主体上同时悬挂多个提示,比如在线状态和悬挂操作。
Design review board
This board keeps the latest reviewer presence and the primary action in one place.
API
Indicator 仍然是一个纯布局组件,不接管 Badge、Status 或 Button 的视觉,只负责悬挂与定位。
Indicator
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 指定容器标签,默认输出 div | any | 'div' |
item | 单个快捷角标内容,适合最常见的一个 overlay 场景 | any | - |
itemProps | 配合 item 使用的 Indicator.Item 属性透传 | Omit<IndicatorItemProps, children> | - |
items | 多角标数据驱动写法,内部会自动展开为多个 Indicator.Item | IndicatorItemConfig[] | - |
style | 容器样式,保持原生 style 透传 | Record<string, any> | string | - |
Indicator.Item
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 指定角标根节点标签,默认输出 span | any | 'span' |
className | 追加到 indicator-item 上的视觉类名 | string | - |
horizontal | 水平定位,显式传入时优先级高于 placement | 'start' | 'center' | 'end' | - |
offset | 在基础 anchor 基础上微调角标位置,格式为 [x, y] | [number | string, number | string] | - |
placement | 组合式定位写法,例如 top-start、middle-center、bottom-end | IndicatorPlacement | - |
style | 原生 style 透传;offset 会通过 CSS 变量补充到最终节点 | Record<string, any> | string | - |
vertical | 垂直定位,显式传入时优先级高于 placement | 'top' | 'middle' | 'bottom' | - |