bricks/docs/cn/widgets/form.md
2024-05-11 17:58:28 +08:00

17 KiB

form

用法

<html>

<head>
	<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>

<body>
	<script src="/bricks/bricks.js"></script>
	<script>
		const opts =
		{
			"widget": {
				"widgettype": "VBox",
				"options": { "height": "100%" },
				"subwidgets": [
					{
						"widgettype": "HBox",
						"options": { "height": "auto" },
						"subwidgets": [
							{
								"widgettype": "Text",
								"options": {
									"otext": "Please change Font size",
									"i18n": true
								}
							},
							{
								"widgettype": "Button",
								"options": {
									"label": "A",
									"width": "auto",
									"item_rate": 1.4
								},
								"binds": [
									{
										"wid": "self",
										"event": "click",
										"actiontype": "script",
										"target": "app",
										"script": "bricks_app.textsize_bigger()"
									}
								]
							},
							{
								"widgettype": "Button",
								"options": {
									"label": "A",
									"width": "auto",
									"item_rate": 0.8
								},
								"binds": [
									{
										"wid": "self",
										"event": "click",
										"actiontype": "script",
										"target": "app",
										"script": "bricks_app.textsize_smaller()"
									}
								]
							}
						]
					},
					{
						"widgettype": "Form",
						"options": {
							"submit_url": "/ttt/ttt.dspy",
							"title": "Test hahah  Form",
							"description": "test input implemented",
							"fields": [
								{
									"uitype": "email",
									"name": "email",
									"label": "Email",
									'required': true
								},
								{
									"uitype": "tel",
									"name": "tel",
									"pattern": "{\d}3-{\d}4-{\d}4",
									"label": "Tel",
									'required': true
								},
								{
									"uitype": "file",
									"name": "file",
									"label": "File",
									'required': true
								},
								{
									"uitype": "str",
									"minlength": 3,
									"length": 30,
									"value": "tlegre",
									"name": "name",
									"label": "Name",
									'required': true
								},
								{
									"uitype": "int",
									"minlength": 3,
									"length": 30,
									"value": 12432,
									"name": "integer",
									"label": "Integer",
									'required': true
								},
								{
									"uitype": "float",
									"dec_length": 3,
									"length": 25,
									"name": "float",
									"label": "Float"
								},
								{
									"uitype": "date",
									"name": "date",
									"label": "Date",
									'required': true
								},
								{
									"uitype": "password",
									"minlength": 3,
									"length": 30,
									"name": "password",
									"label": "Password",
									'required': true
								},
								{
									"uitype": "checkbox",
									"name": "checkbox",
									"label": "CheckBox",
									"value": 2,
									"dataurl": "test_code.json",
									'required': true
								},
								{
									"uitype": "audio",
									"name": "audio",
									"label": "Audio",
									'required': true
								},
								{
									"uitype": "code",
									"name": "code",
									"label": "Code",
									"value": 2,
									"dataurl": "test_code.json",
									'required': true
								},
								{
									"uitype": "text",
									"name": "text",
									"value": "This is a test",
									"label": "Text",
									'required': true
								}
							]
						}
					}
				]
			}
		}

			;
		const app = new BricksApp(opts);
		app.run();
	</script>
</body>

</html>

效果图

widget参数说明

参数 参数说明 类型 是否必填 可选值 默认值
widgettype 控件类型 String Vbox/Hbox ---
options 当前控件的配置项 Object height 100%/auto/scroll
id 控件的唯一标识 String --- ----
subwidgets 表单里的内容,比如表单里的子项 Object --- ---
binds 绑定的事件 Object --- ---

注意:

如果没有widget.subwidgets参数的话,表单是一个框架,没有子级,但是还可已继续添加事件

widgent.subeidgets参数说明

参数 参数说明 类型 是否必填 可选值 默认值
widgettype 控件类型 String Vbox/Hbox ---
options 当前控件的配置项 Object height 100%/auto/scroll
subwidgets 表单里的内容的配置项,比如表单里的子项 Object ---- ---

注意:此处widgettype的值不一样,options的配置项也不相同

widgettype值为Hbox时,相关配置项的参数说明

options参数说明
参数 参数说明 类型 是否必填 可选值 默认值
options 表单子项的配置项 object {"heigt":"auto"} ---
subwidgets配置项参数说明

注意:subwidgets.widgettype的值不一样,相对的options的参数也不相同

  • widgettype值为"Text"时,options参数说明

    参数 参数说明 类型 是否必填 可选值 默认值
    otext 默认显示的文字 String --- ---
    i18n 是否国家化 Boolean true/false ---
  • widgettype值为"Button"时,options参数说明

    参数 参数说明 类型 是否必填 可选值 默认值
    label 表单子项的标题 String --- ---
    width 表单子项的宽度 String auto/100% ---
    item_rate 字体的大小 number --- ---
  • binds事件参数说明

    参数 参数说明 类型 是否必填 可选值 默认值
    wid 当前节点的唯一标识 String self ---
    event 事件的类型 String click ---
    actiontype 事件的执行方式 String script ---
    target 事件在哪个载体执行 String --- ---
    script 事件通过哪个方法执行 String --- ---

