The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.
property |
description |
titleText |
string displayed text |
svgIcon1/2/3/4 |
string but in svg-code from <svg> to </svg> or null - use every svg, without setting the fill properties, it will automatically add color, if you leave an icon blank it will be invisible and the other icons adjust their position |
onSelectIcon1/2/3/4 |
behavioural property formulas you want to execute on the icons (left to right) |
tooltipIcon1/2/3/4 |
string tooltip of the icons |
iconSize |
int in px - size of all the icons |
- use the included icons from the template
- use icon1 for a menu or back button
- you can stack 2 bars on top of eachother to provide additional actions in a changed context (see gif)
- don't use the top bar at all if there is no benefit at all from using it 😉
- Because there is a box shadow, you have to overlap this 10 px to the next control to the bottom.
- Default-width is set to
App.DesignWidth
. Set to Parent.Width
for repsonsive apps can't set this as a default, because this will cause "phantom errors" in the editor
Version |
description |
1.0.0 |
First version |
https://m2.material.io/components/app-bars-top