<!--pages/view/pages/dialog/index.wxml-->
<view class='container'>
  <content-title name="Input" describe="输入框">
    <content-card
      class="content"
      name="基本案例"
    >
      <view class='buttun-wrapper'>
        <l-input
          value='{{value1}}'
          width="750"
          label="用户名"
          clear="{{true}}"
          placeholder="请输入用户名"
          label-width="170"/>
        <l-input
          label="密码"
          width="750"
          label-width="170"
          placeholder="请输入密码" />
      </view>
    </content-card>

    <content-card
      class="content"
      name="对齐方式（居右）"
    >
      <view class='buttun-wrapper'>
        <l-input
          label="用户名"
          width="750"
          placeholder="请输入用户名"
          label-layout="right"
          label-width="170"/>
        <l-input
          label="密码"
          width="750"
          label-layout="right"
          label-width="170"
          placeholder="请输入密码" />
      </view>
    </content-card>

    <content-card
      class="content"
      name="输入框类型"
    >
      <view class='buttun-wrapper'>
        <l-input
          label="文本"
          width="750"
          type="text"
          clear="{{true}}"
          placeholder="请输入文本"
          label-width="170"/>
        <l-input
          label="数字"
          width="750"
          type="number"
          placeholder="请输入数字"
          label-width="170"/>
        <l-input
          label="密码"
          width="750"
          type="password"
          label-width="170"
          placeholder="请输入密码，不少于6位"/>
        <l-input
          label="身份证"
          width="750"
          type="idcard"
          label-width="170"
          placeholder="身份证号码"/>
        <l-input
          label="小数"
          width="750"
          type="digit"
          placeholder="请输入小数"
          label-width="170"/>
      </view>
    </content-card>


    <content-card
      class="content"
      name="带有状态"
    >
      <view class='buttun-wrapper'>
        <l-input
          label="必填"
          width="750"
          placeholder="这里是必填项"
          required="{{true}}"
          label-width="170"/>
        <l-input
          label="清除按钮"
          width="750"
          clear="{{true}}"
          label-width="170"
          placeholder="输入后可以清除" />
        <l-input
          label="禁用"
          width="750"
          disabled="{{true}}"
          label-width="170"
          placeholder="禁止输入" />
      </view>
    </content-card>

    <content-card
      class="content"
      name="隐藏左侧label"
    >
      <view class='buttun-wrapper'>
        <l-input
          label="标题"
          width="750"
          placeholder="这里没有隐藏标题"
          label-width="170"/>
        <l-input
          label="清除按钮"
          width="750"
          clear="{{true}}"
          label-width="170"
          hide-label
          placeholder="这里隐藏了标题" />
      </view>
    </content-card>

    <content-card
      class="content"
      name="经典案例"
    >
      <view class='buttun-wrapper'>
        <l-input
          placeholder="请输入手机号"
          width="750"
          show-row="{{ false }}"
          width="600"
          l-class='input-phone'
          label-width="120"
          clear="{{true}}"
        >
          <l-icon class='input-icon' slot="left" name="phone"/>
        </l-input>
      </view>
      <view class='buttun-wrapper'>
        <l-input
          show-row="{{ false }}"
          width="750"
          width="600"
          l-class='input-phone'
          clear="{{true}}"

          placeholder="请输入验证码"
          label-width="120"
        >
          <l-icon class='input-icon' slot="left" name="picture"/>
          <image slot="right"  class='img' bindtap='onYzmTap' src="cloud://env-9eb476.656e-env-9eb476-1258886794/images/components/input/yzm.png" />
        </l-input>
      </view>
      <view class='buttun-wrapper'>
        <l-input
          placeholder="请输入密码"
          width="750"
          show-row="{{ false }}"
          width="600"
          l-class='input-phone'
          label-width="120"
          clear="{{true}}"
        >
          <l-icon class='input-icon' slot="left" name="password"/>
        </l-input>
      </view>
    </content-card>
  </content-title>
</view>
