[[数据可视化框架]]
比较全的组件库
https://uiverse.io/joe-watson-sbf/little-goat-24
## 组件库排名
https://ui-libs.vercel.app/
[Element Plus](Element%20Plus.md)
[Ant Design](Ant%20Design.md)
## 常用组件
| 英文名称 | 中文翻译 | | | |
| --------------- | ------- | --- | --- | ------------------------------------------- |
| Box | 基本输入 | | ✅ | |
| Card | 卡片输出 | | ✅ | |
| Center | 居中容器 | | | |
| Divider | 分割线组件 | | ✅ | |
| Flex | 弹性布局 | | ✅ | |
| Text | 文本组件 | | | |
| Whitespace | 空白占位组件 | | | |
| WrapItem | 包裹容器项 | | | |
| Avatar | 头像组件 | | | |
| Badge | 徽章组件 | | | |
| Carousel | 轮播图组件 | | | |
| Empty | 空状态组件 | | | |
| Image | 图片组件 | | | |
| List | 列表组件 | | | |
| NoticeBar | 通知栏组件 | | | |
| Popover | 气泡卡片 | | | |
| Steps | 步骤条组件 | | | |
| Tag | 标签组件 | | | |
| Accordion | 手风琴组件 | | | |
| Modal | 对话框组件 | | | |
| Notify | 消息通知 | | | |
| Pagination | 分页器组件 | | | |
| Popconfirm | 气泡确认框 | | | |
| Toast | 轻提示组件 | | | |
| Checkbox | 复选框 | | | |
| CountDown | 倒计时组件 | | | |
| Form | 表单 | | | |
| Input | 输入框组件 | | | |
| NumberKeyboard | 数字键盘 | | | |
| Radio | 单选框组件 | | | |
| Slider | 滑块组件 | | | |
| Stepper | 步进器组件 | | | |
| Switch | 开关组件 | | ✅ | |
| VerifyButton | 验证按钮 | | | |
| Button | 按钮组件 | | ✅ | |
| ButtonGroup | 按钮组组件 | | | |
| FloatButton | 悬浮按钮组件 | | | |
| Progress | 进度条组件 | | | |
| SearchBar | 搜索栏组件 | | ✅ | |
| Tabs | 标签页组件 | | | |
| DataPicker | 日期选择 | | | |
| DatePickerView | 日期选择器视图 | | | |
| DateRangePicker | 日期范围选择器 | | | |
| Picker | 选择器 | | | |
| PickerView | 选择器视图 | | | |
| BackGround | 背景组件 | | | |
| Indicator | 指示器组件 | | | |
| Line | 线条组件 | | | |
| ScrollList | 滚动列表 | | | |
| Timeline | 时间轴组件 | | ✅ | |
| Watermark | 水印组件 | | ✅ | |
| Collapse | 折叠面板 | | ✅ | "折叠面板"（Accordion）或"可折叠列表"（Collapsible List）|
| Ellipsis | 文本省略 | | | |
| ImagePreview | 图片预览组件 | | | |
| Password | 密码输入框 | | | |
| Rating | 评分组件 | | | |
| Share | 分享组件 | | | |
| Skeleton | 骨架屏组件 | | | |
| Swipe | 轮播组件 | | | |
从图片中可以看到，这是一个游戏角色分级表或称为"对打梯度表"（如标题所示"S30对打梯度表"）。这种组件通常被称为"梯度表"（Tier List）或"等级分类表"（Ranking Grid）。它将游戏角色按照其强度或性能分为不同等级（从T0到T4），T0级别表示最强或最优秀的角色，依次递减。
这种可点击展开的组件通常被称为"折叠面板"（Accordion）或"可折叠列表"（Collapsible List）。它允许用户在需要时展开查看详细信息，不需要时保持折叠状态，从而节省屏幕空间并减少信息过载。