label

Label.

Example

js

Page({
  data: {
    radioItems: [
      { name: 'USA' },
      { name: 'CHN', checked: 'true' },
      { name: 'BRA' },
      { name: 'JPN' },
      { name: 'ENG' },
      { name: 'TUR' }
    ],
    hidden: false
  }
})

bxml

<theme-context>
  <view class='container'>
      <view class="section section_gap">
      <view class="section__title">label用for标识表单组件</view>
      <radio-group class="group">
        <view class="label-2" bn:for="{{radioItems}}">
          <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
          <view class="label-2__icon">
            <view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
          </view>
          <label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
        </view>
      </radio-group>
    </view>
  </view>
</theme-context>

bxss

.label-2{
    margin-bottom: 15px;
}
.label-2__text {
    display: inline-block;
    vertical-align: middle;
}
.label-2__icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    background: #fcfff4;
    border-radius: 50px;
}

.label-2__icon-checked {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 12px;
    height: 12px;
    background: #1aad19;
    border-radius: 50%;
}

.label-4_text{
    text-align: center;
    margin-top: 15px;
}

Props

Name	Type	Description
for	string

Events

Name	Description
bindtap