Wiki source code of Bouton
Last modified by Achraf El Kari on 2023/07/18 16:11
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
62.1 | 1 | (% class="wikigeneratedid" id="HBoutonA0:" %) |
| |
97.1 | 2 | In the Button component, we find 4 tabs: |
| |
2.1 | 3 | |
| |
92.1 | 4 | (% class="wikigeneratedid" %) |
| |
98.1 | 5 | **Général Configuration**, **Styles**, **Actions** and **Permissions** [[image:bbh.png]] |
| |
92.1 | 6 | |
| |
74.1 | 7 | ((( |
| |
84.1 | 8 | ((( |
| 9 | == __1-Général Configuration__ : == | ||
| |
74.1 | 10 | ))) |
| |
2.1 | 11 | |
| |
97.1 | 12 | * There are two types of buttons |
| |
75.1 | 13 | |
| 14 | |||
| |
59.1 | 15 | ))) |
| |
2.1 | 16 | |
| |
90.1 | 17 | [[image:aa.png||style="float:left"]] |
| |
72.2 | 18 | |
| |
90.1 | 19 | |
| 20 | |||
| |
67.1 | 21 | (% style="margin-left:auto; margin-right:auto; width:500px" %) |
| |
84.1 | 22 | |(% style="height:80px; text-align:center; width:151px" %)((( |
| |
93.1 | 23 | ====== **Buton Type** ====== |
| |
84.1 | 24 | )))|(% style="text-align:center; width:347px" %)((( |
| |
78.1 | 25 | ====== **Description** ====== |
| 26 | ))) | ||
| |
97.1 | 27 | |(% style="height:80px; width:151px" %)** TextWithIcon Button** :|(% style="width:347px" %)This type allows us to choose an icon and write a title for the button |
| 28 | |(% style="height:80px; width:151px" %)**Icon Button :**|(% style="width:347px" %)It displays the icon that the user chooses | ||
| |
77.1 | 29 | |(% style="height:80px; width:151px" %) |(% style="width:347px" %) |
| |
65.2 | 30 | |
| |
84.1 | 31 | ((( |
| 32 | == __2-Styles __: == | ||
| |
65.2 | 33 | |
| |
97.1 | 34 | We have two parts: **Container** and **Content** [[image:bb.png]] |
| |
84.1 | 35 | ))) |
| |
2.1 | 36 | |
| |
67.1 | 37 | |
| |
84.1 | 38 | * ((( |
| 39 | ===== **Container :** ===== | ||
| 40 | ))) | ||
| |
67.1 | 41 | |
| |
86.1 | 42 | [[image:Sans titre.png||alt="Sans titreX.png" height="416" style="float:left" width="404"]] |
| |
67.1 | 43 | |
| |
84.1 | 44 | (% style="margin-left:auto; margin-right:auto; width:500px" %) |
| |
86.1 | 45 | |=(% style="text-align: center; width: 162px;" %)((( |
| 46 | ====== **Container element** ====== | ||
| 47 | )))|=(% style="text-align: center; width: 336px;" %)((( | ||
| 48 | ====== **Description** ====== | ||
| 49 | ))) | ||
| |
97.1 | 50 | |(% style="width:162px" %)**Shadow: **|(% style="width:336px" %)To add a shadow to the button |
| 51 | |(% style="width:162px" %)**Background Color:**|(% style="width:336px" %)To change the background color of the button | ||
| 52 | |(% style="width:162px" %)**Border Side** :|(% style="width:336px" %)To define where you want to position the button border (all, left, right, top, bottom) | ||
| 53 | |(% style="width:162px" %)**Border**:|(% style="width:336px" %)To change the color and thickness of the button border | ||
| |
86.1 | 54 | |(% style="width:162px" %)**Border Type**: |(% style="width:336px" %)((( |
| |
97.1 | 55 | (% id="cke_bm_1441S" style="display:none" %) (%%)To change the type of button border (dotted, solid, ...) [[image:1689346916293-889.png]] |
| |
86.1 | 56 | ))) |
| 57 | |(% style="width:162px" %)**Border Radius (px)**:|(% style="width:336px" %)((( | ||
| |
97.1 | 58 | (% id="cke_bm_1499S" style="display:none" %) (%%)To define the radius of the button's rounded corners. [[image:1689347021554-136.png]] [[image:1689347030547-277.png]] |
| |
86.1 | 59 | ))) |
| 60 | |(% style="width:162px" %) |(% style="width:336px" %) | ||
| |
67.1 | 61 | |
| |
95.1 | 62 | * ((( |
| 63 | ====== **Content :** ====== | ||
| 64 | ))) | ||
| |
67.1 | 65 | |
| |
95.1 | 66 | **~ ** |
| |
67.1 | 67 | |
| |
95.1 | 68 | [[image:fg.png||style="float:left"]] |
| |
2.1 | 69 | |
| |
95.1 | 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" %)((( | ||
| |
97.1 | 77 | (% id="cke_bm_6755S" style="display:none" %) (%%)To define the spacing between the icon and the text in the button [[image:1689347292615-297.png||height="44" width="95"]] |
| |
95.1 | 78 | ))) |
| |
97.1 | 79 | |(% style="width:162px" %)**Icon Position:**|(% style="width:336px" %)To choose the position of the icon (left, right, top, bottom) |
| 80 | |(% style="width:162px" %)** Align: **|(% style="width:336px" %)To align the icon with the text (left, center, right) | ||
| |
95.1 | 81 | |(% style="width:162px" %)**Size (px):**|(% style="width:336px" %)((( |
| |
97.1 | 82 | (% id="cke_bm_7131S" style="display:none" %) (%%)To define the size in pixels of the icon and text in the button [[image:1689347476383-409.png||height="36" width="76"]](% id="cke_bm_7131E" style="display:none" %) |
| |
95.1 | 83 | ))) |
| 84 | |(% style="width:162px" %)**Color:** |(% style="width:336px" %)((( | ||
| |
97.1 | 85 | (% id="cke_bm_7260S" style="display:none" %) (%%)To change the color of the icon and text in the button [[image:1689347644263-160.png||height="36" width="86"]] |
| |
95.1 | 86 | ))) |
| 87 | |(% style="width:162px" %)** Bold: ** |(% style="width:336px" %)((( | ||
| |
97.1 | 88 | (% id="cke_bm_1499S" style="display:none" %) (%%)To make the text bold in the button |
| |
95.1 | 89 | ))) |
| 90 | |(% style="width:162px" %) |(% style="width:336px" %) | ||
| |
59.1 | 91 | |
| |
96.1 | 92 |