AppBar
The AppBar showcases information and actions relevant to the current screen. Within the AppBar settings, you have the option to activate or deactivate the AppBar for new pages. It's enabled by default, automatically adding an AppBar to every new page you create. Additionally, you can personalize the default AppBar by altering its display style and customizing its overall look and feel.
Changes made on this page will only reflect on the AppBar of new pages. To override the defaults and make changes to any specific AppBar of the page, follow the instructions here.
Changing AppBar type
There are four types of AppBar you can choose from:
Large Header: This is the default AppBar that comes with only the page title.
Large Header -> Back Button: This type of AppBar shows the back button with 'Back' text and a page title below the back button.
Back Button -> Center Title: This type of AppBar displays the back button on the left and the page title in the center.
Back Button -> Left Title: This type of AppBar shows the back button and a page title on the left.
To change the AppBar type, navigate to Settings and Integrations > General > NavBar & AppBar > App Bar > simply select the Type of AppBar you want.
Styling AppBar
You can use the various settings available under the styling section to customize the default AppBar.
Tip: you can enhance your customization options by using a Row or Column inside your AppBar.
Changing background color
To change the background color of the AppBar, navigate to the Settings and Integrations > General > NavBar & AppBar > App Bar > Style > use the Background Color property.
Changing the AppBar height
You can customize the height of the AppBar using the Height property.
Changing elevation
To change the elevation (depth or Z-axis) of the AppBar:
Navigate to Settings and Integrations > General > NavBar & AppBar > App Bar > Style.
In the Elevation property, enter the value to see the drop shadow effect below the AppBar. The Higher value sets the bigger size of the shadow.
Customizing default icon
The default icon for the back button is Arrow Back Rounded (<-). However, you can use the icon properties available under the icon section to customize it as per your need.
To customize the default icon:
Navigate to the Settings and Integrations > General > NavBar & AppBar > App Bar > Icon.
To change the icon, click on the Arrow Back Rounded <- button and then search and select the new icon.
To change the icon size, find the Icon Size property and enter the value.
To change the Icon color, use the Icon Color property.
Changing text style
To change the text style of the page title:
Navigate to the Settings and Integrations > General > NavBar & AppBar > App Bar > Text.
Change the text style as per the instructions here.
Control responsive visibility of AppBar on new pages
You can configure the AppBar to show or hide automatically on new pages in response to different display conditions, such as on a mobile phone versus a tablet. This functionality is particularly useful for creating a user interface that adapts to various screen sizes.
For example, on some screen size, you might choose to hide the AppBar for a cleaner layout. Rather than manually adjusting the AppBar's visibility on each new page, you can set the responsive visibility just once here.
Last Updated Date: January 25, 2024
Last updated
