Ionic表单输入框样式与布局使用教程

Ionic 表单和输入框

在 Ionic 框架中，表单和输入框是构建移动应用用户界面的关键元素。通过使用 list、item-input 和 item 等 CSS 类，可以方便地定义输入框及其标签的样式和布局。下面将介绍几种常见的输入框样式及其实现方式。

输入框属性：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 类可以将标签放置在输入框的左侧，适用于需要明确标识输入内容的场景。示例代码：

<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 类实现：

<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>

内嵌表单

通过使用 list list-inset 或 card 类，可以为表单添加内边距，使输入域看起来更紧凑。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>

内嵌输入域

内嵌输入域允许在输入框旁边添加按钮，使用 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>

带图标的输入框

在输入框中添加图标可以提升用户体验，图标通常放置在 <input> 元素之前。使用 icon 类定义图标：

<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>

头部输入框

输入框也可以放置在页面头部，并搭配按钮，适用于搜索等场景。使用 bar bar-header item-input-inset 类：

<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>

以上样式展示了 Ionic 中输入框的灵活性和多样性，开发者可以根据具体需求选择合适的布局来优化界面设计。