React-Bootstrap UI 框架中表单相关组件

2021-05-21 0 By admin

在 React-Bootstrap UI框架中和表单相关的组件有表单组件(Form)和输入组组件(Input Group)。

一、Froms 表单组件介绍

该 FormControl 组件 使用Bootstrap 样式呈现表单控件。
该FormGroup组件以适当的间距包装表单控件,并支持标签,帮助文本和验证状态。为确保可访问性,请在FormGroup上设置controlId,并使用FormLabel用于标签属性。
该FormControl组件直接呈现input组件样式或指定其他组件的样式。
如果需要访问一个不受控制FormControl的值,请像使用不受控制的输入一样将其附加到 refs 该值,然后调用 ReactDOM.findDOMNode(ref) 以获取DOM节点。然后,您可以与该节点进行交互,就像与其他任何不受控制的输入一样。
如果您的应用程序包含大量表单组,我们建议您构建一个高层组件,封装一个完整的字段组,以呈现标签,控件和任何其他必要的组件。我们不提供现成的功能,因为这些字段组的组成对于单个应用程序来说太具体了,以至于无法接受一个很好的“一刀切”的解决方案。

1.1、Form controls 表单控件

对于文本形式的控件(如inputs,selects和textareas),请使用FormControl 组件。FormControl为常规外观,焦点状态,大小调整等添加了一些其他样式。

1.1.1、Sizing 尺寸

对FormControl组件和FormLabel组件设置 Size 属性改变输入和标签的大小。

1.1.2、ReadOnly 只读

在输入上添加 readOnly 属性以防止修改输入的值。只读输入看起来较亮(就像禁用的输入一样),但保留了标准光标。

1.1.3、Readonly plain text 只读纯文本

如果要在表单中将只读元素设置为纯文本样式,请在 FormControls 组件上使用 plaintext 属性删除默认表单字段样式,并保留正确的边距和填充。

1.2、Range Inputs 范围输入

一个范围输入的组件,可以输入控制的进度条。

1.3、Checkboxes and Radios 复选框和单选框

对于非文本复选框和单选控件,FormCheck 为这两种类型都提供一个组件,从而增加了一些其他样式并改善了布局。

1.3.1、Default (stacked)默认(堆叠)

默认情况下,任何直接同级的复选框和单选框都将垂直堆叠,并与FormCheck适当间隔。

1.3.2、Inline 一行

通过添加 inline 属性在同一水平行上对复选框或单选按钮进行分组。

1.3.3、Without labels 没有标签

呈现不带标签的FormCheck时(否children),将应用一些其他样式来防止输入折叠。记得在省略标签时添加一个 aria-label !

1.3.4、Customizing FormCheck rendering 自定义FormCheck呈现

当您需要更严格的控制或想要自定义 FormCheck 组件的渲染方式时,最好直接使用其组成部分。
通过提供children给FormCheck组件,您可以放弃默认渲染并自己处理。(您仍然可以id向FormCheck或FormGroup提供一个,并将其传播到标签和输入)。

1.4、Layout 布局

FormControl和FormCheck既适用display: blockwidth: 100%控制,这意味着它们由缺省垂直堆叠。可以使用其他组件和道具来按表单更改此布局。

1.4.1、Form groups 表格组

该 FormGroup 组件是将一些结构添加到表单中最简单的方法。它为标签、控件、可选的帮助文本和表单验证消息的分组提供了灵活的容器。
默认情况下,它仅适用于下边距,但设置[Form inline] 属性后,会根据需要选择其他样式。与fields,sets或divs几乎其他任何元素一起使用。
您还可以添加 controlId 属性以方便地将嵌套标签连接起来,并通过id进行输入。

1.4.2、Form grid 表格网格

可以使用网格组件构建更复杂的表单。将它们用于需要多列,可变宽度和其他对齐选项的表单布局。

1.4.2.1、Form row 表格行(Horizontal form 水平表单)

您也可以将Row替换为Form.Row,为标准网格行的一种变体,该变体将覆盖默认的列装订线,以使布局更紧凑更紧凑。

1.4.2.2、Horizontal form label sizing 水平表单标签大小

可以在 FormLabel 列组件中使用 column 和 size 来调整的大小。

1.4.2.3、Auto-sizing 自动调整大小

使用 xs="auto" 配置,该列将根据其内容自行调整大小。

1.4.3、Inline forms 内联表格

使用inline 属性在单个水平行上显示一系列标签、表单控件和按钮。表单中的表单控件与其默认状态略有不同。

  1. 控件是display: flex,可以折叠任何HTML空格,并允许您提供带有间距和实用程序的对齐控件。
  2. 控件和输入组收到的值width: auto将覆盖Bootstrap的默认值width: 100%。
  3. 控件仅在宽度至少为576像素的视口中内嵌显示,以解决移动设备上的视口狭窄的问题。

您可能需要使用间距实用程序手动解决单个表单控件的宽度和对齐问题。最后,即使您需要使用该srOnly属性向非屏幕阅读器访问者隐藏它,也要确保始终在每个表单控件中都包含一个Form.Label 组件。

1.5、Help text 帮助文字

可以使用 Form.Text 来创建表单中的块级帮助文本。可以使用任何内联HTML元素和实用程序类(如.text-muted)灵活地实现内联帮助文本。

1.6、Disabled forms 禁用的表格

disabled在输入上添加布尔属性,以防止用户交互并使它看起来更浅。

1.7、Validation 验证

通过表单验证反馈,为您的用户提供有价值的,可行的反馈。

1.7.1、本机HTML5表单验证

对于本机HTML表单验证-在我们所有受支持的浏览器中都可用,:valid和:invalid选择器用于应用验证样式以及显示反馈消息。
Bootstrap的范围:valid :invalid 样式适用于父.was-validated类,通常应用于Form(您可以将validatedprop用作快捷方式)。否则,任何没有值的必填字段在页面加载时都将显示为无效。这样,您可以选择何时激活它们(通常在尝试提交表单之后)。

1.7.2、Form libraries and server-rendered styles 表单库和服务器呈现的样式

通过诸如Formik之类的库或react-formal处理表单验证通常是有益的(尤其是在React中)。
在这些情况下,isValidisInvalid道具可以被添加到表单控件手动应用验证样式。

1.7.3、Tooltips 工具提示

如果您的表单布局允许,则可以使用 tooltip 属性在样式化的工具提示中显示验证反馈。确保position: relative 在其上放置父项以进行工具提示定位。

1.7.4、Input group validation 输入组验证

为了正确显示 InputGroup 带有验证的圆角,InputGroup需要使用hasValidation属性。

1.8、API 接口

  1. Form
  2. Form.Row
  3. Form.Group
  4. Form.Label
  5. Form.Text
  6. Form.Control
  7. FormControl.Feedback
  8. Form.Check
  9. FormCheck.Input
  10. FormCheck.Label
  11. Form.File
  12. FormFile.Input
  13. FormFile.Label

二、Input Group 输入组

在输入的两侧放置一个附加组件或按钮。您也可以在输入的两侧各放置一个。记住将

2.1、Sizing 尺寸

将相对的表单大小类添加到InputGroup中,其中的内容将自动调整大小-无需在每个元素上重复表单控件的大小类。

2.2、Checkboxes and radios 复选框和单选框

使用InputGroup.RadionputGroup.Checkbox将选项添加到输入组。

2.3、Multiple inputs 多个输入

虽然视觉上支持多个输入,但验证样式仅适用于具有单个输入的输入组。

2.4、Multiple addons 多个插件

支持多个加载项,并且可以混合使用。

2.5、API 接口

  1. InputGroup