Ionic入门五：表单

时间：2023-12-13 19:18:32

一、输入框

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

1.输入框属性：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>

Ionic入门五：表单

2.输入框属性：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>

Ionic入门五：表单

3.堆叠标签

堆叠标签通常位于输入框的头部。每个选项使用 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>

Ionic入门五：表单

4.浮动标签

浮动标签类似于堆叠标签，但浮动标签有一个动画的效果，每个选项需要指定 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>

Ionic入门五：表单

5.内嵌表单

默认情况下每个输入域宽度都是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>

Ionic入门五：表单

6.内嵌输入域

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

Ionic入门五：表单

7.带图标的输入框

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>

Ionic入门五：表单

8.头部输入框

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

<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入门五：表单

二、ionic Toggle(切换开关)

切换开关类似与 HTML 的 checkbox 标签，但它更易于在移动设备上使用。
切换开关可以使用 toggle-assertive 来指定颜色。

<label class="toggle">

   <input type="checkbox">

   <div class="track">

     <div class="handle"></div>

   </div>

</label>

该实例有是多个切换开关列表。注意，每个选项的 item 类后需要添加 item-toggle 类。

<ul class="list">

  <li class="item item-toggle">

     HTML5

     <label class="toggle toggle-assertive">

       <input type="checkbox">

       <div class="track">

         <div class="handle"></div>

       </div>

     </label>

  </li>

  ...

</ul>

Ionic入门五：表单

三、ionic checkbox（复选框）

ionic 里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大，只是样式上有所不同。
以下实例颜色了多个复选框的列表。
注意，每个选项的 item 类后需要添加 item-checkbox 类。
复选框可以使用 checkbox-assertive 来指定颜色。

<ul class="list">

  <li class="item item-checkbox">

     <label class="checkbox">

       <input type="checkbox">

     </label>

     Flux Capacitor

  </li>

  ...

</ul>

Ionic入门五：表单

四、ionic 单选框

ionic 当选按钮与标准 type="radio" 的 input元素类似。以下展示了现代app类型的单选按钮。
每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。
ionic 在单选项中使用了 元素，使其更易点击。
实例

<div class="list">

<label class="item item-radio">

  <input type="radio" name="group" value="go" checked="checked">

  <div class="item-content">

    Go

  </div>

  <i class="radio-icon ion-checkmark"></i>

</label>

<label class="item item-radio">

  <input type="radio" name="group" value="python">

  <div class="item-content">

    Python

  </div>

  <i class="radio-icon ion-checkmark"></i>

</label>

<label class="item item-radio">

  <input type="radio" name="group" value="ruby">

  <div class="item-content">

    Ruby

  </div>

  <i class="radio-icon ion-checkmark"></i>

</label>

<label class="item item-radio">

  <input type="radio" name="group" value=".net">

  <div class="item-content">

    .Net

  </div>

  <i class="radio-icon ion-checkmark"></i>

</label>

<label class="item item-radio">

  <input type="radio" name="group" value="java">

  <div class="item-content">

    Java

  </div>

  <i class="radio-icon ion-checkmark"></i>

</label>

<label class="item item-radio">

  <input type="radio" name="group" value="php">

  <div class="item-content">

    PHP

  </div>

  <i class="radio-icon ion-checkmark"></i>

</label>

</div>

Ionic入门五：表单

五、ionic Range

ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。

<div class="range">

  <i class="icon ion-volume-low"></i>

  <input type="range" name="volume">

  <i class="icon ion-volume-high"></i>

</div>

<div class="list" style="margin-top: 13px">

  <div class="item item-divider">

    Ranges In A List

  </div>

  <div class="item range range-positive">

    <i class="icon ion-ios-sunny-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="12">

    <i class="icon ion-ios-sunny"></i>

  </div>

  <div class="item range range-calm">

    <i class="icon ion-ios-lightbulb-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="25">

    <i class="icon ion-ios-lightbulb"></i>

  </div>

  <div class="item range range-balanced">

    <i class="icon ion-ios-bolt-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="38">

    <i class="icon ion-ios-bolt"></i>

  </div>

  <div class="item range range-energized">

    <i class="icon ion-ios-moon-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="50">

    <i class="icon ion-ios-moon"></i>

  </div>

  <div class="item range range-assertive">

    <i class="icon ion-ios-partlysunny-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="63">

    <i class="icon ion-ios-partlysunny"></i>

  </div>

  <div class="item range range-royal">

    <i class="icon ion-ios-rainy-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="75">

    <i class="icon ion-ios-rainy"></i>

  </div>

  <div class="item range range-dark">

    <i class="icon ion-ios-lightbulb-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="88">

    <i class="icon ion-ios-lightbulb"></i>

  </div>

</div>

Ionic入门五：表单

六、ionic select

ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。
每个平台上的可选项样式都是不一样的，在PC电脑的浏览器上，你会看到传统的下拉界面，Android 上会弹出单选按钮选项，iOS 有个滚轮操作界面。

<div class="list">

  <div class="item item-input item-select">

    <div class="input-label">

      Lightsaber

    </div>

    <select>

      <option>Blue</option>

      <option selected="">Green</option>

      <option>Red</option>

    </select>

  </div>

  <div class="item item-input item-select">

    <div class="input-label">

      Fighter

    </div>

    <select>

      <option>ARC-170</option>

      <option>A-wing</option>

      <option>Delta-7</option>

      <option>Naboo N-1</option>

      <option>TIE</option>

      <option selected="">X-wing</option>

      <option>Y-wing</option>

    </select>

  </div>

  <div class="item item-input item-select">

    <div class="input-label">

      Droid

    </div>

    <select>

      <option>2-1B</option>

      <option>B1</option>

      <option>C-3PO</option>

      <option>IG-88</option>

      <option>IT-O</option>

      <option selected="">R2-D2</option>

    </select>

  </div>

  <div class="item item-input item-select">

    <div class="input-label">

      Planet

    </div>

    <select>

      <option>Alderaan</option>

      <option selected="">Dagobah</option>

      <option>Felucia</option>

      <option>Geonosis </option>

      <option>Hoth</option>

      <option>Kamino</option>

      <option>Mygeeto</option>

      <option>Naboo</option>

      <option>Tataouine</option>

      <option>Utapau</option>

      <option>Yavin</option>

    </select>

  </div>

</div>

Ionic入门五：表单

相关文章