HBUI初始框架的使用说明--HBFORM的使用

原创已于 2022-07-30 18:50:03 修改 · 1.3k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #ui

于 2022-07-30 11:48:20 首次发布

HBUI是一个正在开发的前端框架，本文档详细介绍了HBFORM组件的使用方法，包括标签、属性及其效果。HBFORM主要用于创建表单，提供了诸如手机号、验证码等输入组件，并支持自定义样式和功能，如输入限制、反馈提示等。用户可通过设置--label-width等CSS变量调整布局，通过hb-input-clear和hb-input-hide属性实现清除和显示密码功能。此外，还支持hb-total、hb-limit-max和hb-limit-min等属性实现字数统计和限制。

HBUI初始框架的使用说明–HBFORM的使用

下载地址

hbui框架下载

引用框架

通过调用hbui框架包里的hbui.js即可，但要说明hbui.js和同级的hbuicss文件夹、hbuijs文件夹的名称和相对路径不支持自定义，否则得自行到整合的hbui.js中更改。

框架更新情况说明

很多东西都在开发中，目前仅开发了按钮和输入框组件以及FORM的整体布局，可以视为一个小插件来使用。

框架使用

<form class="hb-form" style="--label-width:70px;padding:20px 100px">
	<div class="hb-item-line">
    <div class="hb-label">手机号:</div>
    <input id="user_phone" hb-input-clear="true" class="hb-input"/>
    </div>
    <div class="hb-item-line">
        <div class="hb-label">验证码:</div>
        <input class="hb-input" style="--input-width-shrink:125px;"/>
        <div class="hb-btn" style="width:120px;--btn-height:35px;margin-left:5px;font-size:12px">获取验证码</div>
    </div>
    <div class="hb-btn-box">
        <div class="hb-btn hb-btn-flow">登录</div>
    </div>
</form>

在这里插入图片描述

<form class="hb-form">
	<div class="hb-item-line">
	    <div class="hb-label">测试1</div>
	    <input class="hb-input" hb-total="true" hb-limit-max="10" hb-feedback="true"/>
	</div>
	<div class="hb-item-line">
	    <div class="hb-label">测试2</div>
	    <input class="hb-input" hb-total="true" hb-limit-max="10" hb-limit-min="5" hb-feedback="5675"/>
	</div>
</form>

在这里插入图片描述

类或属性名	含义使用说明	其他
hb-form	最外层DOM所必须带有	其含有属性“–label-width”，用于限制表单中的label宽度
–label-width	表单的label宽度限制	如例子中的“手机号：”和“验证码：”所占用的宽度；该属性可以在hb-form类中设置，也可到hb-item-line类中设置，hb-item-line继承hb-form类的该属性的设置，默认值200px
–line-spacing	表单的行与行之间的间隔	实质上是改变元素的margin-bottom属性,该属性可以在hb-form类中设置，也可到hb-item-line类中设置，hb-item-line继承hb-form类的该属性的设置，默认值10px
–line-padding	表单的行的扩展	实质上是缩短行的2*–line-padding的宽度并添加–line-padding的margin-left和margin-right,该属性可以在hb-form类中设置，也可到hb-item-line类中设置，hb-item-line继承hb-form类的该属性的设置，默认值10px
–line-height	表单的行高	直接决定了label的高和里面元素的高度；该属性可以在hb-form类中设置，也可到hb-item-line类中设置，hb-item-line继承hb-form类的该属性的设置，默认值35px
—item-spacing	表单的一行中元素的间隔	实质上是改变子元素的margin-right属性,该属性可以在hb-form类中设置，也可到hb-item-line类中设置，hb-item-line继承hb-form类的该属性的设置，默认值5px
hb-item-line	表单的一行区域	在里面添加表单的具体元素
hb-label	表单输入的说明	如例子中的“手机号：”和“验证码：”
hb-input	表单输入框	拥有一个属性“–input-width-shrink”，默认占据除了label以外的其他空间
–input-width-shrink	输入框的属性	由于input是默认占据剩余空间，如果想要完美适配，就可以设置该属性将其缩短一定的宽度；比如例子中的验证码输入框后面需要一个获取的按钮，此时就需要该属性缩短一定的宽度为按钮提供空间，该属性默认值为0px
hb-input-clear	输入框元素的属性	使输入框后面出现一个小叉叉，点击可以清空输入框内容,叉叉的宽度为26px，图标的大小暂不支持自适应（后续更新），默认值为false，当为true时显示
hb-input-hide	输入框元素的属性	使输入框后面出现一个小眼睛，实现密码的掩码隐藏开启和关闭，点击可以显示输入框内容,叉叉的宽度为26px，图标的大小暂不支持自适应（后续更新），默认值为false，当为true时显示
hb-total	输入框元素的属性	开启后可以统计输入的字数，默认为false，开启后可进一步设置最大值最小值
hb-limit-max	输入框元素的属性	在hb-total开启的前提下生效，开启后可以限制最大输入的字数，默认为false
hb-limit-min	输入框元素的属性	在hb-total开启的前提下生效，开启后可以限制最小输入的字数（提示还差几个字），默认为false
hb-feedback	输入框元素的属性	开启后可以在左下角显示提示文字，为空或“undefined”不生效，默认为“undefined”