React-Bootstrap UI 框架中按钮相关的组件和对话框组件

2021-05-23 0 By admin

在 React-Bootstrap UI 框架中和按钮相关的组件有按钮(Button)组件和按钮组(Button Group)组件。按钮组件一般和表单组件一起使用,关于表单组件前面已经有过介绍。

一、按钮 Button

在表单和对话框等组件中使用按钮组件实现提交操作,支持定义按钮样式,设置大小和状态等。
官方提供了9种不同的样式,通过设置 variant 属性进行设置。另外使用 outline-* 样式值,可以修改按钮的轮廓。

1.1、Button tags 按钮渲染的元素类型

通常,Button组件将呈现HTML 标记语言中 button元素。但是,您可以渲染任何内容,添加href道具会自动渲染 A 超链接元素。您可以使用 as 属性来渲染您想要的元素类型。React Bootstrap将为您处理适当的ARIA角色。

1.2、Sizes 尺寸

可以通过 size 属性设置标签的大小。通过添加block 属性来创建块级按钮(跨越父级的整个宽度的按钮)。

1.3、active 和 disable 状态

要设置按钮的活动状态,只需设置组件的 active 属性。通过添加 disabled 属性使按钮看起来不活动。

1.4、Button loading state 按钮加载状态

当通过按钮激活异步动作时,这是一个很好的UX模式,可以向用户提供有关加载状态的反馈。

1.5、Checkbox/Radio 复选框/单选

按钮也可以用于样式 checkbox 和 radio形成元素。当您想要一个可以在HTML表单中整齐地工作的切换按钮时,这很有用。

1.6、API 接口

  1. Button
  2. ToggleButtonGroup
  3. ToggleButton

二、Button groups 按钮组

通过按钮组可以将一系列的按钮 Button 进行分组,一行排列。

2.1、Button toolbar 按钮工具栏

将多个 ButtonGroup 组件写在一个 ButtonToolbar 组件中,获取一个更复杂的按钮组组件。

2.2、Sizing 尺寸

无需对组中的每个按钮设置size属性,只需将size 属性添加到 ButtonGroup 即可。

2.3、Nesting 嵌套

您可以将其他按钮类型组件放置在 ButtonGroup 组件中,如 DropdownButton。

2.4、Vertical variation垂直变化

通过添加vertical到 ButtonGroup 组件中,使一组按钮显示为垂直堆叠而不是水平堆叠。 此处不支持拆分按钮下拉菜单。

2.5、API 接口

  1. ButtonGroup
  2. ButtonToolbar

三、Modals 模态框/弹出的对话框

在网站上添加对话框的设计,以固定位置的方式展示用户通知和其他自定义的内容。

3.1、Overview 概述

  1. 模态框位于文档中的所有其他内容之上,并从 body 中移除滚动,从而使模态框内容滚动。
  2. 闭合时,模块将被卸载。
  3. Bootstrap 一次仅支持一个模式窗口。不支持嵌套模态,但是如果您确实需要嵌套模态,则底层 react-overlays 可以在您愿意的情况下支持它们。
  4. 模态的“陷阱”(trap)集中在它们上,以确保键盘导航在模态中而不是在页面的其余部分中循环。
  5. 与普通的Bootstrap不同,autoFocus在Modals中工作,因为React处理实现。

3.2、Live demo 使用示例

在模态框中具有页眉,正文和一组动作的页脚。使用 Modal 结合其他组件来显示或隐藏模态。该组件带有一些方便的“子组件”:Modal.Header、Modal.Title、Modal.Body和Modal.Footer;你可以用它来构建模态的内容。

3.3、Static backdrop 静态背景

当背景设置为静态时,在其外部单击时,模式框不会关闭。

3.4、Without Animation 没有动画

模态也可以没有动画。为此,将“animation”属性设置为false。

3.5、Vertically centered 垂直居中

您可以通过传递“centered”属性在垂直方向上使模态居中。

3.6、Using the grid 使用网格

您可以使用模态框内容内的常规网格组件,在模型内使用网格布局。

3.7、Optional Sizes 可选尺寸

您可以使用“ size” 属性设定模态框的大小,也可以通过自定义 CSS样式设置。

3.8、API 接口

  1. Modal
  2. ModalDialog
  3. ModalHeader
  4. ModalTitle
  5. ModalBody
  6. ModalFooter