React-Bootstrap ListGroup 组件

ListGroup 组件是 React-Bootstrap 库中的一部分，用于创建 a 列表，你可以使用这些列表构建菜单、导航栏、帮助文档等应用程序。

安装

使用 npm 安装

npm install react-bootstrap

使用 yarn 安装

yarn add react-bootstrap

使用

在使用 ListGroup 组件之前，请将其引入你的文件中：

import { ListGroup, ListGroupItem } from 'react-bootstrap';

基本示例

<ListGroup>
  <ListGroup.Item>Item 1</ListGroup.Item>
  <ListGroup.Item>Item 2</ListGroup.Item>
  <ListGroup.Item>Item 3</ListGroup.Item>
</ListGroup>

设置样式颜色

<ListGroup>
  <ListGroup.Item variant="primary">Primary item</ListGroup.Item>
  <ListGroup.Item variant="secondary">Secondary item</ListGroup.Item>
  <ListGroup.Item variant="success">Success item</ListGroup.Item>
  <ListGroup.Item variant="danger">Danger item</ListGroup.Item>
  <ListGroup.Item variant="warning">Warning item</ListGroup.Item>
  <ListGroup.Item variant="info">Info item</ListGroup.Item>
  <ListGroup.Item variant="light">Light item</ListGroup.Item>
  <ListGroup.Item variant="dark">Dark item</ListGroup.Item>
</ListGroup>

设置激活状态

<ListGroup>
  <ListGroup.Item active>Active item</ListGroup.Item>
  <ListGroup.Item>Normal item</ListGroup.Item>
  <ListGroup.Item>Normal item</ListGroup.Item>
  <ListGroup.Item>Normal item</ListGroup.Item>
  <ListGroup.Item>Normal item</ListGroup.Item>
</ListGroup>

设置禁用状态

<ListGroup>
  <ListGroup.Item disabled>Disabled item</ListGroup.Item>
  <ListGroup.Item>Normal item</ListGroup.Item>
  <ListGroup.Item>Normal item</ListGroup.Item>
  <ListGroup.Item>Normal item</ListGroup.Item>
  <ListGroup.Item>Normal item</ListGroup.Item>
</ListGroup>

设置链接

<ListGroup>
  <ListGroup.Item href="#">Link item 1</ListGroup.Item>
  <ListGroup.Item href="#">Link item 2</ListGroup.Item>
  <ListGroup.Item href="#">Link item 3</ListGroup.Item>
</ListGroup>

如果你不想在点击条目时导航到新页面，可以添加一个空的 onClick 属性。

设置头部和尾部

你可以添加 ListGroupItem 组件的头部和尾部。可以将任何元素传递为头部和/或尾部 props。

<ListGroup>
  <ListGroup.Item>
    <ListGroup.ItemHeading>List group item heading</ListGroup.ItemHeading>
    <ListGroup.ItemText>
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </ListGroup.ItemText>
  </ListGroup.Item>
  <ListGroup.Item>
    <ListGroup.ItemHeading>List group item heading</ListGroup.ItemHeading>
    <ListGroup.ItemText>
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </ListGroup.ItemText>
  </ListGroup.Item>
  <ListGroup.Item>
    <ListGroup.ItemHeading>List group item heading</ListGroup.ItemHeading>
    <ListGroup.ItemText>
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </ListGroup.ItemText>
  </ListGroup.Item>
</ListGroup>

总结

ListGroup 组件 是一个非常有用的组件，它可以帮助你创建各种类型的列表，包括导航栏、菜单和帮助文档。它很容易使用，支持样式颜色、激活状态、禁用状态、链接、头部和尾部等选项，使其非常灵活。