StatusDot

带文字的状态指示；加上计数与点击即成状态过滤器。

最后更新 2026-10-25 19:27:08

说明

Status 决定圆点颜色，Text 为可选说明文字；Count 在尾部显示数量，Tint 让文字同色，Pill + OnClick 把整条变成可点的过滤胶囊。

常见能力：

语义色圆点
可选文字与计数
Title 悬浮提示
可点过滤胶囊

用法

<StatusDot Status="success" Text="运行中" />
<StatusDot Status="danger" Text="已离线" />
<StatusDot Pill="true" Status="online" Text="在线" Count="12" Tint="true"
           Active="@(scope == "online")" OnClick="() => Toggle("online")" />

API 参数

参数	类型	默认值	说明
`Active`	`bool`	`false`	选中态，与 OnClick 配套，标记当前生效的那一枚过滤器。
`ChildContent`	`RenderFragment`	`null`
`Count`	`Nullable<int>`	`null`	尾部计数，渲染成等宽数字；用于「状态 + 数量」的过滤胶囊。
`OnClick`	`EventCallback<MouseEventArgs>`	—	事件点击回调。与 Tag 一致落在 span 上，由 .status-line 的胶囊样式负责观感。
`Pill`	`bool`	`false`	胶囊形态：加描边外壳与悬停/选中反馈，配合 Count 用作状态过滤器。
`Status`	`string`	`"online"`	状态：online / busy / offline / error，或语义色 primary / success / warning / danger / info / default。该类名同时挂在根节点上，供 Tint 取色。
`Text`	`string`	`null`	后续文字。
`Tint`	`bool`	`false`	让文字也染成 Status 的颜色，默认只染圆点。
`Title`	`string`	`null`	悬浮提示文案，渲染为样式化的 CSS Tooltip（data-tip）。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。