App Bar
App Bar is a component that is used to display important information to the user. It can be used to show alerts, warnings, or any other important information.
<x-mbc::app-bar>
@slot('start')
<x-mbc::IconButton
icon="menu"
color="inherit"
aria-label="Open navigation menu"
/>
<span class="mdc-top-app-bar__title">Page title</span>
@endslot
@slot('end')
<x-mbc::icon-button
icon="favorite"
color="inherit"
aria-label="Favorite"
/>
<x-mbc::icon-button
icon="search"
color="inherit"
aria-label="Search"
/>
<x-mbc::icon-button
icon="more_vert"
color="inherit"
aria-label="Options"
/>
@endslot
</x-mbc::app-bar>Fixed App Bar
<x-mbc::app-bar fixed>...</x-mbc::app-bar>Variants
The App Bar can have different variants. The variant can be set using the variant prop.
Basic
The basic variant is the default variant of the App Bar. It has a height of 64px.
<x-mbc::app-bar variant="....">
...
</x-mbc::app-bar>
dense
The dense variant is a smaller variant of the App Bar. It has a height of 48px.
short
The short variant is a smaller variant of the App Bar. It has a height of 56px.
short-collapsed
The short-collapsed variant is a smaller variant of the App Bar. It has a height of 56px. The short-collapsed variant is collapsed by default.
prominent
The prominent variant is a larger variant of the App Bar. It has a height of 128px.
Colors
Coming soon...
Properties
mbc::app-bar
| Name | Type | Default | Description |
|---|---|---|---|
color
|
'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | string
|
|
Background color of the app bar. |
fixed
|
bool
|
false
|
If true, the app bar will be fixed at the top of the page. |
variant
|
'short' | 'short-collapsed' | 'dense' | 'prominent' | string
|
basic
|
Variant of the app bar. |