AppBar
AppBar component for Universal Dashboard
The App Bar displays information and actions relating to the current screen.
The top App Bar provides content and actions related to the current screen. It's used for branding, screen titles, navigation, and actions.

AppBar with Custom Drawer

1
$Drawer = New-UDDrawer -Children {
2
New-UDList -Children {
3
New-UDListItem -Label "Home"
4
New-UDListItem -Label "Getting Started" -Children {
5
New-UDListItem -Label "Installation" -OnClick {}
6
New-UDListItem -Label "Usage" -OnClick {}
7
New-UDListItem -Label "FAQs" -OnClick {}
8
New-UDListItem -Label "System Requirements" -OnClick {}
9
New-UDListItem -Label "Purchasing" -OnClick {}
10
}
11
}
12
}
13
14
New-UDAppBar -Position relative -Children { New-UDElement -Tag 'div' -Content { "Title" } } -Drawer $Drawer
Copied!

Footer

To create an app bar that is pinned to the bottom of the page, you can use the -Footer parameter.
1
New-UDAppBar -Children { "Hello" } -Footer
Copied!

Fixed AppBar

A fixed AppBar will show even when the screen is scrolled. It will remain stuck to the top. This example creates an AppBar that is fixed with a div that is 10000 pixels high.
1
New-UDAppBar -Position fixed -Children { New-UDElement -Tag 'div' -Content { "Title" } }
2
3
New-UDElement -Tag 'div' -Content {
4
5
} -Attributes @{
6
style = @{
7
height = "10000px"
8
}
9
}
Copied!
New-UDAppBar
Name
Type
Description
Required
Id
String
The ID of the component. It defaults to a random GUID.
false
Drawer
Hashtable
A drawer that can be opened from this AppBar. Use New-UDDrawer to create a drawer to pass to this parameter.
false
Children
ScriptBlock
Children of this AppBar. The children of an AppBar are commonly text and buttons.
false
Position
String
The position of this AppBar. A fixed position will override the default AppBar.
false
Footer
Switch
Creates an app bar pinned to the bottom of the page.
false
Last modified 22d ago