Wiki source code of Bouton
Version 96.1 by Achraf El Kari on 2023/07/17 19:31
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | (% class="wikigeneratedid" id="HBoutonA0:" %) | ||
| 2 | Dans le composant Bouton on trouve 4 onglets : | ||
| 3 | |||
| 4 | (% class="wikigeneratedid" %) | ||
| 5 | **Général Configuration**, **Styles**, **Actions** et **Permissions** [[image:bbh.png]] | ||
| 6 | |||
| 7 | ((( | ||
| 8 | ((( | ||
| 9 | == __1-Général Configuration__ : == | ||
| 10 | ))) | ||
| 11 | |||
| 12 | * on trouve deux types de boutons | ||
| 13 | |||
| 14 | |||
| 15 | ))) | ||
| 16 | |||
| 17 | [[image:aa.png||style="float:left"]] | ||
| 18 | |||
| 19 | |||
| 20 | |||
| 21 | (% style="margin-left:auto; margin-right:auto; width:500px" %) | ||
| 22 | |(% style="height:80px; text-align:center; width:151px" %)((( | ||
| 23 | ====== **Buton Type** ====== | ||
| 24 | )))|(% style="text-align:center; width:347px" %)((( | ||
| 25 | ====== **Description** ====== | ||
| 26 | ))) | ||
| 27 | |(% 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 | ||
| 28 | |(% style="height:80px; width:151px" %)**Icon Button :**|(% style="width:347px" %)il affiche l’icone que l’utilisateur choisit | ||
| 29 | |(% style="height:80px; width:151px" %) |(% style="width:347px" %) | ||
| 30 | |||
| 31 | ((( | ||
| 32 | == __2-Styles __: == | ||
| 33 | |||
| 34 | On trouve deux parties **Container **et** Content** [[image:bb.png]] | ||
| 35 | ))) | ||
| 36 | |||
| 37 | |||
| 38 | * ((( | ||
| 39 | ===== **Container :** ===== | ||
| 40 | ))) | ||
| 41 | |||
| 42 | [[image:Sans titre.png||alt="Sans titreX.png" height="416" style="float:left" width="404"]] | ||
| 43 | |||
| 44 | (% style="margin-left:auto; margin-right:auto; width:500px" %) | ||
| 45 | |=(% style="text-align: center; width: 162px;" %)((( | ||
| 46 | ====== **Container element** ====== | ||
| 47 | )))|=(% style="text-align: center; width: 336px;" %)((( | ||
| 48 | ====== **Description** ====== | ||
| 49 | ))) | ||
| 50 | |(% style="width:162px" %)**Shadow: **|(% style="width:336px" %)Ajouter un ombre au bouton | ||
| 51 | |(% style="width:162px" %)**Background Color:**|(% style="width:336px" %)Changer la couleur du background de bouton | ||
| 52 | |(% style="width:162px" %)**Border Side** :|(% style="width:336px" %)Définir où vous voulez positionner la bordure du bouton(all, left, right, top, bottom) | ||
| 53 | |(% style="width:162px" %)**Border**:|(% style="width:336px" %)Changer la couleur et le volume de la bordure de bouton | ||
| 54 | |(% style="width:162px" %)**Border Type**: |(% style="width:336px" %)((( | ||
| 55 | (% id="cke_bm_1441S" style="display:none" %) (%%)Changer le type de la bordure (pointé, solide..) [[image:1689346916293-889.png]] | ||
| 56 | ))) | ||
| 57 | |(% style="width:162px" %)**Border Radius (px)**:|(% style="width:336px" %)((( | ||
| 58 | (% id="cke_bm_1499S" style="display:none" %) (%%)Définir le rayon des coins arrondis du Bouton. [[image:1689347021554-136.png]] [[image:1689347030547-277.png]] | ||
| 59 | ))) | ||
| 60 | |(% style="width:162px" %) |(% style="width:336px" %) | ||
| 61 | |||
| 62 | * ((( | ||
| 63 | ====== **Content :** ====== | ||
| 64 | ))) | ||
| 65 | |||
| 66 | **~ ** | ||
| 67 | |||
| 68 | [[image:fg.png||style="float:left"]] | ||
| 69 | |||
| 70 | (% style="margin-left:auto; margin-right:auto; width:500px" %) | ||
| 71 | |=(% style="text-align: center; width: 162px;" %)((( | ||
| 72 | ====== **Content element** ====== | ||
| 73 | )))|=(% style="text-align: center; width: 336px;" %)((( | ||
| 74 | ====== **Description** ====== | ||
| 75 | ))) | ||
| 76 | |(% style="width:162px" %) **Spacing: **|(% style="width:336px" %)((( | ||
| 77 | (% id="cke_bm_6755S" style="display:none" %) (%%) Définir l’espace entre l’icône et le texte dans le bouton [[image:1689347292615-297.png||height="44" width="95"]] | ||
| 78 | ))) | ||
| 79 | |(% style="width:162px" %)**Icon Position:**|(% style="width:336px" %)Choisir la position de l’icône (left, right, top, bottom) | ||
| 80 | |(% style="width:162px" %)** Align: **|(% style="width:336px" %)Alignement de l’icône avec le texte( left, center, right) | ||
| 81 | |(% style="width:162px" %)**Size (px):**|(% style="width:336px" %)((( | ||
| 82 | (% id="cke_bm_7131S" style="display:none" %) (%%)Définir la taille en pixel de l’icone et text du bouton [[image:1689347476383-409.png||height="36" width="76"]](% id="cke_bm_7131E" style="display:none" %) | ||
| 83 | ))) | ||
| 84 | |(% style="width:162px" %)**Color:** |(% style="width:336px" %)((( | ||
| 85 | (% id="cke_bm_7260S" style="display:none" %) (%%)Changer la couleur de l’icone et du texte de bouton [[image:1689347644263-160.png||height="36" width="86"]] | ||
| 86 | ))) | ||
| 87 | |(% style="width:162px" %)** Bold: ** |(% style="width:336px" %)((( | ||
| 88 | (% id="cke_bm_1499S" style="display:none" %) (%%)Changer le texte en gras | ||
| 89 | ))) | ||
| 90 | |(% style="width:162px" %) |(% style="width:336px" %) | ||
| 91 | |||
| 92 |