Etude des composants Ionic: cas du composant "ion-input"

Ionic est un framework de développement d'applications mobiles offrant une multitude de composants pour simplifier la création d'interfaces utilisateurs modernes et attractives. Parmi ces composants, l'un des plus fondamentaux et presque omniprésents est le composant ion-input en tant qu'élément clé pour interagir avec l'utilisateur, que nous explorerons en détail et illustrerons comment l'intégrer dans vos projets Ionic pour des expériences utilisateur fluides et interactives.

Qu'est ce que `ion-input` ?

Le composant ion-input est conçu pour créer différents types de champs de saisie flexibles et personnalisables, ce qui permet aux développeurs de gérer facilement les entrées des utilisateurs dans les applications Ionic. Il s'intègre parfaitement à la stylisation et à la thématique d'Ionic, offrant une apparence cohérente sur différentes plateformes.

Comment l'utiliser et le personnaliser ?

Pour une bonne implémentation du composant ion-input sur une interface utilisateur, il faut l'inclure dans un composant ion-item afin de créer une structure de formulaire conviviale. Voici un exemple de base :

<ion-item>
    <ion-input label="Default input"></ion-input>
</ion-item>

Dans l'exemple précédent, nous avons créé un simple composant ion-input basique, sans aucune personnalisation de styles et avec qu'une propriété label qui définit le libellé du champs de saisie.

Allons maintenant plus loin et utilisons les propriétés et les types pour ajouter d'autres fonctionnalités au composant.

Quelques propriétés personnalisées du composant ion-input
- type
  
  Cette propriété permet de spécifier le type de contrôle à afficher. Le type par défaut est text. On a entre autre les types : date, email, password, search, tel, time, url, month, week et datetime-local
```
  <ion-item>
      <ion-input label="Adresse Email" type="email" ></ion-input>
  </ion-item>
```
- placeholder
  
  Cette propriété permet de spécifier le texte d'instruction qui s'affiche avant que l'input n'ait une valeur. Cette propriété ne s'applique que lorsque la propriété de type est définie sur "email", "number", "password", "search", "tel", "text" ou "url", sinon elle est ignorée.
```
  <ion-item>
      <ion-input 
          label="Adresse Email" 
          type="email" 
          placeholder="Entrez votre adresse email ici">
      </ion-input>
  </ion-item>
```
- value
  
  Cette propriété permet de spécifier la valeur par défaut du champs de saisie
```
  <ion-item>
      <ion-input 
          label="Adresse Email" 
          type="email" 
          value="example@gmail.com">
      </ion-input>
  </ion-item>
```
- required
  
  Cette propriété permet de spécifier si le champs de saisie doit etre requis ou pas. Il est de type booléen.
```
  <ion-item>
      <ion-input 
          label="Adresse Email" 
          type="email" 
          required="true"
          value="example@gmail.com">
      </ion-input>
  </ion-item>
```
- inputmode
  
  Cette propriété permet de spécifier au navigateur le type de clavier à afficher. Il peut etre de type : "none", "text", "tel", "url", "email", "numeric", "decimal" ou "search".
```
  <ion-item>
      <ion-input 
          label="Adresse Email" 
          type="email" 
          inputmode="email"
          required="true"
          value="example@gmail.com">
      </ion-input>
  </ion-item>
```
- disabled
  
  Cette propriété permet de spécifier si le champs de saisie doit etre désactivé ou pas. Il est de type booléen. Si true , l'utilisateur ne pourra pas saisir aucune information dans le champs de saisie.
```
  <ion-item>
      <ion-input 
          label="Information" 
          type="text" 
          disabled="true"    
          value="Vous ne pouvez rien saisir ici">
      </ion-input>
  </ion-item>
```
  Nous venons d'énumérer ci-dessus quelques propriétés les plus utilisées. On peut aussi ajouter à ces derniers les propriétés ci-après : autocapitalize, autocomplete, autocorrect, autofocus, clearInput, clearOnEdit color, size, shape, readonly, pattern, name, multiple, mode, minlength, min, enterkeyhint, labelPlacement, maxlength, max, legacy, fill, errorText, helperText, debounce que vous pouvez étudier ici.

Quelques évènements personnalisés du composant ion-input

Afin de réagir aux différentes interactions de l'utilisateur avec le composant ion-input, Ionic met à disposition plusieurs évènements dont ionChange, ionFocus, ionInput et ionBlur.
- ionChange
  
  L'événement ionChange est déclenché lorsque l'utilisateur modifie la valeur de l'entrée. Contrairement à l'événement ionInput, l'événement ionChange n'est déclenché que lorsque les modifications sont validées, et non lorsque l'utilisateur saisit.
