阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ionic 表单和输入框

      ionic 表单和输入框

      list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。

      输入框属性:placeholder

      以下实例中,默认为 100% 宽度(左右两侧没有边框),并使用 placeholder 属性设置输入字段预期值的提示信息。

      <div class="list">
        <label class="item item-input">
          <input type="text" placeholder="First Name">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Last Name">
        </label>
        <label class="item item-input">
          <textarea placeholder="Comments"></textarea>
        </label>
      </div>
      

      输入框属性:input-label

      使用 input-label 将标签放置于输入框 input 的左侧。

      <div class="list">
        <label class="item item-input">
          <span class="input-label">用户名:</span>
          <input type="text">
        </label>
        <label class="item item-input">
          <span class="input-label">密码:</span>
          <input type="password">
        </label>
      </div>
      

      堆叠标签

      堆叠标签通常位于输入框的头部。每个选项使用 item-stacked-label 类指定。 每个输入框需要指定 input-label。以下实例也使用了 placeholder 属性来设置信息输入提示。

      <div class="list">
        <label class="item item-input item-stacked-label">
          <span class="input-label">First Name</span>
          <input type="text" placeholder="John">
        </label>
        <label class="item item-input item-stacked-label">
          <span class="input-label">Last Name</span>
          <input type="text" placeholder="Suhr">
        </label>
        <label class="item item-input item-stacked-label">
          <span class="input-label">Email</span>
          <input type="text" placeholder="john@suhr.com">
        </label>
      </div>
      

      浮动标签

      浮动标签类似于堆叠标签,但浮动标签有一个动画的效果,每个选项需要指定 item-floating-label 类,输入标签需要指定 input-label。

      <div class="list">
        <label class="item item-input item-floating-label">
          <span class="input-label">First Name</span>
          <input type="text" placeholder="First Name">
        </label>
        <label class="item item-input item-floating-label">
          <span class="input-label">Last Name</span>
          <input type="text" placeholder="Last Name">
        </label>
        <label class="item item-input item-floating-label">
          <span class="input-label">Email</span>
          <input type="text" placeholder="Email">
        </label>
      </div>
      

      内嵌表单

      默认情况下每个输入域宽度都是 100%,但我们可以使用 list list-inset 或 card 类设置表单的内边距 (padding), card 类带有阴影。

      <div class="list list-inset">
        <label class="item item-input">
          <input type="text" placeholder="First Name">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Last Name">
        </label>
      </div>
      

      内嵌输入域

      使用 list-inset 设置内嵌实体列表。 使用 item-input-inset 样式可以内嵌一个按钮。

      <div class="list">
      
        <div class="item item-input-inset">
          <label class="item-input-wrapper">
            <input type="text" placeholder="Email">
          </label>
          <button class="button button-small">
            Submit
          </button>
        </div>
      
      </div>
      

      带图标的输入框

      item-input 输入框可以很简单的添加图标。 图标可以在 前添加。

      <div class="list list-inset">
        <label class="item item-input">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="text" placeholder="Search">
        </label>
      </div>
      

      头部输入框

      输入框可放置在头部,并可添加提交或取消按钮。

      <div class="bar bar-header item-input-inset">
        <label class="item-input-wrapper">
          <i class="icon ion-ios-search placeholder-icon"></i>
          <input type="search" placeholder="搜索">
        </label>
        <button class="button button-clear">
          取消
        </button>
      </div>
      
      目录
      目录