ListGroup
基础导航基于 Bootstrap 5 的列表组组件，提供灵活且强大的内容列表容器，支持激活/禁用状态、链接与按钮、无边框与编号样式、水平布局、情景颜色、徽章与自定义内容
Component Demo
Basic usage and examples of the ListGroup component
基础示例
- 列表项 1
- 列表项 2
- 列表项 3
- 列表项 4
- 列表项 5
激活状态
- 激活的列表项
- 普通列表项
- 普通列表项
- 普通列表项
- 普通列表项
禁用状态
- 禁用的列表项
- 普通列表项
- 普通列表项
- 普通列表项
链接与按钮
无边框
- 列表项 1
- 列表项 2
- 列表项 3
- 列表项 4
编号列表
- 列表项 1
- 列表项 2
- 列表项 3
- 列表项 4
水平布局
- 列表项 1
- 列表项 2
- 列表项 3
- 列表项 1
- 列表项 2
- 列表项 3
情景颜色
- 主要样式列表项
- 次要样式列表项
- 成功样式列表项
- 危险样式列表项
- 警告样式列表项
- 信息样式列表项
- 浅色样式列表项
- 深色样式列表项
徽章
- 收件箱14
- 已发送2
- 草稿箱5
- 垃圾箱1
自定义内容
复选框与单选框
JavaScript 行为
首页内容，这里是第一个选项卡的面板。
API Documentation
Complete API reference for the ListGroup component
Props
ListGroup
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
as | ElementType | 'ul' | 容器渲染的元素标签，可选 `ol`、`div` 等 |
flush | boolean | false | 去除外边框与圆角，渲染为 `list-group-flush` 类 |
horizontal | ListGroupHorizontal | boolean | - | 水平布局，`true` 始终水平，或传入断点 `sm`、`md`、`lg`、`xl`、`xxl` 从该断点起水平 |
numbered | boolean | false | 编号列表，渲染为 `list-group-numbered` 类（配合 `as="ol"` 使用） |
ListGroupItem
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
action | boolean | false | 可交互样式，渲染为 `list-group-item-action` 类，未设置 `href` 时渲染为 `button` |
active | boolean | false | 激活状态，渲染 `active` 类并设置 `aria-current="true"` |
as | ElementType | 'li' | 渲染的元素标签，默认 `li`；设置 `href` 时默认为 `a`，设置 `action` 时默认为 `button` |
disabled | boolean | false | 禁用状态，渲染 `disabled` 类并设置 `aria-disabled="true"`，渲染为 `button` 时同时设置原生 `disabled` |
href | string | - | 链接地址，设置后渲染为 `a` 标签 |
type | 'button' | 'reset' | 'submit' | 'button' | 渲染为 `button` 时的原生 type，默认为 button 以避免意外提交表单 |
variant | ListGroupItemVariant | - | 情景颜色变体，渲染为 `list-group-item-*` 类 |
Common Props
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
children | ReactNode | - | 列表内容 |
className | string | - | 自定义类名 |
...rest | HTMLAttributes | - | 透传原生元素属性（如 `onClick`、`style` 等） |
Type Definitions
ListGroupHorizontal
列表组水平布局断点类型
export type ListGroupHorizontal = 'lg' | 'md' | 'sm' | 'xl' | 'xxl';ListGroupItemVariant
列表项情景颜色变体类型
export type ListGroupItemVariant =
'danger' | 'dark' | 'info' | 'light' | 'primary' | 'secondary' | 'success' | 'warning';ListGroupProps
列表组容器组件属性接口
export interface ListGroupProps extends HTMLAttributes<HTMLElement> {
as?: ElementType;
children?: ReactNode;
className?: string;
flush?: boolean;
horizontal?: ListGroupHorizontal | boolean;
numbered?: boolean;
}ListGroupItemProps
列表项组件属性接口
export interface ListGroupItemProps extends HTMLAttributes<HTMLElement> {
action?: boolean;
active?: boolean;
as?: ElementType;
children?: ReactNode;
className?: string;
disabled?: boolean;
href?: string;
type?: 'button' | 'reset' | 'submit';
variant?: ListGroupItemVariant;
}