```
  <ion-item>
      <ion-input 
          (ionChange)="setValue()"
          label="Adresse Email" 
          type="email" 
          inputmode="email"
          required="true"
          value="example@gmail.com">
      </ion-input>
  </ion-item>
```
- ionInput
  
  L'événement ionInput est déclenché chaque fois que l'utilisateur modifie la valeur de l'entrée. Contrairement à l'événement ionChange, l'événement ionInput est déclenché pour chaque modification de la valeur de l'entrée. Cela se produit généralement à chaque frappe de touche lorsque l'utilisateur tape. Pour les éléments qui acceptent la saisie de texte (type=text, type=tel, etc.), l'interface est InputEvent ; pour les autres, l'interface est Event. Si l'entrée est effacée lors de la modification, le type est null.
```
  <ion-item>
      <ion-input 
          (ionInput)="setValue()"
          label="Adresse Email" 
          type="email" 
          inputmode="email"
          required="true"
          value="example@gmail.com">
      </ion-input>
  </ion-item>
```
- ionFocus et ionBlur
  
  Ces événements sont déclenchés lorsque le champs de saisie perd (ionBlur) ou gagne (ionFocus) le focus.
```
  <ion-item>
      <ion-input 
          (ionInput)="setValue()"
          (ionFocus)="winFocus()"
          (ionBlur)="loseFocus()"
          label="Adresse Email" 
          type="email" 
          inputmode="email"
          required="true"
          value="example@gmail.com">
      </ion-input>
  </ion-item>
```
Quelques styles personnalisés du composant ion-input

Le composant ion-input est livré avec une variété de propriétés CSS que vous pouvez personnaliser pour adapter l'apparence de l'input à vos préférences en matière de design. Vous trouverez ci-dessous, quelques-unes des propriétés CSS personnalisées les plus couramment utilisées :
- --background : qui permet de spécifier la couleur de l'arrière-plan de l'input
- --border-color : qui permet de spécifier la couleur de la bordure en dessous de l'input lorsqu'on utilise les propriétés helperText, errorText ou counter
- --border-style : qui permet de spécifier le style de la bordure en dessous de l'input lorsqu'on utilise les propriétés helperText, errorText ou counter
- --color : qui permet de spécifier la couleur du texte de l'input
- --highlight-color-focused : qui permet de spécifier la couleur de la bordure inférieure de l'input lorsqu'il a le focus de l'utilisateur
- --highlight-color-invalid : qui permet de spécifier la couleur de la bordure inférieure de l'input lorsque la donnée entrée par l'utilisateur est invalide
- --highlight-color-valid : qui permet de spécifier la couleur de la bordure inférieure de l'input lorsque la donnée entrée par l'utilisateur est valide
- --placeholder-color : qui permet de spécifier la couleur du placeholder de l'input
- --padding-bottom : qui permet de spécifier la marge intérieur basse de l'input
- --padding-end : qui permet de spécifier la marge intérieur au bout de l'input
- --padding-start : qui permet de spécifier la marge intérieur au début de l'input
- --padding-top : qui permet de spécifier la marge intérieur haute de l'input
```
  ion-input {
      --background: #93e9be;
      --highlight-color-valid: #9ce0be;
      --highlight-color-invalid: #88f4be;
      --highlight-color-focused: #88f4be;

      --color: black;
      --placeholder-text: #93e9be

      --border-radius: 0;
      --border-color: #000;
      --border-style: solid;
      --border-width: 1px;

      --padding-top: 10px;
      --padding-bottom: 10px;
    }
```
  Ionic propose également d'autres propriétés CSS telles que --placeholder-opacity, --placeholder-font-weight, --placeholder-font-style, --border-radius que vous pouvez étudier ici

Lecture et écriture avec le composant ion-input

Selon le framework JavaScript utilisé, les méthodes de lecture et d'écriture sur un champ de saisie s'applique parfaitement au composant ion-input .

En prenant l'exemple avec le framework Angular, voici comment utiliser la directive ngModel :

  // app.module.ts

  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { IonicModule } from '@ionic/angular';
  import { MyApp } from './app.component';

  @NgModule({
    declarations: [MyApp],
    imports: [IonicModule.forRoot(), FormsModule],
    bootstrap: [MyApp],
  })
  export class MyAppModule {}

  <ion-item>
    <ion-label position="floating">Username</ion-label>
    <ion-input type="text" [(ngModel)]="username"></ion-input>
  </ion-item>

  import { Component } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss'],
  })
  export class AppComponent {
    username: string = ''; // Initialize the variable
  }

En résumé, le composant ion-input répond parfaitement au besoin lié à la saisie utilisateur dans les applications mobiles. Grâce à des fonctionnalités telles que les différents types d'entrée, la validation, la thématisation et l'intégration facile avec la lecture et l'écriture, les développeurs peuvent créer des formulaires transparents et conviviaux.

Pour plus d'informations :

👉Ion-input

Etude des composants Ionic: cas du composant "ion-input"

Qu'est ce que ion-input ?

Comment l'utiliser et le personnaliser ?

Qu'est ce que `ion-input` ?