Toolbar
Static toolbar
<Toolbar>
<ToolbarRow>
<ToolbarSection align="start">
<ToolbarTitle>Title</ToolbarTitle>
</ToolbarSection>
</ToolbarRow>
</Toolbar>
Fixed toolbar
<Toolbar fixed>
<ToolbarRow>
<ToolbarSection align="start">
<ToolbarTitle>Title</ToolbarTitle>
</ToolbarSection>
</ToolbarRow>
</Toolbar>
{/* Adjust top margin for fixed toolbar */}
<Content fixed>
...
</Content>
Content
will produce the <main>
tag by default, but you can override this behavior with property component
<Content component="div">
...
</Content>
Sections
ToolbarSection
could be aligned at start, at center and at end of toolbar
<Toolbar>
<ToolbarRow>
<ToolbarSection align="start">
Start
</ToolbarSection>
<ToolbarSection>
Center
</ToolbarSection>
<ToolbarSection align="end">
End
</ToolbarSection>
</ToolbarRow>
</Toolbar>