Ionic-양식

Ionic forms주로 사용자와의 상호 작용 및 필요한 정보 수집에 사용됩니다. 이 장에서는 다양한 텍스트 입력 양식을 다루고 다음 장에서는 Ionic 프레임 워크를 사용하여 다른 양식 요소를 사용하는 방법을 설명합니다.

입력 양식 사용

양식을 사용하는 가장 좋은 방법은 listitem당신의 주요 수업으로. 앱은 일반적으로 하나 이상의 양식 요소로 구성되므로 목록으로 구성하는 것이 좋습니다. 다음 예에서 항목 요소가label 꼬리표.

다른 요소를 사용할 수 있지만 레이블은 텍스트 입력에 초점을 맞추기 위해 요소의 모든 부분을 탭할 수있는 기능을 제공합니다. 당신은 설정할 수 있습니다placeholder입력 텍스트와 다르게 보이며 입력을 시작하자마자 숨겨집니다. 아래 예에서이를 확인할 수 있습니다.

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

위의 코드는 다음 화면을 생성합니다.

이온 라벨

Ionic은 레이블에 대한 몇 가지 다른 옵션을 제공합니다. 당신은 사용할 수 있습니다input-label 클래스, 텍스트를 입력 할 때 자리 표시자가 왼쪽에 있도록하려면

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

위의 코드는 다음 화면을 생성합니다.

누적 레이블

Stacked label라벨을 입력 상단 또는 하단으로 이동할 수있는 다른 옵션입니다. 이를 달성하기 위해item-stacked-label 레이블 요소에 클래스를 추가하고 새 요소를 만들고 input-label그것에 수업. 상단에 배치하려면이 요소를input꼬리표. 이것은 다음 예에 나와 있습니다.

주목하십시오 span 태그는 input꼬리표. 장소를 변경하면 화면 아래에 표시됩니다.

<div class = "list">
   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 1</span>
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

위의 코드는 다음 화면을 생성합니다.

플로팅 라벨

Floating labels사용할 수있는 세 번째 옵션입니다. 이러한 레이블은 입력을 시작하기 전에 숨겨집니다. 타이핑이 시작되면 멋진 플로팅 애니메이션과 함께 요소 위에 나타납니다. 누적 레이블을 사용한 것과 동일한 방식으로 부동 레이블을 사용할 수 있습니다. 유일한 차이점은 이번에는item-floating-label 수업.

<div class = "list">
   <label class = "item item-input item-floating-label">
      <span class = "input-label"t>Label 1</span>
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input item-floating-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

위의 코드는 다음 화면을 생성합니다.

삽입 입력

지난 장에서 Ionic 요소를 삽입하는 방법에 대해 논의했습니다. 다음을 추가하여 입력을 삽입 할 수도 있습니다.item-input-inset 항목에 클래스와 item-input-wrapper라벨에. 래퍼는 라벨에 추가 스타일을 추가합니다.

라벨 옆에 다른 요소를 추가하면 새 요소에 맞게 라벨 크기가 조정됩니다. 레이블 안에 요소 (일반적으로 아이콘)를 추가 할 수도 있습니다.

다음 예제는 두 개의 삽입 입력을 보여줍니다. 첫 번째는 레이블 옆에 버튼이 있고 두 번째는 내부에 아이콘이 있습니다. 우리는placeholder-icon클래스를 사용하여 자리 표시 자 텍스트와 동일한 색상으로 아이콘을 만듭니다. 그것이 없으면 아이콘은 레이블의 색상을 사용합니다.

<div class = "list">
   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">		
         <input type = "text" placeholder = "Placeholder 1" />
      </label>
      <button class = "button">button</button>
   </div>

   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">
         <i class = "icon ion-edit placeholder-icon"></i>
         <input type = "text" placeholder = "Placeholder 2" />
      </label>
   </div>
</div>

위의 코드는 다음 화면을 생성합니다.