jonowe formy i pudełka wejściowe

Lista klasa może być również wykorzystywane elementów wejściowych. poz-input i kategoria poz określa pole tekstowe i jego etykietę.

Właściwości polu tekstowym: zastępczy

Poniższy przykład, domyślnie jest 100% szerokości (lewy i prawy bez obramowania), a za pomocą zestawu atrybutów zastępczy pola oczekiwaną wartość wejściową komunikat.

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

Spróbuj »

Właściwości polu tekstowym: wejście-label

Zastosowanie nadawczo-etykieta etykiety umieszczonej po lewej stronie wejścia pola.

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

Spróbuj »

ułożone wypustki

Stacking pole wprowadzania etykiety znajduje się zazwyczaj na głowie. Każda opcja używa określenia klasy poz-ułożone-label. Każde pole wejściowe do określenia nakładów i etykietę. Poniższe przykłady służą również do ustaw atrybut zastępczy wiersza wejściowego informacji.

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

Spróbuj »

pływające etykiety

Podobny pływających Etykieta stosu etykietę, ale etykieta ma pływającego efekty animacji dla każdego wariantu trzeba określić kategorię poz-floating-label, wprowadź etykietę trzeba określić Input-etykietę.

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

Spróbuj »

Formularz do wbudowania

Domyślnie każda szerokość pola wejściowego wynosi 100%, ale możemy użyć listy list-wstawka klasy karty lub ustawić dopełnienie w postaci (dopełnienie), typ karty z cieniami.

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

Spróbuj »

Pole wejściowe Inline

Użyj list-wstawka listę podmiotów zamieszczony inline. Użyj punkt-input-wstawka style można osadzić przycisk.

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

Spróbuj »

Z ikoną pole wprowadzania

pole wprowadzania poz-wejściowy może być bardzo proste, aby dodać ikony. Ikona w <input> przed dodaniem.

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

Spróbuj »

Szef polu tekstowym

Pole wejściowe mogą być umieszczone w głowicy i może dodać lub anulować przycisk Prześlij.

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

Spróbuj »