Header – Everything you want to know about modern control #9

Introduction to modern Header control

Header control is one of the new modern controls that came into existence not too long ago. Prior to this control, I used to wish if there was a way to make headers consistent not just across all screens within an app but across all applications within an enterprise. I had even built a component for the same but it wasn't the best, to say the least. Then came this control with so many configurations that it solved all my consistency issues.

Properties

1. Title - The title text of the header. It defaults to the screen name.
2. IsTitleVisible - Visibility of the title text
3. Logo - The image to show
4. IsLogoVisible - Visibility of the title logo
5. IsProfilePictureVisible - Visibility of the user's profile picture. The image is controlled by the UserImage property which defaults to User().Image.
6. Style - There are 3 different options:
   1. 'Header.Style'.Primary (default)
   2. 'Header.Style'.Light
   3. 'Header.Style'.Neutral
7. OnSelectLogo - The navigation or any other action that should happen when the user clicks on the logo

Using modern Header control

The Header control is pretty straightforward to use. Here are the 3 examples of the styles:

Stay tuned for the remaining modern controls!

To read the official documentation of modern controls, click here.

Recent articles

1. Dropdown – Everything you want to know about modern control #8
2. Date picker – Everything you want to know about modern control #7
3. Copilot Answer- Everything you want to know about modern control #6