Los selects en Ionic nos permiten crear elementos con opciones fijas para que el usuario escoja.

Por defecto cada sistema mostrará estas opciones de forma diferente, dependiendo de la plataforma.

Usando Selects

Lo primero que debemos de hacer es crear una etiqueta label con las clases item, item-input e item select.

A continuación hay que añadir un div con la clase input-label, donde añadiremos el nombre del elemento que contendrá las opciones.

Tras ello se usará la etiqueta select y las opciones (option) igual que se hace en HTML5

En el siguiente ejemplo vemos como funciona:

<label class = "item item-input item-select">
    <div class = "input-label">
        Edad
    </div>
    <select>
        <option>Menos de 18</option>
        <option selected>De 18 a 25</option>
        <option>Mayor de 25</option>
   </select>
</label>

Y el resultado sería el siguiente:

Haciendo una lista de elementos y añadiendoles color

Es posible hacer una lista de elementos selects en Ionic, para ello lo único que tenemos que hacer es envolver todos los elementos selects con un div con la clase list.

También es posible poner colores a los fondos de los elementos introduciendo en la etiqueta label de cada elemento la clase item-[tipo de color].

Vamos a ver en el siguiente ejemplo cómo funcionan las listas y los colores:

<div class = "list">
   <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>
</div>

Que nos da el siguiente resultado.

En la siguiente entrada hablaremos de las tabs.