React 组件

UGIndicator 角标容器

把状态点、数量徽标或辅助操作定位到内容边缘,支持九个锚点与 RTL 逻辑方向。

导入方式

按需从包入口导入组件,并在应用入口引入一次样式文件。

tsx
import { UGIndicator, UGIndicatorItem } from '@ug666/ui-react'

数量与状态

角标内容可直接组合 Badge、状态点或业务按钮。

12
UG

九个锚点

逻辑 start / end 在 RTL 页面中会自动镜像。

内容区域

属性

属性类型默认值说明
UGIndicator.asElementTypediv设置根元素或自定义组件。
UGIndicatorItem.asElementTypespan设置角标承载元素。
horizontalstart | center | endend逻辑水平方向锚点,自动适配 RTL。
verticaltop | middle | bottomtop垂直方向锚点。