React-Bootstrap UI 框架中列表页相关的组件

2021-05-23 0 By admin

在我们写页面的过程中,肯定会有一类页面会用到;那就是列表页面,用于对项目(item)进行罗列处理。在 React-Bootstrap UI 框架中列表页肯定会用到的组件是 Pagination(分页),另外 List Group(列表组)和 Tables(表格)会根据列表页的风格选择可能会用到。

一、Pagination 分页组件

一组用于构建分页UI的演示性组件。

1.1、More options 更多选择

为了构建更复杂的分页UI,很少有方便的子组件来添加“第一”,“上一个”,“下一个”和“最后”按钮,以及一个省略号按钮以指示之前或之后的结果。

1.2、API 接口

  1. Pagination
  2. PageItem

二、List Groups 列表组

列表组是显示一系列内容的灵活而强大的组件。修改并扩展它们以支持其中的几乎所有内容。

2.1、Active items 激活的

设置 Active 属性以指示列表组当前活动的选择。

2.2、Disabled items 禁用的

设置禁用的(disabled)属性以防止对 ListGroup.Item 进行操作。对于自然不能禁用的元素(例如锚),添加了onClick处理函数,该处理函数调用 preventDefault 来模仿禁用的行为。

2.3、Actionable items 可执行的

切换动作 action 属性以创建具有禁用,悬停和活动样式的可操作列表组项目。默认情况下,列表项操作将呈现button或a 超链接(取决于的存在href),但可以通过 as 属性设置。
列表项actions与普通项有所不同,以确保点击或点击功能不应用于非交互项。

2.4、Flush 完全齐平

添加 flush 属性以删除外部边界和圆角,以在父容器(如)中以 Card 边缘到边缘的方式呈现列表组项。

2.5、Horizontal 水平的

使用horizontal 属性使ListGroup水平呈现。当前水平列表组(Horizontal)不能与刷新列表组(Flush)结合。

2.6、Contextual classes 上下文类

在 ListGroup.Item 组件中使用上下文 属性 以有状态的背景和颜色为它们设置样式。

2.7、Tabbed Interfaces 标签式界面

您还可以使用 Tab组件与该 ListGroup 组件创建符合ARIA要求的可建立标签的界面。将列表组的nav组件调出,就可以开始了。

2.8、API 接口

  1. ListGroup
  2. ListGroup.Item

三、Tables 表格

使用 striped,bordered和 hover 属性来自定义表格样式。

3.1、Small Table 表格的尺寸

使用 size=”sm” 将单元格填充物切成两半,来使表格紧凑。

3.2、Dark Table 颜色风格

使用 variant=”dark” 反转表的颜色,并得到一个黑暗的背景光文字。

3.3、Responsive 响应式

响应式表允许轻松地水平滚动表。

3.4、API 接口

  1. Table