77a0ac5b99
* 🐛 (docs): correct display abnormalities in Algolia Search * 📝 : update outdated URLs * 🆕 (docs): add type switch in components nav * 📝 : update front matter * remove a demo * Update Search.razor
3.7 KiB
title, desc, related
| title | desc | related | |||
|---|---|---|---|---|---|
| Toolbars | The **MToolbar** component is pivotal to any graphical user interface (GUI), as it generally is the primary source of site navigation.The toolbar component works great in conjunction with [MNavigationDrawer](/blazor/components/navigation-drawers) and [MCard](/blazor/components/cards). |
|
Usage
A toolbar is a flexible container that can be used in a number of ways. By default, the toolbar is 64px high on desktop and 56px high on mobile. There are a number of helper components available to use with the toolbar. The MToolbarTitle is used for displaying a title and MToolbarItems allow MButton to extend full height.
Anatomy
Caveats
Examples
Props
Background
Toolbars can display a background as opposed to a solid color using the src prop. This can be modified further by using the img slot and providing your own MImage component. Backgrounds can be faded using a MAppBar.
Collapse
Toolbars can be collapsed to save screen space.
Dense toolbars
Dense toolbars reduce their height to 48px. When using in conjunction with the prominent prop, will reduce height to 96px.
Extended
Rating can be given different sizing options to fit a multitude of scenarios.
Extenstion height
The extension’s height can be customized.
Floating with search
A floating toolbar is turned into an inline element that only takes up as much space as needed. This is particularly useful when placing toolbars over content.
Light And Dark
Toolbars come in 2 variants, light and dark. Light toolbars have dark tinted buttons and dark text whereas dark toolbars have white tinted buttons and white text.
Prominent toolbars
Prominent toolbars increase the MToolbar height to 128px and positions the MToolbarTitle towards the bottom of the
container. This is expanded upon in MApp with the ability to shrink a prominent toolbar
to a dense or short one.
Misc
Contextual action bar
It is possible to update the appearance of a toolbar in response to changes in app state. In this example, the color and content of the toolbar changes in response to user selections in the MSelect.
Flexible and card toolbar
In this example we offset our card onto the extended content area of a toolbar using the extended prop.