# Label 标签
概述
Label 标签，用来改进表单组件的可用性，将控件放在该标签下，当点击时，就会触发对应的控件，目前主要用于Switch、Radio、Checkbox组件。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面json文件中引入
{
"navigationBarTitleText": "标签",
"usingComponents": {
"fui-label": "/components/firstui/fui-label/fui-label"
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：在根目录app.json文件中全局引入
"usingComponents": {
"fui-label": "components/firstui/fui-label/fui-label"
}
1
2
3
2
3
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
Radio 单项选择器
将 fui-label 组件放于 fui-radio 组件外层即可 （其他组件的使用方式相同）。
注意：示例中使用的其他组件请自行引入
<fui-radio-group>
<fui-label wx:for="{{radioItems}}" wx:key="index">
<fui-list-cell>
<view class="fui-align__center">
<fui-radio checked="{{item.checked}}" value="{{item.value}}">
</fui-radio>
<text class="fui-text">{{item.name}}</text>
</view>
</fui-list-cell>
</fui-label>
</fui-radio-group>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
radioItems: [{
name: '小于18岁',
value: '1',
checked: true
},
{
name: '18~28岁',
value: '2',
checked: false
},
{
name: '29~40岁',
value: '3',
checked: false
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 标签显示内容，将表单组件放在该组件下 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 其他说明 |
|---|---|---|---|---|
| padding | String | padding值 | 0 | - |
| margin | String | margin值 | 0 | - |
| full | Boolean | 宽度是否100% | false | - |
| inline V1.7.0+ | Boolean | 是否为行内模式 | false | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| - | - | - |