Box Input 表单域单元容器
表单域容器是表单域的三级容器(一级是input、select等原生表单域,二级是被分装的AX-INPUT、AX-SELECT等组件),该容器是构成一个完整的form表单的基本单位,在表单域容器里包含的子元素有:input等原生元素或AX-INPUT等表单域组件,表单域校验模块,左侧label头,右侧help元素,下方alert元素。
基本结构
ceshi
form容器主要_box-input
、role=label
、role=content
、role=input
和role=help
三个部分组成。
- 输出
- HTML
-
表头:表单注解
-
复杂结构
我们在role=input
的三个方向提供了更多可用元素。
- 在下方:_valid、ax-alert、role=note等容器
- 在内侧:role=unit、_box-tools等容器
- 在右侧:role=disk、role=image、role=cube、role=text等容器
所有表单域类型
_box-input
表单域容器支持所有的原生表单域。辅助布局的标签有:_row
(水平弹性布局),_flex
(弹性子元素),ax-bc
(垂直间距),_grid
(栅格布局),ax-alert
(警告)等。
表单容器不对type=submit/type=reset/button
的宽度做处理,如果需要全宽的按钮,可追加_w-full
样式类。
- 输出
- HTML
full通栏模式
_box-input
表单域容器追加_in-full
表示100%铺满父容器。full模式只是让中间的表单域宽度最大化,不对头尾做限制,看上去会有点凌乱,不过只要确保role=label
的文本字数一致,起始看起来还算整齐的。
- 输出
- HTML
如果认为左侧role=label
标签不整齐,可对标签直接使用style
定义其width
。
apart分离模式
_box-input
表单域容器追加_in-apart
表示分离role=label
、role=help
和role=content
,让role=content
和role=input
真正通栏显示。
- 输出
- HTML
compact紧凑模式
_box-input
表单域容器追加_in-compact
表示紧凑模式,尽量节省空间,等同于移动端表单布局。
- 输出
- HTML
如果认为左侧role=label
标签不整齐,可对标签直接使用style
定义其width
。
embed通栏模式
_box-input
表单域容器追加_in-embed
表示role=label
将嵌入到input
中,使用该布局模式需要两个条件:
- 仅对文本
input
和多行文本textarea
有效,其他类型的表单域空间会错位 - 需要再
_box-input
元素上设置--_form-lbl-w
该变量,建议使用em
作为单位,1em为一个字符的宽度,因为label有padding,所以需要该变量需要适当调大一点。
- 输出
- HTML
尺寸
_box-input
表单域容器追加_in-sm
表示小尺寸的表单,表单域普遍高28px;追加_in-lg
表示大尺寸的表单,表单域普遍高48px。
我们通过一个示例演示不同尺寸和不同布局模式交叉使用的效果。
- 输出
- HTML
- JS
-
-
let sections = document.querySelectorAll('#sizeinput section'); sm.onclick=()=>{ sections.forEach((k)=>{ k.classList.remove('_in-lg'); k.classList.add('_in-sm'); }); } lg.onclick=()=>{ sections.forEach((k)=>{ k.classList.remove('_in-sm'); k.classList.add('_in-lg'); }); } md.onclick=()=>{ sections.forEach((k)=>{ k.classList.remove('_in-sm'); k.classList.remove('_in-lg'); }); } normal.onclick=()=>{ sections.forEach((k)=>{ k.classList.remove('_in-apart'); k.classList.remove('_in-full'); k.classList.remove('_in-compact'); k.classList.remove('_in-embed'); }); } full.onclick=()=>{ sections.forEach((k)=>{ k.classList.remove('_in-apart'); k.classList.remove('_in-compact'); k.classList.remove('_in-embed'); k.classList.add('_in-full'); }); } apart.onclick=()=>{ sections.forEach((k)=>{ k.classList.remove('_in-full'); k.classList.remove('_in-compact'); k.classList.remove('_in-embed'); k.classList.add('_in-apart'); }); } compact.onclick=()=>{ sections.forEach((k)=>{ k.classList.remove('_in-apart'); k.classList.remove('_in-full'); k.classList.remove('_in-embed'); k.classList.add('_in-compact'); }); } embed.onclick=()=>{ sections.forEach((k)=>{ k.classList.remove('_in-apart'); k.classList.remove('_in-full'); k.classList.remove('_in-compact'); k.classList.add('_in-embed'); }); }
使用图标
在左侧role=label
标签可以加入指示图标或图片。图标的样式类名包含icon-
将会被识别。