label

概述

用于为 <input> 、 <textarea> 组件定义标注。

使用限制

子组件

不支持

属性

除了支持 通用属性 以外，还支持如下属性。

样式

支持 <text> 样式，支持 通用样式 。

事件

不支持

示例代码

<template>
  <div class="container">
    <div class="page-title-wrap">
      <text class="page-title">{{componentName}}</text>
    </div>

    <div class="label-item">
      <label>Label tag:</label>
    </div>

    <div class="label-item">
      <label target="input1">input:</label>
      <input class="flex" id="input1" placeholder="please enter" />
    </div>

    <div class="label-item">
      <label target="textarea1">textarea:</label>
      <textarea class="flex textareaPadding" id="textarea1" placeholder="textarea..."></textarea>
    </div>

    <div class="label-item">
      <label target="radio1">radio:</label>
      <input type="radio" id="radio1" />
    </div>

    <div class="label-item">
      <label target="checkbox1">checkbox:</label>
      <input class="flex" type="checkbox" id="checkbox1" />
    </div>
  </div>
</template>

<style>
    .container {
      flex: 1;
      flex-direction: column;
    }
    .page-title-wrap {
      padding-top: 50px;
      padding-bottom: 80px;
      justify-content: center;
    }
    .page-title {
      padding-top: 30px;
      padding-bottom: 30px;
      padding-left: 40px;
      padding-right: 40px;
      border-color: #bbbbbb;
      color: #bbbbbb;
      border-bottom-width: 2px;
    }
    .label-item {
      align-items: center;
      border-bottom-width: 1px;
      border-color: #dddddd;
    }

    label {
      padding: 30px;
      font-size: 35px;
      width: 250px;
    }

    .flex {
      flex: 1;
    }

    .textareaPadding {
      padding-top: 20px;
    }
</style>

<script>
    export default {
        data: {
            componentName: 'label',
            input_value: ''
        },
        onInit() {
            this.$page.setTitleBar({ text: 'label' })
        }
    }
</script>

效果图如下：