MessageBar

MessageBars are rendered by the <FluentMessageBarProvider />. This component needs to be added to the layout of your application/site. For a message bar that needs to be shown at the top of the screen, you typically do this in the MainLayout.razor file at the location in the HTML structure where you want the message bars to appear of the <main> section like this:

For the MessageBars to work properly, the <FluentMessageBarProvider/> needs interactivity! If you are using "per page" interactivity, make sure to add a @rendermode to either the provider itself or the component the provider is placed in.

<main>
    <nav>
        <!-- -->
    </nav>
    <div class="content">
        <article id="article">
            <FluentMessageBarProvider Section="MESSAGES_TOP"/>
            @Body
        </article>
    </div>
</main>

Sections

You can use multiple message bar providers in a single page/app. In the example below you can add a message bar on the top of the window, but also in the notification center or in a dialog. An area to display messages in is called a Section. You can specify in wich Section you want your message to appear in through the MessageOptions.

Clear message bars on navigation

By default, message bars will not be removed when navigating to another page. This can be changed by setting the ClearAfterNavigation parameter to true on a FluentMenuProvider. When using multiple providers (see Sections above), the parameter needs to be set for each provider individually. You can also set the behavior on a per message basis by using the same parameter of the MessageOptions class.

Examples

Message Service

Timed Messages

MessageBar with options

Simple messages

Simple notification

Notification Center

MessageBar provider

Display the list of messages

You display a list of messages for a specific section using the FluentMessageBarProvider component.

<FluentMessageBarProvider Section="MESSAGE_SECTION" Format="MessageFormat.Notification" />

Documentation