Wiki source code of TextBox
Last modified by Achraf El Kari on 2023/07/18 18:58
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | In the TextBox component, we find 6 tabs: [[image:jzuo.png]] | ||
| 2 | |||
| 3 | |||
| 4 | ((( | ||
| 5 | == *General Config : == | ||
| 6 | ))) | ||
| 7 | |||
| 8 | In the General Config, we find 4 sections: **Type, Label, Data, Input.** | ||
| 9 | |||
| 10 | ===== Type : ===== | ||
| 11 | |||
| 12 | |||
| 13 | [[image:mplzi.png||height="257" style="float:left" width="409"]] | ||
| 14 | |||
| 15 | (% style="margin-left:auto; width:555.333px" %) | ||
| 16 | |=(% style="text-align: center; width: 88px; background-color: rgb(173, 216, 230);" %)((( | ||
| 17 | ====== **Type Element** ====== | ||
| 18 | )))|=(% style="text-align: center; width: 466px; background-color: rgb(173, 216, 230);" %)((( | ||
| 19 | ====== **Description** ====== | ||
| 20 | ))) | ||
| 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" %) | ||
| 26 | |||
| 27 | == Data, Label & Input: == | ||
| 28 | |||
| 29 | [[image:oz.png||style="float:left"]] | ||
| 30 | |||
| 31 | (% style="margin-left:auto; width:500px" %) | ||
| 32 | |=(% style="background-color: rgb(173, 216, 230); border-color: green;" %)((( | ||
| 33 | ====== **Element** ====== | ||
| 34 | )))|=(% style="background-color: rgb(173, 216, 230); text-align: center; vertical-align: middle; border-color: green;" %)((( | ||
| 35 | ====== **Description** ====== | ||
| 36 | ))) | ||
| 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" %)((( | ||
| 39 | ====== ** Label:** ====== | ||
| 40 | |||
| 41 | It consists of two elements: Label and Tooltip | ||
| 42 | ))) | ||
| 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" %)((( | ||
| 46 | ====== ** Input:** ====== | ||
| 47 | |||
| 48 | It consists of three elements | ||
| 49 | ))) | ||
| 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 |