Wiki source code of Style Config, Actions & Permissions
Last modified by Achraf El Kari on 2023/07/18 19:11
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | == == | ||
| 2 | |||
| 3 | In Styles Config, we have 3 parts: [[image:https://ixpath.app/xwiki/bin/download/iXPath%20V3/PortalV3/Forms/TextBox/WebHome/IKZIZO.png?rev=1.1||alt="IKZIZO.png"]] | ||
| 4 | |||
| 5 | === __Container :__ === | ||
| 6 | |||
| 7 | |||
| 8 | [[image:https://ixpath.app/xwiki/bin/download/iXPath%20V3/PortalV3/Forms/TextBox/WebHome/AAE.png?rev=1.2||alt="AAE.png" style="float:left"]] | ||
| 9 | |||
| 10 | ===== ===== | ||
| 11 | |||
| 12 | (% style="margin-left:auto; width:500px" %) | ||
| 13 | |=(% style="background-color: rgb(173, 216, 230);" %)((( | ||
| 14 | |||
| 15 | |||
| 16 | ====== **Container Element** ====== | ||
| 17 | )))|=(% style="text-align: center; vertical-align: middle; background-color: rgb(173, 216, 230);" %)((( | ||
| 18 | ====== **Description** ====== | ||
| 19 | ))) | ||
| 20 | |**Background Color** :|Allows you to set the background color of the textbox | ||
| 21 | |**Border** :|To change the color and thickness of the textbox border | ||
| 22 | |**Border Hover Color** :|It is used to define the border color when there is a user hover interaction | ||
| 23 | |**Border Focus Color** :|It is used to define the color of the outline that appears around the textbox when it is in focus state (when it is selected using the keyboard or cursor). This is typically used to visually indicate to the user that an element is being selected. | ||
| 24 | |**Border Radius :**|To define the radius of the textbox's rounded corners, this property allows giving the element a smoother and more aesthetic appearance by rounding its angles. | ||
| 25 | |**Border Side** :|To define where you want to position the border of the textbox (all, left, right, top, bottom) | ||
| 26 | |**Min Width **:|It is used to define the minimum width that the textbox should have, even if its content is narrower. | ||
| 27 | |**Max Width : **|It is used to define the maximum width that the textbox should have, even if its content is wider. | ||
| 28 | |||
| 29 | === __Label:__ === | ||
| 30 | |||
| 31 | [[image:https://ixpath.app/xwiki/bin/download/iXPath%20V3/PortalV3/Forms/TextBox/WebHome/JS.png?rev=1.1||alt="JS.png" style="float:left"]] | ||
| 32 | |||
| 33 | (% style="margin-left:auto; width:500px" %) | ||
| 34 | |=(% style="background-color: rgb(173, 216, 230);" %)((( | ||
| 35 | ====== **Label Element** ====== | ||
| 36 | )))|=(% style="background-color: rgb(173, 216, 230); text-align: center; vertical-align: middle;" %)((( | ||
| 37 | ====== **Description** ====== | ||
| 38 | ))) | ||
| 39 | |**Text Color :**|To change the color of the label | ||
| 40 | |**Focus Color:**|((( | ||
| 41 | To define the color of the label when it is selected using the keyboard or cursor [[image:https://ixpath.app/xwiki/bin/download/iXPath%20V3/PortalV3/Forms/TextBox/WebHome/1689603172401-133.png?width=128&height=43&rev=1.1||alt="1689603172401-133.png" height="43" width="128"]] | ||
| 42 | ))) | ||
| 43 | |**Font Size :**|To define the font size of the label | ||
| 44 | | | | ||
| 45 | |||
| 46 | === === | ||
| 47 | |||
| 48 | === __Value:__ === | ||
| 49 | |||
| 50 | [[image:iXPath V3.PortalV3.Forms.TextBox.WebHome@opo.png||style="float:left"]] | ||
| 51 | |||
| 52 | (% style="margin-left:auto; width:500px" %) | ||
| 53 | |=(% style="background-color: rgb(173, 216, 230);" %)((( | ||
| 54 | ====== **Value Element** ====== | ||
| 55 | )))|=(% style="background-color: rgb(173, 216, 230); text-align: center; vertical-align: middle;" %)((( | ||
| 56 | ====== **Description** ====== | ||
| 57 | ))) | ||
| 58 | |**Text Color:**|It allows specifying the text color of the entered value in the textbox. | ||
| 59 | |**Font Size:**|To define the font size of the entered text | ||
| 60 | |**Text Align:**|It allows specifying whether the text should be aligned to the left, right, or center. | ||
| 61 | | | | ||
| 62 | |||
| 63 | == == | ||
| 64 | |||
| 65 | == Actions & Permissions: == | ||
| 66 | |||
| 67 | The same principle of permissions for the button also applies to the textboxes //**[[For more information, click here>>doc:iXPath V3.PortalV3.Forms.Bouton.Actions.WebHome||target="_blank"]]**//. However, regarding actions, there are three triggers that are not included in the button. | ||
| 68 | |||
| 69 | [[image:zatz.png||style="float:left"]] | ||
| 70 | |||
| 71 | (% style="margin-left:auto; margin-right:auto; width:500px" %) | ||
| 72 | |=(% style="text-align: center; vertical-align: middle;" %)((( | ||
| 73 | ====== **Actions** ====== | ||
| 74 | )))|=(% style="text-align: center; vertical-align: middle;" %)((( | ||
| 75 | ====== **Description** ====== | ||
| 76 | ))) | ||
| 77 | |**onLoad**|The action is triggered when the web page has been fully loaded. | ||
| 78 | |**onChange**|The action is triggered when the value of a textbox is changed by the user. | ||
| 79 | |**onBlur**|The action is triggered when the focus of the input leaves the textbox, meaning when the user has finished entering text in the textbox and moves the focus to another element on the page. | ||
| 80 | | | | ||
| 81 | |||
| 82 |