diff --git a/lib/form/docs/lib/forms/index.md b/lib/form/docs/lib/forms/index.md index ef27c884ed..1147ce7a89 100644 --- a/lib/form/docs/lib/forms/index.md +++ b/lib/form/docs/lib/forms/index.md @@ -46,14 +46,14 @@ ## 水平布局的表单 -为 `
` 元素使用类 `.form` 类来让表单实现水平布局。 +为 `` 元素使用类 `.form-horz` 类来让表单实现水平布局。 ::: tabs == 示例 - +
@@ -71,7 +71,7 @@ == HTML ```html - +
@@ -88,6 +88,497 @@ ::: +在水平布局表单中，如果需要在一行包含多个表单控件，可以使用 `.form-row` 类，下面是一个更复杂的例子： + +::: tabs + +== 示例 + + + +
+
+ + +
可以放在同一行的字段满足：可连着填写，字段意义上有相似性
+
+
+ + +
+
+
+
+ +
+
+ + +
+ 至 +
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
此表单项为必填
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ +
+ + + +
+
+
+
+ + + + +
+
强关联字段，有灰色底色进行连接，3个以上框的自适应宽度
+
+
+
+
+ +
+ + + + +
+ + +
+
+
+
+
+
+ +
+
+ + +
+
+ + +
+
+
+
+
+
+ +
+
+ + +
+
+ + +
+
+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + + +== HTML + +```html +
+
+
+ + +
可以放在同一行的字段满足：可连着填写，字段意义上有相似性
+
+
+ + +
+
+
+
+ +
+
+ + +
+ 至 +
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+ + +
此表单项为必填
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ +
+ + + +
+
+
+
+ + + + +
+
强关联字段，有灰色底色进行连接，3个以上框的自适应宽度
+
+
+
+
+ +
+ + + + +
+ + +
+
+
+
+
+
+ +
+
+ + +
+
+ + +
+
+
+
+
+
+ +
+
+ + +
+
+ + +
+
+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+``` + +::: + +## 网格布局 + +为 `
` 元素使用类 `.form-grid` 类来让表单实现网格布局。 + +::: tabs + +== 示例 + + + +
+ + +
为 .form-group 添加 w-* 辅助类来设置宽度
+
+
+
项目类型
+
+ + +
+
+
+ + +
+
+ + +
+
+ +
+ + - + +
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ +== HTML + +```html +``` + +::: + ## 帮助性文本 使用 `form-tip` 来显示帮助性的文本并添加到表单控件组中。