Composant Bouton

Pour ajouter un composant de type bouton1 à votre application mobile, il suffit simplement de faire...attention, très grand moment ... :

<button ion-button>Mon bouton</button>

Tada ! Ce n'est pas plus compliqué que ça. Il s'agit en fait d'un élément html button avec un attribut ionic ion-button qui permettent simple de rajouter du style css.

On peut aussi customiser un peu ce bouton grâce à des directives, concept abordé au chapitre 8. Ajustons par exemple la couleur des différents boutons grâce à la directive "color":

<button ion-button color="light">Mon bouton clair</button>
<button ion-button>Mon bouton par défaut (primary)</button>
<button ion-button color="secondary">Mon bouton avec couleur secondaire</button>
<button ion-button color="danger">Mon bouton rouge</button>
<button ion-button color="dark">Mon bouton noir</button>

on peut également retirer le background pour n'afficher que la bordure dans la couleur définie grâce à la directive outline :

<ion-header>

  <ion-navbar color="duckcoin">
    <ion-title>Ma Page</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <button ion-button outline>Mon bouton par défaut (primary)</button>
  <button ion-button color="secondary" outline>Mon bouton avec couleur secondaire</button>
  <button ion-button color="danger" outline>Mon bouton rouge</button>
  <button ion-button color="dark" outline>Mon bouton noir</button>
</ion-content>

Ou encore retirer les bordures du boutons avec la directive clear :

<ion-header>

  <ion-navbar color="duckcoin">
    <ion-title>Ma Page</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <button ion-button clear>Mon bouton par défaut (primary)</button>
  <button ion-button color="secondary" clear>Mon bouton avec couleur secondaire</button>
  <button ion-button color="danger" clear>Mon bouton rouge</button>
  <button ion-button color="dark" clear>Mon bouton noir</button>
</ion-content>

Documentation : https://ionicframework.com/docs/components/#buttons

1. Dans la version 4 de Ionic, le composant Button déclaré <button ion-button><button> deviendra <ion-button></ion-button>