Éléments graphiques

Ionic propose un certain nombre d’éléments graphiques simplifiant le développement d’interfaces mobiles.

1. Boutons

Ionic propose un certain nombre de boutons. Les boutons permettent d’effectuer plusieurs types d’actions. Ionic propose plusieurs options permettant de personnaliser les boutons.

Pour créer un bouton simple dans un template, il faut utiliser l’attribut ion-button sur une balise <button>. Par exemple, le bouton suivant est un bouton standard :


<button ion-button>Texte du bouton</button>
 

Il est possible d’attribuer une couleur au bouton en utilisant la propriété color et en lui attribuant la valeur souhaitée. Par défaut, il est préférable d’utiliser une couleur du thème pour pouvoir la modifier facilement. Exemple d’un bouton avec une couleur personnalisée :


<button ion-button color="secondary">Couleur 
personnalisée</button>
 

Il est également possible de spécifier des options à un bouton :

  • full : le bouton occupe toute la largeur de l’écran.

  • outline : les couleurs de fond et de police sont inversées.

  • block : le bouton s’affiche en tant que bloc HTML.

  • round : le bouton est arrondi.

  • small : le bouton est plus petit.

  • large : le bouton est plus grand.

Cela donne les exemples suivants :


<button ion-button full>Largeur maximum</button> 
<button ion-button...
Pour consulter la suite, découvrez le livre suivant :
couv_EPMETION.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les templates
Suivant
Les alertes