Wiki source code of TextBox
Last modified by Achraf El Kari on 2023/07/18 18:58
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
86.1 | 1 | In the TextBox component, we find 6 tabs: [[image:jzuo.png]] |
| |
3.1 | 2 | |
| |
46.1 | 3 | |
| |
66.1 | 4 | ((( |
| |
85.1 | 5 | == *General Config : == |
| |
3.1 | 6 | ))) |
| 7 | |||
| |
85.1 | 8 | In the General Config, we find 4 sections: **Type, Label, Data, Input.** |
| |
3.1 | 9 | |
| |
18.1 | 10 | ===== Type : ===== |
| |
3.1 | 11 | |
| 12 | |||
| |
40.1 | 13 | [[image:mplzi.png||height="257" style="float:left" width="409"]] |
| |
25.1 | 14 | |
| |
26.1 | 15 | (% style="margin-left:auto; width:555.333px" %) |
| |
91.1 | 16 | |=(% style="text-align: center; width: 88px; background-color: rgb(173, 216, 230);" %)((( |
| |
18.1 | 17 | ====== **Type Element** ====== |
| |
91.1 | 18 | )))|=(% style="text-align: center; width: 466px; background-color: rgb(173, 216, 230);" %)((( |
| |
18.1 | 19 | ====== **Description** ====== |
| |
3.1 | 20 | ))) |
| |
92.1 | 21 | |(% style="width:88px" %)**text** :|(% style="width:466px" %)This is the basic type for entering text. Users can enter alphanumeric characters, symbols, and spaces in this type of textbox. |
| 22 | |(% style="width:88px" %)**textArea :**|(% style="width:466px" %)"It allows users to enter longer text. It is often used for comments, descriptions, and similar purposes. | ||
| 23 | |(% style="width:88px" %)**number :**|(% style="width:466px" %)This type of textbox is specifically designed for entering numerical values. | ||
| 24 | |(% style="width:88px" %)**password :**|(% style="width:466px" %)This type of textbox hides the characters entered by the user. It is used for password fields. | ||
| 25 | |(% style="width:88px" %) |(% style="width:466px" %) | ||
| |
3.1 | 26 | |
| |
53.1 | 27 | == Data, Label & Input: == |
| |
52.1 | 28 | |
| |
84.1 | 29 | [[image:oz.png||style="float:left"]] |
| |
52.1 | 30 | |
| 31 | (% style="margin-left:auto; width:500px" %) | ||
| |
91.1 | 32 | |=(% style="background-color: rgb(173, 216, 230); border-color: green;" %)((( |
| |
52.1 | 33 | ====== **Element** ====== |
| |
91.1 | 34 | )))|=(% style="background-color: rgb(173, 216, 230); text-align: center; vertical-align: middle; border-color: green;" %)((( |
| |
52.1 | 35 | ====== **Description** ====== |
| 36 | ))) | ||
| |
92.1 | 37 | |**Data: Key**|We have the 'Key' field to define the data type associated with this textbox field. It is also possible to manually enter a key. |
| 38 | |(% colspan="2" %)((( | ||
| |
52.1 | 39 | ====== ** Label:** ====== |
| 40 | |||
| |
85.1 | 41 | It consists of two elements: Label and Tooltip |
| |
52.1 | 42 | ))) |
| |
92.1 | 43 | |**//Label~://**|It is used to provide a description or indication of the type of information expected in the textbox |
| 44 | |**//Tooltip~://**| A tooltip is a small element that provides additional information or contextual hints when a user hovers over a specific element. [[image:1689593502002-887.png||height="60" width="145"]] | ||
| 45 | |(% colspan="2" %)((( | ||
| |
91.1 | 46 | ====== ** Input:** ====== |
| |
52.1 | 47 | |
| |
85.1 | 48 | It consists of three elements |
| |
52.1 | 49 | ))) |
| |
92.1 | 50 | |**//Placeholder~://**|It is a brief informative text that appears inside the input area when it is empty, to indicate to the user the type of information expected |
| 51 | |**//Default Value ~://**|It is a feature that allows pre-filling an input field with an initial value | ||
| 52 | |**//Disabled ~://**|When the text field is disabled, it is not clickable, selectable, or editable by the user. This means that the user cannot enter or submit data through this element |