Wiki source code of TextBox
Version 77.1 by Achraf El Kari on 2023/07/18 15:39
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | Dans le composant TextBox on trouve 6 onglets : [[image:jzuo.png]] | ||
| 2 | |||
| 3 | |||
| 4 | ((( | ||
| 5 | == *Général Config : == | ||
| 6 | ))) | ||
| 7 | |||
| 8 | on trouve 4 sections | ||
| 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: blue;" %)((( | ||
| 17 | ====== **Type Element** ====== | ||
| 18 | )))|=(% style="text-align: center; width: 466px; background-color: blue;" %)((( | ||
| 19 | ====== **Description** ====== | ||
| 20 | ))) | ||
| 21 | |(% style="width:88px" %)**text** :|(% style="width:466px" %)Il s'agit du type de base pour saisir du texte. Les utilisateurs peuvent entrer des caractères alphanumériques, des symboles et des espaces dans ce type de textbox. | ||
| 22 | |(% style="width:88px" %)**textArea :**|(% style="width:466px" %)Il permet aux utilisateurs de saisir un texte plus long. Elle est souvent utilisée pour les commentaires, les descriptions | ||
| 23 | |(% style="width:88px" %)**number :**|(% style="width:466px" %)Ce type de textbox est spécifiquement conçu pour saisir des valeurs numériques | ||
| 24 | |(% style="width:88px" %)**password :**|(% style="width:466px" %)Ce type de textbox masque les caractères saisis par l'utilisateur, Il est utilisé pour les champs de mot de passe | ||
| 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 | |=((( | ||
| 33 | ====== **Element** ====== | ||
| 34 | )))|=((( | ||
| 35 | ====== **Description** ====== | ||
| 36 | ))) | ||
| 37 | |**Data: Key**|On trouve le Key pour définir le data type lié à ce champs textbox, Il est également possible de saisir manuellement une clé. | ||
| 38 | |(% colspan="2" %)((( | ||
| 39 | ====== ** Label:** ====== | ||
| 40 | |||
| 41 | Se compose par 2 éléments : Label et Tooltip | ||
| 42 | ))) | ||
| 43 | |**//Label~://**|Il est utilisé pour fournir une description ou une indication du type d'information attendu dans la textbox | ||
| 44 | |**//Tooltip~://**| Un tooltip est un petit élément qui fournit des informations supplémentaires ou des indications contextuelles lorsqu'un utilisateur survole sur un élément spécifique. [[image:1689593502002-887.png||height="60" width="145"]] | ||
| 45 | |(% colspan="2" %)((( | ||
| 46 | ====== **Input:** ====== | ||
| 47 | |||
| 48 | se compose par 3 éléments | ||
| 49 | ))) | ||
| 50 | |**//Placeholder~://**|Il s'agit d'un court texte informatif qui apparaît à l'intérieur de la zone de saisie lorsque celle-ci est vide, pour indiquer à l'utilisateur le type d'information attendue. | ||
| 51 | |**//Default Value ~://**|Est une fonctionnalité qui permet de pré-remplir un champ de saisie avec une valeur initiale | ||
| 52 | |**//Disabled ~://**|Lorsque le champs de texte est désactivé, il n'est pas cliquable, sélectionnable ou modifiable par l'utilisateur. Cela signifie que l'utilisateur ne peut pas saisir ou soumettre de données via cet élémen | ||
| 53 | |||
| 54 | == *Styles Config : == | ||
| 55 | |||
| 56 | On trouve 3 parties : [[image:IKZIZO.png]] | ||
| 57 | |||
| 58 | |||
| 59 | === __Container :__ === | ||
| 60 | |||
| 61 | [[image:AAE.png||style="float:left"]] | ||
| 62 | |||
| 63 | ===== ===== | ||
| 64 | |||
| 65 | (% style="margin-left:auto; width:500px" %) | ||
| 66 | |=(% style="text-align: center;" %)((( | ||
| 67 | |||
| 68 | |||
| 69 | ((( | ||
| 70 | ====== **Container Element** ====== | ||
| 71 | ))) | ||
| 72 | )))|=(% style="text-align: center;" %)((( | ||
| 73 | ====== **Description** ====== | ||
| 74 | ))) | ||
| 75 | |**Background Color** :|permet de définir la couleur de fond du textbox | ||
| 76 | |**Border** :|Changer la couleur et le volume de la bordure de textbox | ||
| 77 | |**Border Hover Color** :|Il est utilisé pour définir la couleur de la bordure ,lorsqu'il s'agit d'une interaction de survol par l’utilisateur. | ||
| 78 | |**Border Focus Color** :|Il est utilisé pour définir la couleur de l'encadrement qui s'affiche autour du textbox lorsqu'il est en état de focus (lorsqu'il est sélectionné à l'aide du clavier ou du curseur). Cela est généralement utilisé pour indiquer visuellement à l'utilisateur qu'un élément est en cours de sélection. | ||
| 79 | |**Border Radius :**|Définir le rayon des coins arrondis du textbox, Cette propriété permet de donner à l’élément une apparence plus douce et esthétique en arrondissant ses angles. | ||
| 80 | |**Border Side** :|Définir où vous voulez positionner la bordure du textbox (all, left, right, top, bottom) | ||
| 81 | |**Min Width **:|Il est utilisé pour définir la largeur minimale que le textbox, doit avoir, même si son contenu est plus étroit. | ||
| 82 | |**Max Width : **|Il est utilisé pour définir la largeur maximale que le textbox, doit avoir, même si son contenu est plus lar | ||
| 83 | |||
| 84 | === __Label:__ === | ||
| 85 | |||
| 86 | |||
| 87 | [[image:JS.png||style="float:left"]] | ||
| 88 | |||
| 89 | (% style="margin-left:auto; margin-right:auto; width:500px" %) | ||
| 90 | |=(% style="text-align: center;" %)((( | ||
| 91 | ====== **Label Element** ====== | ||
| 92 | )))|=(% style="text-align: center;" %)((( | ||
| 93 | ====== **Description** ====== | ||
| 94 | ))) | ||
| 95 | |**Text Color :**|Changer la couleur de label | ||
| 96 | |**Focus Color:**|((( | ||
| 97 | (% id="cke_bm_537S" style="display:none" %) (%%)Définir la couleur de label** **lorsqu'il est sélectionné à l'aide du clavier ou du curseur [[image:1689603172401-133.png||height="43" width="128"]] | ||
| 98 | ))) | ||
| 99 | |**Font Size :**|Définir la taille de la police du label | ||
| 100 | | | | ||
| 101 | |||
| 102 | === === | ||
| 103 | |||
| 104 | === __Value:__ === | ||
| 105 | |||
| 106 | |||
| 107 | |||
| 108 | [[image:opo.png||style="float:left"]] | ||
| 109 | |||
| 110 | (% style="margin-left:auto; width:500px" %) | ||
| 111 | |=(% style="text-align: center;" %)((( | ||
| 112 | ====== **Value Element** ====== | ||
| 113 | )))|=(% style="text-align: center;" %)((( | ||
| 114 | ====== **Description** ====== | ||
| 115 | ))) | ||
| 116 | |**Text Color:**|Elle permet de spécifier la couleur du texte de la valeur saisie dans le textbox | ||
| 117 | |**Font Size:**|Définir la taille de la police du texte saisie | ||
| 118 | |**Text Align:**|Elle permet de spécifier si le texte doit être aligné à gauche, à droite ou centré. | ||
| 119 | | | | ||
| 120 | |||
| 121 | |||
| 122 | |||
| 123 | == Actions & Permissions: == | ||
| 124 | |||
| 125 | Le même principe de permissions du bouton s'applique également aux textbox __**//[[voir içi>>doc:iXPath V3.PortalV3.Forms.Bouton.Actions.WebHome||target="_blank"]].//**__ Cependant, en ce qui concerne les actions, il existe trois triggers qui ne sont pas inclus dans le bouton. | ||
| 126 | |||
| 127 | |||
| 128 | [[image:zatz.png||style="float:left"]] | ||
| 129 | |||
| 130 | |||
| 131 | |||
| 132 | (% style="margin-left:auto; margin-right:auto; width:500px" %) | ||
| 133 | |=(% style="text-align: center;" %)((( | ||
| 134 | ====== **Actions** ====== | ||
| 135 | )))|=(% style="text-align: center;" %)((( | ||
| 136 | ====== **Description** ====== | ||
| 137 | ))) | ||
| 138 | |**onLoad:**|L'action** **se déclenche lorsque la page web a été entièrement chargé. | ||
| 139 | |**onChange:**|L'action se déclenche lorsque la valeur d'une textbox est modifiée par l'utilisateur. | ||
| 140 | |**onBlur:**|L'action se déclenche lorsque la focus de la saisie quitte la textbox, c'est-à-dire lorsque l'utilisateur a fini de saisir du texte dans la textbox et déplace le focus vers un autre élément de la page. | ||
| 141 | | | | ||
| 142 | |||
| 143 |