<demo-block title="基础用法">
  <van-cell-group>
    <van-field value="{{ value }}" placeholder="请输入用户名" border="{{ false }}" clearable />
  </van-cell-group>
</demo-block>

<demo-block title="自定义类型">
  <van-cell-group>
    <van-field
      value="{{ username }}"
      label="用户名"
      placeholder="请输入用户名"
      clearable
      right-icon="question-o"
      right-icon-class="custom-icon"
      required
      bind:click-icon="onClickIcon"
    />
    <van-field
      value="{{ password }}"
      type="password"
      label="密码"
      placeholder="请输入密码"
      required
      border="{{ false }}"
    />
  </van-cell-group>
</demo-block>

<demo-block title="禁用输入框">
  <van-cell-group>
    <van-field
      value="输入框已禁用"
      label="用户名"
      left-icon="contact"
      disabled
      border="{{ false }}"
    />
  </van-cell-group>
</demo-block>

<demo-block title="错误提示">
  <van-cell-group>
    <van-field
      value="{{ username2 }}"
      label="用户名"
      placeholder="请输入用户名"
      error
    />
    <van-field
      value="{{ phone }}"
      label="手机号"
      placeholder="请输入手机号"
      error-message="手机号格式错误"
      border="{{ false }}"
    />
  </van-cell-group>
</demo-block>

<demo-block title="内容对齐方式">
  <van-cell-group>
    <van-field
      value="{{ username3 }}"
      label="用户名"
      placeholder="请输入用户名"
      input-align="right"
    />
  </van-cell-group>
</demo-block>

<demo-block title="高度自适应">
  <van-cell-group>
    <van-field
      value="{{ message }}"
      label="留言"
      type="textarea"
      placeholder="请输入留言"
      rows="1"
      autosize
      border="{{ false }}"
    />
  </van-cell-group>
</demo-block>

<demo-block title="插入按钮">
  <van-cell-group>
    <van-field
      value="{{ sms }}"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
      use-button-slot
      border="{{ false }}"
    >
      <van-button slot="button" size="small" type="primary" custom-class="button">发送验证码</van-button>
    </van-field>
  </van-cell-group>
</demo-block>
