Ionic-선택
Ionic Select사용자가 선택할 수있는 선택 옵션이있는 간단한 메뉴가 생성됩니다. 이 선택 메뉴는 스타일이 브라우저에서 처리되기 때문에 플랫폼에 따라 다르게 보입니다.
선택 사용
먼저 label 그리고 추가 item-input 그리고 item-select클래스. 두 번째 클래스는 선택 양식에 추가 스타일을 추가 한 다음input-label선택 요소에 이름을 추가하는 데 사용되는 내부 클래스입니다. 우리는 또한 추가 할 것입니다select 와 option내부. 이것은 일반 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>
위의 코드는 다음 화면을 생성합니다.