Ionic - Sélectionnez

Ionic Selectcréera un menu simple avec des options de sélection que l'utilisateur pourra choisir. Ce menu de sélection aura un aspect différent sur différentes plates-formes, car son style est géré par le navigateur.

Utilisation de Select

Tout d'abord, nous allons créer un label et ajoutez le item-input et le item-selectDes classes. La deuxième classe ajoutera un style supplémentaire au formulaire de sélection, puis nous ajouterons leinput-labelclasse à l'intérieur qui sera utilisée pour ajouter un nom à notre élément de sélection. Nous ajouterons égalementselect avec optionà l'intérieur. Il s'agit d'un élément de sélection HTML5 standard. L'exemple suivant montre Ionic Select avec trois options.

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

Le code ci-dessus produira l'écran suivant -

Sélection de style

L'exemple suivant vous montrera comment appliquer le style à la sélection. Nous créons une liste avec neuf éléments de sélection de style différent utilisant des couleurs ioniques. Puisque nous utilisons une liste avec des éléments,item sera le préfixe des classes de couleurs.

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

Le code ci-dessus produira l'écran suivant -