Qu'est-ce-que ion-tabs ?

ion-tabs est ce composant du framework Ionic qui permet aux développeurs de créer des structures de navigation élégantes et intuitives, où les utilisateurs peuvent basculer sans effort entre les différentes sections ou fonctionnalités de l'application. Qu'il s'agisse d'une simple interface à onglets ou d'un système de navigation sophistiqué à plusieurs niveaux, ion-tabs offre la flexibilité et l'évolutivité nécessaires pour concrétiser votre vision.

Comment l'utiliser et le personnaliser ?

Le composant ion-tabs est subdivisé en plusieurs éléments que sont ion-tab, ion-tab-bar et ion-tab-button

• Création d'un composantion-tabs

  Présentons tout d'abord chacun des éléments qui composent ion-tabs

  • ion-tab

    Le composant ion-tab (onglet) est un composant enfant de ion-tabs. Chaque onglet peut contenir une pile de navigation de haut niveau pour une application ou une vue unique. Une application peut comporter de nombreux onglets, tous dotés d'une navigation indépendante.

  • ion-tab-bar

    Le composant ion-tab-bar (barre d'onglets) est un composant de l'interface utilisateur qui contient un ensemble de boutons d'onglets. Une barre d'onglets doit être fournie à l'intérieur des onglets pour communiquer avec chacun d'entre eux.

  • ion-tab-button

    Le composant ion-tab-button (bouton d'onglet) est un composant d'interface utilisateur placé à l'intérieur d'une barre d'onglets. Le bouton d'onglet peut spécifier la disposition de l'icône et de l'étiquette et se connecter à une vue d'onglet.

      <ion-tabs>
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="home">
            <ion-icon name="play-circle"></ion-icon>
            Listen Now
          </ion-tab-button>
          <ion-tab-button tab="radio">
            <ion-icon name="radio"></ion-icon>
            Radio
          </ion-tab-button>
          <ion-tab-button tab="library">
            <ion-icon name="library"></ion-icon>
            Library
          </ion-tab-button>
          <ion-tab-button tab="search">
            <ion-icon name="search"></ion-icon>
            Search
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
    

• Explorons ensemble les diverses propriétés, méthodes et évènements des composantsion-tabs,ion-tab,ion-tab-baretion-tab-button

  • ion-tabs

    Les onglets peuvent être utilisés avec le routeur Ionic pour mettre en œuvre une navigation basée sur les onglets. La barre d'onglets et l'onglet actif seront automatiquement résolus en fonction de l'url. C'est le modèle le plus courant pour la navigation par onglets. Les composants ion-tabs ne disposent pas de propriétés propres à eux.

    Cependant ils disposent des évènements ionTabsDidChange qui est émis lorsque la navigation a terminé la transition vers un nouveau composant et ionTabsWillChange qui est émis lorsque la navigation est sur le point de passer à un nouveau composant. Quant aux méthodes, on note les méthodes getSelected, getTab, select qui permettent respectivement d'obtenir l'onglet actuellement sélectionné, d'obtenir un onglet spécifique à partir de la valeur de sa propriété tab ou d'une référence d'élément et de sélectionner un onglet en fonction de la valeur de sa propriété tab ou d'une référence d'élément.

  • ion-tab

    Le composant ion-tab (onglet) est un composant enfant de ion-tabs (onglets). Chaque onglet peut contenir une pile de navigation de haut niveau pour une application ou une vue unique. Une application peut comporter de nombreux onglets, tous dotés d'une navigation indépendante. Ils disposent des propriétés component et tabs qui permettent respectivement de spécifier le composant à afficher à l'intérieur de l'onglet et l'identifiant d'onglet doit qui doit être fourni pour chaque composant ion-tab Ce dernier est utilisé en interne pour référencer l'onglet sélectionné ou par le routeur pour passer d'un onglet à l'autre. Ils ne possèdent pas d'évènement mais disposent d'une methode setActive qui permet de définir le composant actif de l'onglet

  • ion-tab-bar

    Le composant ion-tab-bar (barre d'onglets) est un composant de l'interface utilisateur qui contient un ensemble de boutons d'onglets. Une barre d'onglets doit être fournie à l'intérieur des onglets pour communiquer avec chacun d'entre eux. Comme propriétés personnalisées de ce composant on peut noter color, mode, selectTab, translucent qui permettent respectivement de définir la couleur à utiliser dans la palette de couleurs de votre application Ionic, de définir le type de plateforme (android ou ios) à utiliser, de définir l'onglet sélectionné et de spécifier si la barre d'onglet doit etre translucide ou non. Il ne dispose par contre pas d'év

  • ion-tab-button

    Le composant ion-tab-button (bouton d'onglet) est un composant d'interface utilisateur placé à l'intérieur d'une barre d'onglets. Le bouton d'onglet peut spécifier la disposition de l'icône et de l'étiquette et se connecter à une vue d'onglet. Ce composant dispose de quelques propriétés que sont : disabled, download, href, layout, mode, rel, selected, tab, target que vous pouvez explorer plus en détail ici

• Quelques styles personnalisés des composantsion-tab-baretion-tab-button

  Les composants ion-tabs et ion-tab ne disposent pas de styles personnalisés.

  Quant aux composants ion-tab-bar et ion-tab-button, ils sont livrés avec une variété de propriétés CSS que vous pouvez personnaliser pour adapter l'apparence du composant ion-tabs à 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 :

  • ion-tab-bar

    • --background : qui permet de spécifier la couleur de l'arrière-plan

    • --border : qui permet de spécifier la bordure

    • --color : qui permet de définir la couleur

  • ion-tab-button

    • --background : pour définir la couleur de l'arrière plan

    • --background-focused : pour définir la couleur de l'arrière plan lorsqu'il y a un focus

    • --background-focused-opacity : pour définir l'opacité de la couleur de l'arrière plan lorsqu'il y a un focus

    • --color : pour définir la couleur

    • --color-focused : pour définir la couleur lorsqu'il y a un focus

    • --color-selected : pour définir la couleur lorsque le composant est sélectionné

      Il dispose également d'autres propriétés CSS telles que --padding-bottom, --padding-end, --padding-start, --padding-top et --ripple-color que vous pouvez étudier ici

En résumé, le composant ion-tabs offre une solution puissante et flexible pour créer des interfaces à onglets dans les applications hybrides. Avec ses fonctionnalités riches, sa facilité d'utilisation et ses options de personnalisation étendues, il permet aux développeurs de concevoir des expériences de navigation fluides et intuitives qui répondent aux besoins de leurs utilisateurs.

Pour plus d'informations :

👉Ion-tabs

Qu'est-ce que ion-card ?

ion-card est un composant d'interface utilisateur conçu pour structurer et présenter l'information de manière claire et esthétique. Elle sert essentiellement de conteneur flexible pour l'affichage de divers contenus, allant du texte aux images, en passant par les listes et bien plus encore.

ion-card peut être un composant unique, mais elle est souvent constituée d'un en-tête, d'un titre, d'un sous-titre et d'un contenu. Pour tenir compte de cette structure, les cartes sont divisées en plusieurs composants : ion-card-header, ion-card-title, ion-card-subtitle et ion-card-content.

Réputée pour sa simplicité et son adaptabilité, le composant ion-card est devenu un choix incontournable pour les développeurs Ionic qui cherchent à créer des interfaces utilisateur visuellement attrayantes et fonctionnelles.

Comment l'utiliser et le personnaliser ?

Le composant ion-card est subdivisé en plusieurs éléments : l'en-tête de la carte, le titre de la carte, le sous-titre de la carte et le contenu de la carte.

• Création d'un composant ion-card basique

  Présentons les différents sous-sections du composant ion-card

  • ion-card-header

    L'en-tête de la carte est un composant enfant de la carte qui doit être placé avant le contenu de la carte. Il peut contenir un titre et un sous-titre de carte.

    Il prend en charge les propriétés ci-après : color, mode et translucent

  • ion-card-title et ion-card-subtitle

    Le titre et le sous-titre de la carte sont des composants enfants de la carte qui doit être placé à l'intérieur de l'en-tête de la carte. Ils prennent en charge les propriétés color et mode

  • ion-card-content

    Le contenu de la carte est un composant enfant de la carte qui ajoute un rembourrage autour de son contenu. Il est recommandé de placer le texte d'une carte à l'intérieur du contenu de la carte. Il prend uniquement la propriété mode en charge

      <ion-card>
        <ion-card-header>
          <ion-card-title>Card Title</ion-card-title>
          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
        </ion-card-header>
    
        <ion-card-content>
          Here's a small text description for the card content. Nothing more, nothing less.
        </ion-card-content>
      </ion-card>
    

• Création d'un composant ion-card avec une image

  Le composant ion-card peut contenir une image d'en-tete comme s'est illustré ci-dessous

    <ion-card>
      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
      <ion-card-header>
        <ion-card-title>Card Title</ion-card-title>
        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      </ion-card-header>
  
      <ion-card-content>
        Here's a small text description for the card content. Nothing more, nothing less.
      </ion-card-content>
    </ion-card>
  

• Création d'un composant ion-card avec des boutons

    <ion-card>
      <ion-card-header>
        <ion-card-title>Card Title</ion-card-title>
        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      </ion-card-header>
  
      <ion-card-content>
        Here's a small text description for the card content. Nothing more, nothing less.
      </ion-card-content>
  
      <ion-button fill="clear">Action 1</ion-button>
      <ion-button fill="clear">Action 2</ion-button>
    </ion-card>
  

• Création d'un composant ion-card avec des listes

    <ion-card>
      <ion-card-header>
        <ion-card-title>Card Title</ion-card-title>
        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <ion-list>
          <ion-item>
            <ion-thumbnail slot="start">
              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
            </ion-thumbnail>
            <ion-label>Item</ion-label>
          </ion-item>
  
          <ion-item>
            <ion-thumbnail slot="start">
              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
            </ion-thumbnail>
            <ion-label>Item</ion-label>
          </ion-item>
  
          <ion-item>
            <ion-thumbnail slot="start">
              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
            </ion-thumbnail>
            <ion-label>Item</ion-label>
          </ion-item>
  
          <ion-item lines="none">
            <ion-thumbnail slot="start">
              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
            </ion-thumbnail>
            <ion-label>Item</ion-label>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
  

• Présentation des diverses propriétés du composant ion-card

  Le composant ion-card prend en charge plusieurs propriétés qui nous permettrons d'apporter des caractéristiques spécifiques personnalisées à notre composant.

  • button

    Cette propriété est de type booléen et permettra de spécifier l'affichage ou non de boutons. Si true, une étiquette de bouton sera affichée et la carte pourra être touchée.

  • color

    Cette propriété est utilisée pour spécifier la couleur d'arrière-plan de la carte. Les couleurs par défaut à utiliser dans la palette de couleurs de votre application sont les suivantes : "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", et "dark"

  • disabled

    Cette propriété est de type booléen et permet désactiver ou pas le bouton. Si sa valeur est égale à true, l'utilisateur ne peut pas interagir avec la carte.

  • mode

    Cette propriété permet de déterminer le rendu de la carte suivant la plateforme à utiliser. Il peut être de type md ou ios.

    Pour rappel, le rendu des composants en général, diffère suivant la plateforme Android ou iOS. Par défaut, lors que le mode n'est pas précisé, Ionic s'en charge automatiquement afin de faire correspondre le rendu suivant la plateforme cible. Toutefois, nous pouvons aussi décider de fixer le mode d'affichage en agissant sur la propriété mode .

    Nous venons ci-dessus d'évoquer quelques propriétés les plus utilisées. On peut aussi ajouter à ces derniers : rel, target, type, download, href, routerDirection, routerAnimation .

• Personnalisation de styles du composant ion-card

  Le composant ion-card est livré avec une variété de propriétés CSS que vous pouvez personnaliser pour adapter l'apparence de la carte à vos préférences en matière de design. Vous trouverez ci-dessous, les 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 la carte

  • --color : qui permet de spécifier la couleur de la carte

En résumé, le composant ion-card est un élément essentiel dans l'arsenal d'un développeur Ionic. Il offre une solution élégante et efficace pour présenter des informations de manière structurée dans les applications mobiles hybrides. Grâce à sa flexibilité et à ses fonctionnalités riches, le composant ion-card contribue à améliorer l'esthétique et la convivialité des applications Ionic, offrant ainsi une expérience utilisateur optimale. Que ce soit pour afficher des articles, des produits, des profils d'utilisateurs, ou d'autres types de contenus, le ion-card demeure un choix incontournable pour les développeurs cherchant à créer des interfaces modernes et attractives.

Pour plus d'informations :

👉 Ion-card

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

Qu'est ce que ion-button ?

Le composant ion-button est essentiellement un bouton interactif. Il s'agit d'un élément clé pour déclencher des actions dans une application, que ce soit la navigation vers une autre page, la soumission d'un formulaire ou toute autre fonctionnalité interactive. Grâce à ses nombreuses fonctionnalités et options de personnalisation, ion-button offre une flexibilité maximale pour répondre aux besoins spécifiques de conception de votre application.

Comment l'utiliser et le personnaliser ?

Le composant ion-button est conçu pour être simple à utiliser, mais il offre également de puissantes fonctionnalités pour la personnalisation.

• Création d'un simple composant ion-button

<ion-button>Default</ion-button>

Ici, nous avons créé un simple bouton très basique, sans aucune personnalisation de styles, ni de propriétés.

A présent, allons un peu plus loin avec l'utilisation des propriétés qui permettent d'ajouter des particularités supplémentaires au composant.

• Présentation des diverses propriétés du composant ion-button

  • expand

    Cette propriété vous permet de spécifier la largeur du bouton. Par défaut, les boutons ont un affichage inline-block, mais en définissant cette propriété, le bouton devient un élément pleinement large avec un affichage block.

      <ion-button expand="block">Block</ion-button> 
      <ion-button expand="full">Full</ion-button>
    

    La différence entre expand="block" et expand="full" se situe au niveau du rendu. En effet, expand="block" renvoie un bouton légèrement arrondi aux extrémités tandis que expand="full" renvoie un bouton totalement rectangulaire.

  • shape

    Cette propriété vous permet de spécifier la forme du bouton. Par défaut, les boutons sont rectangulaires avec des extrémités arrondies, mais en définissant cette propriété sur "round", le bouton devient un élément arrondi.

      <ion-button shape="round">Round</ion-button>
    

  • fill

    Cette propriété détermine la couleur de l'arrière-plan et de la bordure du bouton. Par défaut, les boutons ont un arrière-plan uni (non transparent). Toutefois, si ces boutons se trouvent dans une barre d'outils, leur arrière-plan devient transparent.

      <ion-button fill="clear">Clear</ion-button>
      <ion-button fill="outline">Outline</ion-button>
      <ion-button fill="solid">Solid</ion-button>
    

  • size

    Cette propriété spécifie la taille du bouton. La définition de cette propriété modifie la hauteur du bouton ainsi que l'espacement qui se trouve à l'intérieur de ce dernier.

      <ion-button size="small">Small</ion-button>
      <ion-button size="default">Default</ion-button>
      <ion-button size="large">Large</ion-button>
    

  • color

    Cette propriété est utilisée pour spécifier la couleur d'arrière-plan, qui influence la couleur du texte du bouton. Les couleurs par défaut à utiliser dans la palette de couleurs de votre application sont les suivantes : "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", et "dark" .

      <ion-button color="primary">Primary</ion-button>
      <ion-button color="secondary">Secondary</ion-button>
      <ion-button color="tertiary">Tertiary</ion-button>
      <ion-button color="success">Success</ion-button>
      <ion-button color="warning">Warning</ion-button>
      <ion-button color="danger">Danger</ion-button>
      <ion-button color="light">Light</ion-button>
      <ion-button color="medium">Medium</ion-button>
      <ion-button color="dark">Dark</ion-button>
    

    Comme vous l'aurez remarqué, la propriété color dépend de la configuration que vous aurez eu à faire lors de la personnalisation du thème de votre projet.

  • disabled

    Cette propriété est de type booléen et permet désactiver ou pas le bouton. Si sa valeur est égale à true, l'utilisateur ne peut pas interagir avec le bouton.

      <ion-button disabled="true">Disabled</ion-button>
    

  • slot

    Cette propriété permet de définir l'affichage du composant ion-icon (composant permettant de définir une icône) lorsque sa value est égale à icon-only. Il permet également de définir l'ordre dans lequel l'icône sera affichée par rapport au texte écrit sur le bouton, c'est-à-dire soit au début du texte pour start, soit à la fin du texte pour end.

      <ion-button>
        <ion-icon slot="start" name="star"></ion-icon>
        Left Icon
      </ion-button>
    
      <ion-button>
        Right Icon
        <ion-icon slot="end" name="star"></ion-icon>
      </ion-button>
    
      <ion-button>
        <ion-icon slot="icon-only" name="star"></ion-icon>
      </ion-button>
    

  • mode

    Cette propriété permet de déterminer le rendu du bouton suivant la plateforme à utiliser. Il peut être de type md ou ios.

    Pour rappel, le rendu des composants en général, diffère suivant la plateforme Android ou iOS. Par défaut, lors que le mode n'est pas précisé, Ionic s'en charge automatiquement afin de faire correspondre le rendu suivant la plateforme cible. Toutefois, nous pouvons aussi décider de fixer le mode d'affichage en agissant sur la propriété mode .

      <ion-button mode="md">Android platform</ion-button>
      <ion-button mode="ios">Ios platform</ion-button>
    

    Nous venons ci-dessus d'évoquer quelques propriétés les plus utilisées. On peut aussi ajouter à ces derniers : strong, target, type, event, form, download, href, routerDirection, routerAnimation .

• Personnalisation de styles du composant ion-button

  Le composant ion-button de Ionic est livré avec une variété de propriétés CSS que vous pouvez personnaliser pour adapter l'apparence du bouton à 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 du bouton

  • --background-activated : qui permet de spécifier la couleur de l'arrière-plan du bouton lorque l'utilisateur effectue un clique

  • --background-hover : qui perment de spécifier la couleur de l'arrière-plan du bouton lorque l'utilisateur survole ce dernier

  • --border-color : qui permet de spécifier la couleur de la bordure du bouton

  • --border-radius : qui permet de spécifier les arrondis de la bordure du bouton

  • --border-style : qui permet de spécifier le style de la bordure du bouton

  • --color : qui permet de spécifier la couleur du texte du bouton

  • --color-activated : qui permet de spécifier la couleur du texte lorsque l'utilisateur effectue un clique

  • --color-hover : qui permet de spécifier la couleur du texte lorsque l'utilisateur effectue un survol

  • --opacity : qui permet de spécifier l'opacité du bouton

  • --padding-bottom : qui permet de spécifier la marge intérieur basse du bouton

  • --padding-end : qui permet de spécifier la marge intérieur au bout du bouton

  • --padding-start : qui permet de spécifier la marge intérieur au début du bouton

  • --padding-top : qui permet de spécifier la ùarge intérieur haute du bouton

      ion-button {
        --background: #93e9be;
        --background-hover: #9ce0be;
        --background-activated: #88f4be;
        --background-focused: #88f4be;
    
        --color: blue;
    
        --border-radius: 0;
        --border-color: #000;
        --border-style: solid;
        --border-width: 1px;
    
        --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
    
        --ripple-color: deeppink;
    
        --padding-top: 10px;
        --padding-bottom: 10px;
      }
    

Il existe d'autres propriétés CSS telles que --ripple-color, --transition, --box-shadow, --border-width, --background-activated-opacity, --background-focused-opacity dont je vous laisse le soin de décortiquer en détail.

• Interagir avec le composant ion-button à travers ces évènements personnalisés

  Pour gérer les interactions avec le composant ion-button , Ionic met a disposition les évènements que sont click, ionFocus et ionBlur.

  • click

    L'événement click est l'un des événements les plus couramment utilisés avec ion-button. Il est déclenché lorsque le bouton est cliqué, ce qui vous permet de définir une fonction ou une action à exécuter. Voyons ensemble le cas avec l'utilisation du framework Angular :

      <ion-button (click)="handleButtonClick()">
        Click me!
      </ion-button>
    

    Il est à noter que suivant le framework JavaScript utilisé pour gérer votre logique métier, l'évènement click doit correspondre à la syntaxe de votre framework.

  • ionFocus et ionBlur

    Ces événements sont déclenchés lorsque le bouton perd (ionBlur) ou gagne (ionFocus) le focus. Ils sont utiles pour mettre en œuvre des actions basées sur l'état du bouton.

      <ion-button (ionBlur)="handleBlur()" (ionFocus)="handleFocus()">
        Focus me!
      </ion-button>
    

En résumé, le composant ion-button est l'un des composants incontournables dans l'utilisation du framework Ionic. Grâce à ces fonctionnalités de personnalisation avancées, vous pouvez facilement adapter chaque bouton à vos besoins spécifiques.

Pour plus d'informations :

👉 Ion-button

Ionic, actuellement en version 7, est un framework d'interface utilisateur open-source qui permet de développer des applications mobiles multiplateformes en utilisant les technologies web HTML, CSS et JavaScript. Il offre également des intégrations avec des frameworks populaires comme Angular, React et Vue.

Quels sont les avantages liés à l'utilisation de Ionic ?

• Une seule base de code

Une des forces majeures d'Ionic réside dans sa capacité à créer des applications multiplateformes. Cela signifie que le code source d'une application Ionic peut être utilisé pour créer des applications pour iOS, Android et web, ce qui simplifie le processus de développement et de maintenance.

Ionic est conçu pour fonctionner sur tous les appareils et plateformes mobiles actuels. Avec des composants prêts à l'emploi, une typographie et un thème de base assez fluide (toutefois extensible) qui s'adapte à chaque plateforme, vous construirez avec style.

• Une bibliothèque de composants prêts à l'emploi

Ionic propose une bibliothèque complète de composants d'interface utilisateur prêts à l'emploi. Ces composants, tels que des boutons, des listes, des modèles, des onglets, etc., facilitent la création d'interfaces utilisateur cohérentes et attrayantes.

• Accès aux fonctionnalités natives

Ionic utilise des outils tels que Cordova ou Capacitor pour permettre aux applications Ionic d'accéder aux fonctionnalités natives des appareils mobiles. Cela inclut l'accès à la caméra, aux contacts, à la géolocalisation, et d'autres fonctionnalités matérielles.

• Déploiement multiplateformes (cross-platform)

Utilisant Cordova ou Capacitor, Ionic permet de déployer des applications fonctionnant sur plusieurs plateformes, telles que iOS natif, Android et le web en tant que Progressive Web App, le tout avec une seule base de code.

• Compatibilités avec les frameworks Web

Ionic est construit autour de l'écosystèmes des frameworks JavaScript. Cela signifie que les développeurs bénéficient des fonctionnalités de leur framework préféré (Angular, React, Vue, etc) pour le développement d'applications web, en plus des capacités spécifiques à Ionic pour les applications mobiles. Toutefois, il est à noter que les versions précédentes de Ionic étaient étroitement liées à Angular. La version 4.x du framework a été repensée pour fonctionner comme une bibliothèque de composants web autonome, avec des intégrations pour les autres frameworks JavaScript, comme React et Vue.

• Personnalisation et Thématisation

Ionic permet une personnalisation approfondie de l'apparence des applications. Les développeurs peuvent ajuster les styles prédéfinis, utiliser des thèmes personnalisés, et tirer parti de Sass pour une gestion plus avancée des styles.

• La CLI (Command Line Interface)

L'interface de ligne de commande (CLI) de Ionic est un outil qui permet d'échafauder rapidement des applications Ionic et qui fournit un certain nombre de commandes utiles aux développeurs Ionic. Outre l'installation et la mise à jour de Ionic, l'interface de ligne de commande comprend un serveur de développement intégré, des outils de construction et de débogage, et bien d'autres choses encore.

Pour installer la CLI d'Ionic :

npm install -g @ionic/cli

En résumé, Ionic est un framework puissant et polyvalent qui permet aux développeurs de créer des applications mobiles modernes, interactives et performantes en utilisant des technologies web standard. Il est particulièrement adapté pour les projets nécessitant une approche de développement multiplateforme.

Pour plus d'informations :

👉 Ionic