Header
Check out the function of the Header element.
The Header is a Container type element that serves to house interface elements such as basic navigation, menu, page/screen name, notifications, etc., found at the top part of the application's user interface. The Header plays a significant role in the overall design and functionality of the application. You can use the Header structure for elements that you want to remain fixed at the top edge of the screen.
The Header element is commonly used during the development of web and mobile applications to contain user interface elements like labels, logos, menus, etc., typically located at the top of web pages.
You can use the Header element in the web or mobile applications you develop.
Adding Header
Adding a Header element into your application is quite easy. To add a Header element, you should follow the steps below:
Drag and drop the Header element onto the screen.
You can customize the Header element from the Properties panel.
Even if you drag and drop the Header element onto an empty space on the screen, it will remain fixed to the top edge. In long screen designs, it will still stay fixed to the top edge as the screen scrolls.
The Header element can only be used once within a screen.
Since the Header element will house elements such as the menu, screen name, notifications, and user profile of the screen you develop, start by adding a Row element into it first. However, you can add many elements that you can drag into a Column. Generally, the elements that are mostly dragged and dropped into the Header element are;
1. Properties
When the Header element is selected, Authorization and Visibility parameters are displayed in the Properties panel. These parameter fields allow you to edit special authorization settings and visibility preferences related to the Header element.
You can give role-based authorizations to the element and set its visibility to show/hide/conditional options.
You can use authorization options for the Header element.
Click to examine the Authorization addition processes in elements in detail.
Click to examine Authorization processes according to user roles or screen roles in detail
In elements, visibility is a feature used to control whether it is visible or accessible in a certain situation. This feature is generally used in application design or functionality.
You can use visibility options for the Header element to be always visible, hidden, or visible/hidden depending on a condition.
Click to get detailed information about adding Visibility to elements.
From the Styling panel, you can make adjustments to the Header element's Layout, Border, Fill, or Shadow. You can customize the style of the Header element according to these features.
In the Header element, you can make visual adjustments such as surrounding padding and size with Layout.
Click to get detailed information about adding Layout to elements.
No textual editing is done within the Header element. Different elements (label, etc.) must be added within the Header element for textual editing to be done.
Click to get detailed information about Text settings in elements.
You can add color or an image to the background of the Header element with Fill.
Click to get detailed information about adding Fill to elements.
You can add a Border to the outer edges of the Header and give Radius.
Click to get detailed information about adding Border to elements.
You can add a shadow effect to the Header element with Shadow in web applications. Shadow is not used in mobile applications.
Click to get detailed information about adding Shadow to elements
Last updated