widgettype值为Form时,相关配置项的参数说明

options参数说明
参数 参数说明 类型 是否必填 可选值 默认值
submit_url 接口地址 String --- ---
title 标题 String --- ---
description 描述 String --- ---
fields 表单的子项的具体配置内容 Array --- ---
options.fieds参数说明

注意:options.fieds内,每一项的uitype值不一样,其配置项也不同

  • uitype为email时的参数配置(注意:email为邮件格式)

    参数 参数说明 类型 是否必填 可选值 默认值
    uitype 表单子项的类型 String --- ---
    name 表单子项的原生name属性 String --- ---
    label 当前子项的标签文本 String --- ---
    required 是否必须 Boolean true/false ---
  • uitype为tel时的参数配置(注意:tel为手机号格式)

    参数 参数说明 类型 是否必填 可选值 默认值
    uitype 表单子项的类型 String --- ---
    name 表单子项的原生name属性 String --- ---
    pattern 当前项的正则校验 String --- ---
    label 当前子项的标签文本 String --- ---
    required 是否必须 Boolean true/false ---
  • uitype为file时的参数配置(注意:file为上传文件格式)

    参数 参数说明 类型 是否必填 可选值 默认值
    uitype 表单子项的类型 String --- ---
    name 表单子项的原生name属性 String --- ---
    label 当前子项的标签文本 String --- ---
    required 是否必须 Boolean true/false ---
  • uitype为str时的参数配置(注意:str为文字格式)

    参数 参数说明 类型 是否必填 可选值 默认值
    uitype 表单子项的类型 String --- ---
    minlength 当前值的最少字符数量 number --- ---
    length 当前值的最大字符数量 number --- ---
    value 当前子项默认显示的值 String --- ---
    name 表单子项的原生name属性 String --- ---
    label 当前子项的标签文本 String --- ---
    required 是否必须 Boolean true/false ---
  • uitype为int时的参数配置(注意:int为数字格式)

    注意:uitype为int时,数值可以点击增加或者减少,且只能填入数字)

    参数 参数说明 类型 是否必填 可选值 默认值
    uitype 表单子项的类型 String --- ---
    minlength 当前值的最少字符数量 number --- ---
    length 当前值的最大字符数量 number --- ---
    value 当前子项默认显示的值 String --- ---
    name 表单子项的原生name属性 String --- ---
    label 当前子项的标签文本 String --- ---
    required 是否必须 Boolean true/false ---
  • uitype为float时的参数配置(注意:float为浮点数字格式)

    参数 参数说明 类型 是否必填 可选值 默认值
    uitype 表单子项的类型 String --- ---
    dec_length 当前值能显示的最少浮点位数 number --- ---
    length 当前值能显示的最多浮点位数 number --- ---
    name 表单子项的原生name属性 String --- ---
    label 当前子项的标签文本 String --- ---
    required 是否必须 Boolean true/false ---
  • uitype为date时的参数配置(注意:data为时间格式)

    注意:此项可以填写时间,也可以选择时间

    参数 参数说明 类型 是否必填 可选值 默认值
    uitype 表单子项的类型 String --- ---
    name 表单子项的原生name属性 String --- ---
    label 当前子项的标签文本 String --- ---
    required 是否必须 Boolean true/false ---
  • uitype为password时的参数配置(注意:password为密码格式)

    参数 参数说明 类型 是否必填 可选值 默认值
    uitype 表单子项的类型 String --- ---
    minlength 当前值的最少字符数量 number --- ---
    length 当前值的最大字符数量 number --- ---
    name 表单子项的原生name属性 String --- ---
    label 当前子项的标签文本 String --- ---
    required 是否必须 Boolean true/false ---
  • uitype为chexkbox时的参数配置(注意:chexkbox为复选格式)

    参数 参数说明 类型 是否必填 可选值 默认值
    uitype 表单子项的类型 String --- ---
    name 表单子项的原生name属性 String --- ---
    label 当前子项的标签文本 String --- ---
    required 是否必须 Boolean true/false ---
    value 当前子项默认显示的值 number --- ---
    dataurl 当前项的值的来源,接口地址或者是JSON文件地址 String --- ---
  • uitype为code时的参数配置(注意:code为下拉选择格式)

    参数 参数说明 类型 是否必填 可选值 默认值
    uitype 表单子项的类型 String --- ---
    name 表单子项的原生name属性 String --- ---
    label 当前子项的标签文本 String --- ---
    required 是否必须 Boolean true/false ---
    value 当前子项默认显示的值 number --- ---
    dataurl 当前项的值的来源,接口地址或者是JSON文件地址 String --- ---
  • uitype为text时的参数配置(注意:text为文本框格式)

    参数 参数说明 类型 是否必填 可选值 默认值
    uitype 表单子项的类型 String --- ---
    value 当前子项默认显示的值 String --- ---
    name 表单子项的原生name属性 String --- ---
    label 当前子项的标签文本 String --- ---
    required 是否必须 Boolean true/false ---