이온 형태와 입력 상자

list 클래스는 입력 요소에도 사용할 수 있습니다. 항목 입력 및 항목 클래스는 텍스트 상자와 해당 레이블을 지정합니다.

입력 상자 속성: 자리 표시자

다음 예에서 기본값은 100% 너비(왼쪽과 오른쪽에 테두리 없음)이며 자리 표시자 속성은 입력 필드의 예상 값에 대한 프롬프트 정보를 설정하는 데 사용됩니다. .

<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

입력 상자 입력 왼쪽에 레이블을 배치하려면 입력 레이블을 사용하세요.

<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 클래스를 사용하여 지정됩니다. 각 입력 상자는 입력 레이블을 지정해야 합니다. 다음 예에서는 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%이지만 목록 목록 삽입 또는 카드 클래스를 사용하여 양식의 패딩을 설정할 수 있습니다. 카드 클래스에는 그림자가 있습니다.

<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 입력 상자에 아이콘을 쉽게 추가할 수 있습니다. 아이콘은 <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>