BlazorFluentUIPractice/BlazorFluentUI/Components/Pages/Components/CompoMessageBar.razor

@page "/compomessagebar"

@inject IMessageService MessageService;
@inject IDialogService DialogService;

@rendermode RenderMode.InteractiveServer

<h3>MessageBar</h3>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<div>
    <code>MessageBar</code>s are rendered by the <code>&lt;FluentMessageBarProvider /&gt;</code>.
    This component needs to be added to the layout of application/site.
</div>


<h4 class="mt-4">Message Service</h4>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
    <div>
        This is the advised way to use <code>MessageBar</code>s.
    </div>
    <FluentStack Orientation="Orientation.Vertical" HorizontalGap="2">
        <FluentButton Appearance="Appearance.Accent"
                      OnClick="@AddInTopBar">
            Add on top
        </FluentButton>
        <FluentButton Appearance="Appearance.Accent"
                      OnClick="@AddInNavTopBar">
            Add on navigation top
        </FluentButton>
        <FluentButton Appearance="Appearance.Neutral"
                      OnClick="@(e => MessageService.Clear())">
            Clear all messages
        </FluentButton>
    </FluentStack>
</FluentCard>

<h4 class="mt-4">Message Service</h4>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
    <div>
        This is the advised way to use <code>MessageBar</code>s.
    </div>
    <FluentStack Orientation="Orientation.Vertical" HorizontalGap="2">
        <FluentButton Appearance="Appearance.Accent"
                      OnClick="@(() => AddInTopBar(3000))">
            Add on top (3 sec)
        </FluentButton>
        <FluentButton Appearance="Appearance.Accent"
                      OnClick="@(() => AddInNavTopBar(5000))">
            Add on navigation top (5 sec)
        </FluentButton>
    </FluentStack>
</FluentCard>

@code {
    int ecounter = 0;
    async Task AddInTopBar()
    {
        var message = $"Simple message #{ecounter++}";
        var type = Enum.GetValues<MessageIntent>()[ecounter % 4];
        await MessageService.ShowMessageBarAsync(message, type, App.MESSAGE_TOP);
    }

    async Task AddInNavTopBar()
    {
        var message = $"Simple message #{ecounter++}";
        var type = Enum.GetValues<MessageIntent>()[ecounter % 4];
        await MessageService.ShowMessageBarAsync(message, type, App.MESSAGE_NAV_TOP);
    }

    void AddInTopBar(int timeout)
    {
        var message = $"Simple message #{ecounter++}";
        var type = Enum.GetValues<MessageIntent>()[ecounter % 4];
        MessageService.ShowMessageBar(options =>
        {
            options.Title = message;
            options.Intent = type;
            options.Section = App.MESSAGE_TOP;
            options.Timeout = timeout;
        });
    }

    void AddInNavTopBar(int timeout)
    {
        var message = $"Simple message #{ecounter++}";
        var type = Enum.GetValues<MessageIntent>()[ecounter % 4];
        MessageService.ShowMessageBar(options =>
         {
             options.Title = message;
             options.Intent = type;
             options.Section = App.MESSAGE_NAV_TOP;
             options.Timeout = timeout;
         });
    }
}