ionischen Formen und Eingabefelder

Klassenliste können auch Eingabeelemente verwendet werden. item-Eingang und Positionstyp gibt das Textfeld und seine Beschriftung.

Eingabefeld Eigenschaften: Platzhalter

Das folgende Beispiel ist die Standard-100% der Breite (links und rechts ohne Rahmen), und mit dem Nachrichteneingabefeld Platzhalter-Attribut gesetzt erwarteten Wert.

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

Versuchen »

Das Eingabefeld für Eigenschaften: input-label

Eingabe-Label-Verwendung des Etiketts auf der linken Seite des Eingabefeldes Eingang platziert.

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

Versuchen »

Gestapelte Tabs

Stapel Etikett Eingabefeld ist in der Regel auf dem Kopf befindet. Jede Option verwendet Artikel-stacked-Label-Klassenbezeichnung. Jedes Eingabefeld Eingabe-Etikett angeben. Die folgenden Beispiele sind auch die Platzhalter Attributinformationen Eingabeaufforderung eingestellt.

<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="[email protected]">
  </label>
</div>

Versuchen »

Schwimmdock Etikett

Ähnliche Floating Etikett das Label-Stack, aber das Etikett item-Floating-Label-Kategorie, geben Sie das Etikett, das Sie Eingabe-Label angeben müssen angeben, eine Floating-Animationseffekte für jede Option benötigen.

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

Versuchen »

Embedded-Formular

Standardmäßig ist jedes Eingabefeld Breite 100%, aber wir können die Liste list-Einschub-Klasse-Karte verwenden oder die Form der Polsterung (padding) gesetzt, Karten-Typ mit Schatten.

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

Versuchen »

Inline-Eingabefeld

Verwenden Sie list-Einsatz Set Inline-Entity-Liste. Verwenden Sie Artikel-input-Einschub Stile können eine Schaltfläche einbetten.

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

Versuchen »

Mit Eingabefeld Symbol

item-Eingang Eingabefeld kann sehr einfach sein Symbole. Icon in der <input> vor der Zugabe.

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

Versuchen »

Der Kopf des Eingabefeldes

Eingabefeld kann in den Kopf gestellt werden, und hinzufügen oder Abbrechen Submit-Button.

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

Versuchen »