表单组件_其他常用组件
原创...大约 2 分钟
表单是常用的组件,同样,在表单中,也有很多配套的组件
复选框 checkbo
多选项目,与 html 复选框基本一致
<checkbox checked="true" />选中
checked
表示初始状态为选中(true) 或 未选中(false)
配合 checkbox-group
形成一组
<checkbox-group>
<checkbox checked="true" />
<text>读书</text>
<checkbox checked="true" />
<text>打游戏</text>
<checkbox />
<text>听音乐</text>
</checkbox-group>
radio
单选项目,与 html 单选框基本一致
<radio checked="true" />选中
checked 表示初始状态为选中(true) 或 未选中(false)
配合 radio-group
形成一组
<radio-group>
<radio checked="true" />
<text>打游戏</text>
<radio checked="false" />
<text>读书</text>
<radio checked="false" />
<text>听音乐</text>
</radio-group>
label
用来改进表单组件的可用性,与 html 的 label 基本一致
<label for="menu"> <checkbox id="menu" checked="true" />选中 </label>
switch
开关选择器,有着比较美观的展示效果
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
checked | boolean | false | 否 | 是否选中 |
disabled | boolean | false | 否 | 是否禁用 |
type | string | switch | 否 | 样式,有效值:switch, checkbox |
color | string | #04BE02 | 否 | switch 的颜色,同 css 的 color |
<switch />
<switch checked="true" />
<switch checked="true" disabled />
<switch checked="true" type="checkbox" />
<switch checked="true" color="red" />
textarea
多行输入框,与 html 多行输入框基本一致
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | string | 否 | 输入框的内容 | |
placeholder | string | 否 | 输入框为空时占位符 | |
disabled | boolean | false | 否 | 是否禁用 |
maxlength | number | 140 | 否 | 最大输入长度,设置为 -1 的时候不限制最大长度 |
focus | boolean | false | 否 | 获取焦点 |
auto-height | boolean | false | 否 | 是否自动增高 |
<textarea value="文本内容" />
<textarea placeholder="占位符" />
<textarea maxlength="10" />
<textarea disabled />
<textarea focus />
<textarea auto-height />
Powered by Waline v2.15.7