支付寶小程序表單組件 Label

用于改進表單組件的可用性。

使用 for 屬性找到對應組件的 id，或者將組件放在該標簽下。當點擊時，就會聚焦對應的組件。for 優(yōu)先級高于內部組件，內部有多個組件的時候默認觸發(fā)第一個組件。 目前可以綁定的組件有：checkbox , radio ,input, textarea。

掃碼體驗

示例代碼

<!-- API-DEMO page/component/label/label.axml -->
<view class="page">
  <view class="page-section">
    <view class="page-section-title">Checkbox</view>
    <view class="page-section-demo">
      <checkbox-group>
        <view>
          <label>
            <checkbox value="AngularJS" />
            <text> AngularJS</text>
          </label>
        </view>
        <view>
          <label>
            <checkbox value="React" />
            <text> React</text>
          </label>
        </view>
      </checkbox-group>
    </view>
  </view>


  <view class="page-section">
    <view class="page-section-title">Radio</view>
    <view class="page-section-demo">
      <radio-group>
        <view>
          <radio id="AngularJS" value="AngularJS" />
          <label for="AngularJS">AngularJS</label>
        </view>
        <view>
          <radio id="React" value="React" />
          <label for="React">React</label>
        </view>
      </radio-group>
    </view>
  </view>


  <view class="page-section">
    <view class="page-section-title">label中有多個 Checkbox 時，點擊 label 關聯(lián)的元素選擇第一個，例如點擊的“Click Me”</view>
    <view class="page-section-demo">
      <label>
        <checkbox>選中我</checkbox>
        <checkbox>選不中</checkbox>
        <checkbox>選不中</checkbox>
        <checkbox>選不中</checkbox>
        <view>
          <text>Click Me</text>
        </view>
      </label>
    </view>
  </view>
</view>
/* API-DEMO page/component/label/label.acss */
checkbox-group > view,
radio-group > view {
  margin-bottom: 12rpx;
}

屬性