# Button (Bouton)

Un bouton est juste quelque chose sur lequel vous pouvez cliquer pour effectuer une action. Cette action peut aller de la navigation vers un autre écran, à l'enregistrement d'informations dans une base de données, ou à la diffusion d'un son.

![](https://lh4.googleusercontent.com/IvA0mRVV2yRI4N6HwzArmFURm20PWm_S6aYMjVKxtlBJjS1mN6KhSeLtCWlovQ7R7rye6Ymjbr-DXzWb36E8aUTyTbxGul38Ahjy90o9m4efAiPXKs0ZGU-exydjIKzowZsjg-bo)

Les blocs ci-dessus indiquent que lorsque l'on clique sur le bouton 1, on passe à l'écran 2.

## Vue d'ensemble <a href="#overview" id="overview"></a>

* [Vidéo Tutorielle](#video-tutorial)
* [Style du bouton](#style-the-button)
* [Modifier la taille du bouton](#edit-the-button-size)
* [Ajouter un espacement](#add-spacing)
* [Programmation du bouton](#programming-the-button)

![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6D3tN_qKmJHKmZao%2Fbutton-%E2%9C%95-fig-1.png?alt=media)

## Vidéo Tutorielle <a href="#video-tutorial" id="video-tutorial"></a>

{% embed url="<https://youtu.be/PisrJ5kxS50>" %}

## Style du Bouton <a href="#style-the-button" id="style-the-button"></a>

Vous disposez de nombreuses options pour donner du style à votre bouton, comme par exemple changer la couleur de fond ou la couleur du texte. Voici les différentes options de personnalisation :

* **Text:** Texte qui apparaît sur le bouton
* **Text Color:** Couleur du texte qui apparaît sur le bouton
* **Background Color:** Définit la couleur de fond du bouton
* **Font Size:** Taille du texte qui apparaît sur le bouton
* **Background Picture:** Téléchargez une image qui apparaît sur le bouton.
* **Background Picture Resize Mode**
  * **Cover:** Remplit l'ensemble du bouton sans modifier le ratio hauteur et largeur de l'image
  * **Contain:** L'image entière sera réduite pour tenir à l'intérieur du bouton, sans modifier le rapport entre la hauteur et la largeur de l'image
  * **Stretch:** La hauteur de l'image change pour remplir le bouton dans le sens de la longueur
  * **Repeat:** Répétez l'image pour couvrir le bouton. Le rapport entre la hauteur et la largeur de l'image ne changera pas
  * **Center:** Positionne l'image au milieu du bouton
* **Visible:** Pour voir le bouton dans votre application, réglez le commutateur sur "True"
* **Border**
  * **Width:** Indiquez la largeur que vous souhaitez donner à la bordure du bouton
  * **Color:** Choisissez une couleur pour la bordure du bouton
  * **Style:** Choisissez si vous souhaitez que la bordure soit en pointillés, en tirets ou en traits pleins
  * **Radius:** Indiquez le contour que vous souhaitez pour les bords de la bordure du bouton
* **Font Bold:** Pour que le texte du bouton soit en gras, mettez le commutateur sur "True".
* **Font Italic:** Pour que le texte du bouton soit en italique, réglez le commutateur sur "True"
* **Raised:** Pour jeter une ombre sur le bouton, réglez l'interrupteur sur "True"
* **Disabled:** Pour éviter que le bouton n'exécute une option lorsqu'on clique dessus, réglez l'interrupteur sur "True"

## Modifier la taille du bouton <a href="#edit-the-button-size" id="edit-the-button-size"></a>

Vous pouvez définir la hauteur du bouton en utilisant la propriété "Height" et la largeur du bouton en utilisant la propriété "Width".

**Height**

* **Fill container -** Le bouton remplit tout l'écran verticalement
* **Fit contents -** La hauteur du bouton change en fonction de la taille du contenu qu'il contient
* **Relative size -** Le bouton remplit le pourcentage spécifié de l'écran
* **Absolute size -** Dimensionne le bouton à un nombre de pixels déterminé

**Width**

* **Fill container -** Le bouton remplit tout l'écran horizontalement
* **Fit contents -** La largeur du bouton change en fonction de la taille du contenu qu'il contient
* **Relative size -** Le bouton remplit le pourcentage spécifié de l'écran
* **Absolute -** Dimensionne le bouton à un nombre de pixels déterminé

## Ajouter un espacement <a href="#add-spacing" id="add-spacing"></a>

Vous modifiez l'espacement et le positionnement du bouton avec les propriétés Margin (Marge) et Padding (Remplissage)&#x20;

**Margin**

* Vous pouvez spécifier l'espace que vous souhaitez entre les bords du bouton et l'écran en utilisant des valeurs en pixels ou en pourcentage.

**Padding**

* Vous pouvez spécifier l'espace que vous souhaitez entre la bordure et le contenu du bouton en utilisant des valeurs en pixels ou en pourcentage.

## Programmation du bouton <a href="#programming-the-button" id="programming-the-button"></a>

![Les blocs ci-dessus indiquent que lorsque l'on clique sur le bouton 1, un son est émis.](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6C8KjG1iolfDCYs8%2Fbutton-%E2%9C%95-fig-2.png?alt=media)

Vous pouvez utiliser les propriétés suivantes pour choisir le moment où un événement se produira :

* **Click:** Effectue une action lorsque l'utilisateur appuie sur le bouton
* **Long Click:** Effectue une action lorsque l'utilisateur maintient le bouton enfoncé
* **Touch Up:** Effectue une action après que l'utilisateur ait relâché le bouton
* **Touch Down:** Effectue une action après que l'utilisateur ait touché doucement le bouton