Ionic - Chọn

Ionic Selectsẽ tạo một menu đơn giản với các tùy chọn cho người dùng chọn. Menu Chọn này sẽ trông khác nhau trên các nền tảng khác nhau, vì kiểu dáng của nó được trình duyệt xử lý.

Sử dụng Chọn

Đầu tiên, chúng tôi sẽ tạo label và thêm item-inputitem-selectcác lớp học. Lớp thứ hai sẽ thêm kiểu bổ sung vào biểu mẫu đã chọn và sau đó chúng tôi sẽ thêminput-labellớp bên trong sẽ được sử dụng để thêm tên cho phần tử được chọn của chúng ta. Chúng tôi cũng sẽ thêmselect với optionphía trong. Đây là phần tử chọn HTML5 thông thường. Ví dụ sau đang hiển thị Ionic Select với ba tùy chọn.

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

Đoạn mã trên sẽ tạo ra màn hình sau:

Lựa chọn tạo kiểu

Ví dụ sau đây sẽ chỉ cho bạn cách áp dụng kiểu để chọn. Chúng tôi đang tạo một danh sách với chín phần tử được chọn được tạo kiểu khác nhau bằng cách sử dụng màu Ionic. Vì chúng tôi đang sử dụng danh sách với các mục,item sẽ là tiền tố cho các lớp màu.

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

Đoạn mã trên sẽ tạo ra màn hình sau: