Ionic-선택

Ionic Select사용자가 선택할 수있는 선택 옵션이있는 간단한 메뉴가 생성됩니다. 이 선택 메뉴는 스타일이 브라우저에서 처리되기 때문에 플랫폼에 따라 다르게 보입니다.

선택 사용

먼저 label 그리고 추가 item-input 그리고 item-select클래스. 두 번째 클래스는 선택 양식에 추가 스타일을 추가 한 다음input-label선택 요소에 이름을 추가하는 데 사용되는 내부 클래스입니다. 우리는 또한 추가 할 것입니다selectoption내부. 이것은 일반 HTML5 선택 요소입니다. 다음 예제는 세 가지 옵션이있는 Ionic Select를 보여줍니다.

<label class = "item item-input item-select">
   <div class = "input-label">
      Select
   </div>
	
   <select>
      <option>Option 1</option>
      <option selected>Option 2</option>
      <option>Option 3</option>
   </select>
</label>

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

스타일링 선택

다음 예제는 선택에 스타일을 적용하는 방법을 보여줍니다. Ionic 색상을 사용하여 서로 다른 스타일의 9 가지 선택 요소가있는 목록을 만들고 있습니다. 항목과 함께 목록을 사용하고 있으므로item 색상 클래스의 접두사가됩니다.

<div class = "list">
   <label class = "item item-input item-select item-light">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-stable">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-positive">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-calm">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-balanced">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-energized">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-assertive">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-royal">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-dark">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>
</div>

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