<template>
  <div class="page-field">
    <co-header fixed title="Field">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <div class="page-part page-content-main">
        <co-field label="用户名" placeholder="请输入用户名" :attr="{ maxlength: 10 }"></co-field>
        <co-field label="邮箱" placeholder="请输入邮箱" type="email"></co-field>
        <co-field label="密码" placeholder="请输入密码" type="password"></co-field>
        <co-field label="手机号" placeholder="请输入手机号" type="tel"></co-field>
        <co-field label="网站" placeholder="请输入网址" type="url"></co-field>
        <co-field label="数字" placeholder="请输入数字" type="number"></co-field>
        <co-field label="生日" placeholder="请输入生日" type="date"></co-field>
        <co-field label="自我介绍" placeholder="自我介绍" type="textarea" rows="4"></co-field>
      </div>

      <div class="page-part">
        <co-field placeholder="登录邮箱" type="email" readonly value="wang@coracle.com"></co-field>
        <co-field placeholder="密码" type="password" disabled value="123456"></co-field>
      </div>

      <div class="page-part">
        <co-field label="邮箱" placeholder="成功状态" state="success"></co-field>
        <co-field label="邮箱" placeholder="失败状态" state="error" disable-clear></co-field>
        <co-field label="邮箱" placeholder="警告状态" state="warning"></co-field>
      </div>

      <div class="page-part">
        <co-field label="验证码" placeholder="输入验证码">
          <img src="../assets/100x100.png" height="48px" width="100px">
        </co-field>
      </div>
    </div>
  </div>
</template>

<script type="es6">
export default {
  name: 'page-field'
};
</script>
