R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

Indicator 指示器

Indicator 负责把状态点、徽标、按钮或任意轻量信息悬挂到内容边缘。组件展示基础复合写法, 并提供placement、offset,以及item / items这组三件套,方便快速搭角标而不必每次都手写一个Indicator.Item。

支持基础用法

horizontal 和 vertical 仍然可直接使用,基础示例 不需要回退。

快捷模式

一个角标用 item,多角标用 items,页面模板代码可以明显收缩。

定位更顺手

placement 负责主定位,offset 负责微调,适合图片、卡片、操作按钮等场景。

# Status indicator

最轻量的状态提醒,展示基础复合写法。

content

# Badge as indicator

把 Badge 挂到内容右上角,是最常见的信息提醒写法。

New
content

# For button

一个角标时可以直接改用 item 快捷模式,不再手写 Indicator.Item。

12

# For an input

表单必填、实验开关等轻提示适合放在输入框边缘。

Required

# A button as an indicator for a card

支持基础的 vertical 写法,适合把操作按钮悬挂在卡片边缘。

Job Title

Rerum reiciendis beatae tenetur excepturi

# In center of an image

同一条提示覆盖在图片中心时,组合 horizontal 和 vertical 依然最直观。

Only available for Pro usersIndicator centered message

# For avatar

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

Justice
Avatar with indicator

# For tab

在 tab 标题上挂未读数,适合消息、审批和工单等场景。

# Placement shorthand and offset

placement 先给出主定位,再用 offset 做细调,适合视觉需要避让边框或圆角的场景。

Start
top-start
Center
middle-center
End
bottom-end

# Props-driven shorthand

常见的一主一辅场景可以完全通过 item 和 itemProps 表达,代码更短,也更适合数据驱动。

8 pending
Queue
Build pipeline

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指定容器标签,默认输出 divany'div'
item单个快捷角标内容,适合最常见的一个 overlay 场景any-
itemProps配合 item 使用的 Indicator.Item 属性透传Omit<IndicatorItemProps, children>-
items多角标数据驱动写法,内部会自动展开为多个 Indicator.ItemIndicatorItemConfig[]-
style容器样式,保持原生 style 透传Record<string, any> | string-

Indicator.Item

属性说明类型默认值
as指定角标根节点标签,默认输出 spanany'span'
className追加到 indicator-item 上的视觉类名string-
horizontal水平定位,显式传入时优先级高于 placement'start' | 'center' | 'end'-
offset在基础 anchor 基础上微调角标位置,格式为 [x, y][number | string, number | string]-
placement组合式定位写法,例如 top-start、middle-center、bottom-endIndicatorPlacement-
style原生 style 透传;offset 会通过 CSS 变量补充到最终节点Record<string, any> | string-
vertical垂直定位,显式传入时优先级高于 placement'top' | 'middle' | 'bottom'-
页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS