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 omniprésents est le composant ion-button en tant qu'élément essentiel pour déclencher des actions, 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-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