Footer
This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0
A footer is an additional navigation section for the websites or apps. It can hold links, buttons, company info, copyrights, forms, and many other elements.
Footer Configuration
The “Footer” element consists of the following properties:
- UI Configuration
UI Configuration
For the “Footer” element, you can configure the following UI properties:
Tab | Property Name | Description | Mandatory | New Default Value | Visibility Rules |
Basic | Reference Name | Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name. | Yes | Footer 1 | |
Basic | Visible | Allows you to define the default visibility of the UI element. | No | Selected | |
Basic | Business Rule | Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module. | No | ||
Basic | Enable | Click this check box to make the element active or inactive. The user can perform the function on the active element. | No | Selected | |
Basic | Business Rule | Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module. | No | ||
Basic | Scrollable | Allows you to configure the scrolling feature in the element. | No | marked | |
UI Properties-Background | Type | Allows you to configure the element’s background by providing the following options: –> Color –> Image | No | – | |
UI Properties-Background | Color | Allows you to configure a color as the element?s background. If you click the Color tab, the Color box opens. To configure a color as the element?s background: ?> In the Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.Click in the Color box and then define the color of the background. | No | #FFFFFF | when type = color |
UI Properties-Background | Opacity | Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the color, you can also define the opacity in the percentage unit. | Yes | 100% | |
UI Properties-Background | Image | Allows you to configure an image as the element?s background. To configure the image as a background: ?> In the Type area, click the Image tab, and the Image Source list appears. –> In the Image Source list, you can choose one of the following options: a. None b. URL c. Assets Library | |||
UI Properties-Background | Image URL | This box becomes visible after you select URL in the Image Source list. In the Image URL box, enter the image’s URL. The application will fetch the image from a URL-based location and then display it as the element?s background. | |||
UI Properties-Background | Select Assets | This box becomes visible after you select Assets Library in the Image Source list. This property allows you to configure an image as the element?s background from the Assets Manager module. To configure the image: 1. In the Select Assets box, click the asset library icon (), and the Select Asset dialog box opens. 2. In the Select Asset dialog box, select an icon and then click Select, and you successfully configure the image as the background image. | |||
UI Properties-Background | Elevation | Allows you to configure the elevation of the background. The elevation is measured as the relative distance between two surfaces along the Z-axis. | No | 0 | |
UI Properties-Alignment & Spacing | Padding | Allows you to desirably define padding around each side of the element. It provides four different boxes to define the padding around the right, left, top, and bottom side of the element. | No | [0,0,0,0] | |
UI Properties-Alignment & Spacing | Container Internal Alignment | This property offers the following alignment options to align an element in a container element. 1. First List:- It provides the following alignment options: a. Left b. Center c. Right 2. Second List:- It provides the following alignment options: a. Top b. Middle c. Bottom d. Space Around e. Space Between f. Space Evenly | No | Left, Top | |
UI Properties-Shape & Decoration | Width Value | Enter the width of the element in the pixel unit. | No | 100% | |
UI Properties-Shape & Decoration | Height Value | Enter the height of the element in the percentage unit or pixel unit. | No | 64px | |
UI Properties-Shape & Decoration | X | Allows you to move the element along the X-axis; when the value increases, the element moves from left to right. | No | Show & Disable | |
UI Properties-Shape & Decoration | Y | Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom. | No | Show & Disable | |
UI Properties-Shape & Decoration | Border Top Color | This property is specially incorporated for the “Footer” element. It allows you to configure the color of the footer’s top border. To configure the color: –> In the Border Top Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color. | No | #C6C6C6 | |
UI Properties-Shape & Decoration | Opacity | Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the color, you can also define the opacity in the percentage unit. | |||
UI Properties-Shape & Decoration | Border Radius | Allows you to define the radius of one or more corners of the element. Defining the radius of the corner makes the corner of the element round. | No | 0 |
Was this article helpful?
YesNo