label

Label.

Example

js

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

bxml

Code
<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

Code
.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

Events