Wiki source code of Bouton
Version 82.1 by Achraf El Kari on 2023/07/17 19:04
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | (% class="wikigeneratedid" id="HBoutonA0:" %) | ||
| 2 | Dans le composant Bouton on trouve 4 onglets : **Général Configuration**, **Styles**, **Actions** et **Permissions** | ||
| 3 | |||
| 4 | ((( | ||
| 5 | 1. ((( | ||
| 6 | == __Général Configuration__ : == | ||
| 7 | ))) | ||
| 8 | |||
| 9 | * on trouve deux types de boutons | ||
| 10 | |||
| 11 | |||
| 12 | ))) | ||
| 13 | |||
| 14 | [[image:Sans titre.png||height="229" style="float:left" width="318"]] | ||
| 15 | |||
| 16 | (% style="margin-left:auto; margin-right:auto; width:500px" %) | ||
| 17 | |(% style="height:80px; width:151px" %)((( | ||
| 18 | ====== **Type** ====== | ||
| 19 | )))|(% style="width:347px" %)((( | ||
| 20 | ====== **Description** ====== | ||
| 21 | ))) | ||
| 22 | |(% style="height:80px; width:151px" %)** TextWithIcon Button** :|(% style="width:347px" %)Ce type nous donne la possibilité de choisir une icone et écrire un titre pour le bouton | ||
| 23 | |(% style="height:80px; width:151px" %)**Icon Button :**|(% style="width:347px" %)il affiche l’icone que l’utilisateur choisit | ||
| 24 | |(% style="height:80px; width:151px" %) |(% style="width:347px" %) | ||
| 25 | |||
| 26 | ===== ** ** ===== | ||
| 27 | |||
| 28 | ===== ===== | ||
| 29 | |||
| 30 | ===== ===== | ||
| 31 | |||
| 32 | ===== ===== | ||
| 33 | |||
| 34 | ===== ===== | ||
| 35 | |||
| 36 | ===== ===== | ||
| 37 | |||
| 38 | ===== ===== | ||
| 39 | |||
| 40 | ===== ===== | ||
| 41 | |||
| 42 | ===== ===== | ||
| 43 | |||
| 44 | ===== ===== | ||
| 45 | |||
| 46 | ===== ===== | ||
| 47 | |||
| 48 | ===== ** Icon Button : ** ===== | ||
| 49 | |||
| 50 | **~ **il affiche l’icone que l’utilisateur choisit[[image:Documentation iXPath v3_html_d0bf37e3978a7406.png||height="31" width="92"]] | ||
| 51 | |||
| 52 | |||
| 53 | [[image:Documentation iXPath v3_html_603ddba00a374798.png||height="291" width="299"]] | ||
| 54 | |||
| 55 | |||
| 56 | * ((( | ||
| 57 | === __Styles __: === | ||
| 58 | |||
| 59 | * On trouve deux parties **Container **et** Content** | ||
| 60 | ))) | ||
| 61 | |||
| 62 | [[image:Documentation iXPath v3_html_280ebcbbab6c6b63.png||height="206" width="292"]] | ||
| 63 | |||
| 64 | |||
| 65 | ===== ** Container :** ===== | ||
| 66 | |||
| 67 | |||
| 68 | [[image:1689345643357-974.png||height="446" width="398"]] | ||
| 69 | |||
| 70 | |||
| 71 | (% class="box infomessage" %) | ||
| 72 | ((( | ||
| 73 | **Shadow: ** Ajouter un ombre au bouton | ||
| 74 | ))) | ||
| 75 | |||
| 76 | (% class="box infomessage" %) | ||
| 77 | ((( | ||
| 78 | **Background Color**: Changer la couleur du background de bouton | ||
| 79 | ))) | ||
| 80 | |||
| 81 | (% class="box infomessage" %) | ||
| 82 | ((( | ||
| 83 | **Border Side** : Définir où vous voulez positionner la bordure du bouton(all, left, right, top, bottom) | ||
| 84 | ))) | ||
| 85 | |||
| 86 | (% class="box infomessage" %) | ||
| 87 | ((( | ||
| 88 | **Border**: Changer la couleur et le volume de la bordure de bouton | ||
| 89 | ))) | ||
| 90 | |||
| 91 | (% class="box infomessage" %) | ||
| 92 | ((( | ||
| 93 | **Border Type**: Changer le type de la bordure (pointé, solide..) [[image:1689346916293-889.png]] | ||
| 94 | ))) | ||
| 95 | |||
| 96 | (% class="box infomessage" %) | ||
| 97 | ((( | ||
| 98 | **Border Radius (px)**: Définir le rayon des coins arrondis du Bouton. [[image:1689347021554-136.png]] [[image:1689347030547-277.png]] | ||
| 99 | ))) | ||
| 100 | |||
| 101 | |||
| 102 | ===== **Content :** ===== | ||
| 103 | |||
| 104 | **~ **[[image:1689347197469-277.png||height="549" width="408"]] | ||
| 105 | |||
| 106 | |||
| 107 | (% class="box infomessage" %) | ||
| 108 | ((( | ||
| 109 | **Spacing:** Définir l’espace entre l’icône et le texte dans le bouton [[image:1689347292615-297.png||height="44" width="95"]] | ||
| 110 | ))) | ||
| 111 | |||
| 112 | (% class="box infomessage" %) | ||
| 113 | ((( | ||
| 114 | **Icon Position:** Choisir la position de l’icône (left, right, top, bottom) | ||
| 115 | ))) | ||
| 116 | |||
| 117 | (% class="box infomessage" %) | ||
| 118 | ((( | ||
| 119 | **~ Align: ** Alignement de l’icône avec le texte( left, center, right) | ||
| 120 | ))) | ||
| 121 | |||
| 122 | (% class="box infomessage" %) | ||
| 123 | ((( | ||
| 124 | **~ Size (px): ** Définir la taille en pixel de l’icone et text du bouton [[image:1689347476383-409.png||height="36" width="76"]] | ||
| 125 | ))) | ||
| 126 | |||
| 127 | (% class="box infomessage" %) | ||
| 128 | ((( | ||
| 129 | **~ Color: ** Changer la couleur de l’icone et du texte de bouton [[image:1689347644263-160.png||height="36" width="86"]] | ||
| 130 | ))) | ||
| 131 | |||
| 132 | (% class="box infomessage" %) | ||
| 133 | ((( | ||
| 134 | **~ Bold: ** Changer le texte en gras | ||
| 135 | ))) | ||
| 136 | |||
| 137 | [[Voir Actions & Permissions>>doc:.Actions.WebHome]] |