React Bootstrap 列表组

ListGroup 组件用于创建项目列表。它是一个用于呈现一系列内容的灵活组件。它为显示多个项目提供了简单且可自动调整的布局。

要使用 React Bootstrap ListGroup，请使用 <ListGroup> 和 <ListGroup.Item> 组件来定义列表项。

ListGroup 的导入语句如下

import ListGroup from 'react-bootstrap/ListGroup'

考虑下面的示例

App.js

输出

从上面的输出中，我们可以看到所有列表项都正确对齐。列表项用于创建组列表、侧边栏导航等。

带有活动项目的列表组

我们可以传递 active 属性来使列表项处于活动状态。默认情况下，它将以蓝色背景色和白色文本颜色突出显示。但是，我们可以通过在自定义 CSS 文件中覆盖 active 类样式来覆盖它。

考虑下面的示例

输出

带有禁用项目的列表组

禁用 prop 用于显示非活动列表项。它将被灰显。禁用 prop 将阻止对指定的列表项执行操作。未禁用的元素可以具有诸如锚点、事件处理程序之类的操作。

输出

从上面的输出中，我们禁用了列表项 2。它将是静态的，并且不能执行任何操作。

冲洗列表

flush 变体从列表组项目列表中删除边框和圆角。它将在父容器中从边缘到边缘呈现列表项。它的工作方式与卡片中的 flush 相同。

输出

编号列表

我们还可以使用组件中的“编号”和“as”属性将列表项呈现为编号列表。我们可以使用“as”属性作为“ul”和“li”以更好地对齐项目。它将允许更好地自定义列表组项目。

输出

从上面的输出中，我们将列表组项呈现为编号列表。

彩色列表项

我们可以根据我们的要求自定义列表项。我们可以通过指定自定义 CSS 类或使用 Bootstrap 提供的上下文变体来填充列表项的背景颜色。

输出

我们可以通过指定 action 属性为每个变体添加预定义的悬停效果。

它将为每个列表项添加悬停效果。

选项卡组列表项

我们还可以将列表项用作选项卡组。选项卡用于呈现同一页面上的不同块。

具有列表组组件的 Tab 组件用于创建选项卡组。

考虑下面的示例

App.js

输出

从上面的输出中，我们使用列表项和选项卡组件创建了一个选项卡组。我们可以根据我们的要求自定义选项卡组的布局。

通过导航到项目 2，项目 2 的内容将显示在右侧部分栏中。

因此，我们可以精确地使用 ListGroup 组件用于不同的 Web 布局。