表单组件_其他常用组件

表单是常用的组件，同样，在表单中，也有很多配套的组件

复选框 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 />

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。