Forms 表单 - bootstrap react

pencil 27天前 32

<FormControl>组件使用引导样式呈现窗体控件。
<FormGroup>组件以适当的间距包装窗体控件,并支持标签、帮助文本和验证状态。要确保可访问性,请在<FormGroup>上设置controlId,并对标签使用<FormLabel>。

<FormControl>组件直接呈现<input>或其他指定组件。如果需要访问不受控制的<FormControl>的值,请像访问不受控制的输入一样向其附加一个ref,然后调用ReactDOM.findDOMNode(ref)来获取DOM节点。然后,您可以与该节点交互,就像与任何其他不受控制的输入交互一样。

如果应用程序包含大量表单组,建议构建一个更高级别的组件,封装一个完整的字段组,以呈现标签、控件和任何其他必需的组件。我们不提供这种开箱即用的解决方案,因为这些字段组的组成对于单个应用程序来说太具体了,所以不能接受一个好的一刀切的解决方案。

Form controls 窗体控件

对于文本表单控件(如输入、选择和文本区域),请使用FormControl组件。FormControl为常规外观、焦点状态、大小等添加了一些附加样式。

Sizing 调整大小

使用<FormControl>和<FormLabel>上的size分别更改输入和标签的大小。

Readonly 只读

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

Readonly plain text 只读纯文本

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

Range Inputs 范围输入

Checkboxes and Radios复选框和单选框

对于非文本复选框和单选控件,FormCheck为这两种类型提供了一个单独的组件,添加了一些额外的样式和改进的布局。

Default (stacked)默认(堆叠)

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

inline 内联

通过添加inline prop将复选框或收音机分组在同一水平行上。

Without labels 不带标签

当呈现没有标签(无子项)的FormCheck时,会应用一些附加样式来防止输入塌陷。请记住在省略标签时添加aria标签!

Customizing FormCheck rendering 自定义FormCheck呈现

当您需要更严格的控制,或者想要自定义FormCheck组件的呈现方式时,最好直接使用它的组成部分。

通过向FormCheck提供子级,您可以放弃默认的呈现并自己处理它(您仍然可以向FormCheck或FormGroup提供一个id,并将其传播到标签和输入中)。

Layout 布局

FormControl和FormCheck都将display:block with width:100%应用于控件,这意味着默认情况下它们是垂直堆叠的。额外的组件和道具可用于根据每个窗体改变此布局。

Form groups 表单组

FormGroup组件是向表单添加某些结构的最简单方法。它为标签、控件、可选帮助文本和表单验证消息的分组提供了一个灵活的容器。默认情况下,它只应用margin bottom,但根据需要在<Form inline>中选择其他样式。与字段集、div或几乎任何其他元素一起使用。

还可以添加controlId属性,以便通过id将嵌套标签和输入连接起来。

Form grid 形成网格

可以使用网格组件构建更复杂的表单。对于需要多列、不同宽度和其他对齐选项的窗体布局,请使用这些选项。

Form row

您还可以将<Row>替换为<Form.Row>,这是标准网格行的一种变体,它会覆盖默认的列檐槽,以获得更紧凑的布局。

Horizontal form 水平形式

您还可以将<Row>替换为<Form.Row>,这是标准网格行的一种变体,它会覆盖默认的列檐槽,以获得更紧凑的布局。

水平窗体标签大小调整#

可以使用列属性调整<FormLabel>的大小。

Column sizing 列大小调整

如前面的示例所示,我们的网格系统允许您在<Row>或<Form.Row>中放置任意数量的<Col>s。他们将平均分配可用宽度。您还可以选择列的一个子集来占用更多或更少的空间,而剩余的<Col>会使用<Col xs={7}>这样的特定列类来平分其余的列。

Auto-sizing

下面的示例使用flexbox实用程序将内容垂直居中,并将<Col>更改为<Col xs=“auto”>以便列只占用所需的空间。换句话说,列的大小是基于内容的。

Inline forms 内联窗体

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

控件是display:flex,折叠任何HTML空白,并允许您提供带有间距和实用程序的对齐控件。

控件和输入组接收宽度:auto以覆盖引导默认宽度:100%。

控件仅在宽度至少为576px的视口中内联显示,以说明移动设备上的窄视口。

帮助文本

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

Disabled forms 禁用窗体

在输入上添加禁用的布尔属性,以防止用户交互并使其看起来更亮。


最后于 27天前 被pencil编辑 ,原因:
最新回复 (0)
返回
发新帖