Status Code 组件用于显示 HTTP 状态码，并根据状态码的类型自动应用相应的颜色编码。
Loading...
安装
使用方法
import { StatusCode } from "@/components/pivot/status-code";<StatusCode code={200} />示例
基本用法
<div className="flex items-center gap-2">
<StatusCode code={200} />
<StatusCode code={201} />
<StatusCode code={404} />
<StatusCode code={500} />
</div>不同大小
<div className="flex items-center gap-2">
<StatusCode code={200} size="sm" />
<StatusCode code={200} size="md" />
<StatusCode code={200} size="lg" />
</div>不同变体
<div className="flex items-center gap-2">
<StatusCode code={200} variant="default" />
<StatusCode code={200} variant="outline" />
<StatusCode code={200} variant="ghost" />
</div>API 参考
Props
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
code | number | - | HTTP 状态码 |
size | "sm" | "md" | "lg" | "md" | 组件大小 |
variant | "default" | "outline" | "ghost" | "default" | 组件变体 |
className | string | - | 额外的 CSS 类名 |
颜色编码
组件会根据状态码自动应用颜色：
- 1xx (信息性) - 蓝色
- 2xx (成功) - 绿色
- 3xx (重定向) - 黄色
- 4xx (客户端错误) - 橙色
- 5xx (服务器错误) - 红色
最佳实践
- 一致性 - 在整个应用中保持状态码显示的一致性
- 可读性 - 确保状态码在不同背景下都清晰可见
- 语义化 - 利用颜色编码帮助用户快速理解状态码含义
无障碍性
- 组件支持屏幕阅读器
- 颜色编码不是唯一的信息传达方式
- 支持键盘导航