Header

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

The ?Header? element, which can be referred to as ?App Bar?, is a dedicated app bar at top of the app canvas. It is used to display important app-related functions that the user is supposed to access and use frequently.

These important functions include branding, top-level navigation (For example: – home page icon, back button), interfaces to access most important functions, etc.

Usage

When to use
The app bars and headers are very useful components to make the mobile app user-friendly and more interactive. Use the header component to place key controls such as in-app search box, home page icon, and other important functions that are used frequently.   Also it is recommended to use static header component that remains on the same position irrespective of navigating to different pages.

Header Configuration

The “Header” element consists of the following properties:

  • UI Configuration

UI Configuration

For the “Header” element, you can configure the following UI properties:

TabProperty NameDescriptionMandatoryNew Default ValueVisibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesFooter 1
BasicVisibleAllows you to define the default visibility of the UI element. Nomarked
BasicEnableAllows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.Nomarked
BasicScrollableAllows you to configure the scrolling feature in the element.Nomarked
UI PropertiesStylesAllows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the elementNoDefault
UI Properties-BackgroundTypeAllows you to configure the element’s background. To configure the background, you can choose one of the following options:
–> Color
–> Image
No
UI Properties-BackgroundColorAllows 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.
No#FFFFFFwhen type = color
UI Properties-BackgroundOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.Yes100 %
UI Properties-BackgroundImageAllows 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:
–> None
–> URL
–> Assets Library
NoNoneIf Type = Image
UI Properties-BackgroundImage URLThis 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.YesURL StringIf “Image Source” = “URL”
UI Properties-BackgroundSelect AssetsThis 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:
–> In the Select Assets box, click the asset library icon (), and the Select Asset dialog box opens.
–> 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-BackgroundElevationAllows you to configure the elevation of the background. The elevation is measured as the relative distance between two surfaces along the Z-axis.No0
UI Properties-Alignment & SpacingPaddingAllows 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 & SpacingHorizontal AlignmentAllows you to horizontally align the child element in the footer. You can align the child element as follows:
–> Left
–> Centre
–> Right
Nocenter
UI Properties-Alignment & SpacingElement AlignmentClick this list to align the element as follows:
–> Right
–> Top
–> Bottom
–> Top Right
–> Top Left
–> Bottom Right
–> Bottom Left
–> Center
Nocenter
UI Properties-Alignment & SpacingVertical AlignmentAllows you to vertically align the child element in the header element. You can align the child element as follows:
–> Top
–> Centre
–> Bottom
–> Space Around
–> Space between
–> Space Evenly
Nocenter
UI Properties-Shape & DecorationWidth ValueEnter the width of the element in the pixel unit or percentage unit.No100%
UI Properties-Shape & DecorationHeight ValueEnter the height of the element in the pixel unit.No64px
UI Properties-Shape & DecorationXAllows you to move the element along the X-axis; when the value increases, the element moves from left to right.NoShow & Disable
UI Properties-Shape & DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.NoShow & Disable
UI Properties-Shape & DecorationBorder RadiusAllows you to define the radius of any of the corners of the element. Defining the radius of the corner makes the corner of the element round.NoTheme Variable (Border Radius)
Was this article helpful?
YesNo