overlay

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -69,6 +69,7 @@
                 <FluentNavLink Href="compomenu" Icon="@(new Icons.Regular.Size20.ListBar())" IconColor="Color.Accent">Menu</FluentNavLink>
                 <FluentNavLink Href="compomessagebar" Icon="@(new Icons.Regular.Size20.WindowArrowUp())" IconColor="Color.Accent">MessageBar</FluentNavLink>
                 <FluentNavLink Href="compomessagebox" Icon="@(new Icons.Regular.Size20.BoxArrowUp())" IconColor="Color.Accent">MessageBox</FluentNavLink>
+                <FluentNavLink Href="compooverlay" Icon="@(new Icons.Regular.Size20.BoxArrowUp())" IconColor="Color.Accent">Overlay</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/Components/CompoMessageBox.razor

@@ -12,7 +12,7 @@
 </div>
 
 
-<h4 class="mt-4">Message Service</h4>
+<h4 class="mt-4">Default</h4>
 <FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
     <FluentStack Orientation="Orientation.Vertical">
         <FluentButton Appearance="Appearance.Accent" OnClick="@ShowSuccessAsync">Success</FluentButton>

BlazorFluentUI/Components/Pages/Components/CompoOverlay.razor

@@ -0,0 +1,81 @@
+@page "/compooverlay"
+
+@inject IDialogService DialogService;
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>MessageBox</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    <code>FluentOverlay</code>s are used to templorarily overlay screen content to focus a dialog, progress or other infomtion/interaction.
+</div>
+
+
+<h4 class="mt-4">Default</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentButton Appearance="Appearance.Accent" OnClick="@(() => evisible = !evisible)">
+        Show Overlay
+    </FluentButton>
+    <FluentOverlay @bind-Visible=@evisible
+                   Opacity="0.4"
+                   Alignment="Align.Center"
+                   Justification="JustifyContent.Center">
+        <FluentProgressRing />
+    </FluentOverlay>
+</FluentCard>
+
+<h4 class="mt-4">Timed</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentButton Appearance="Appearance.Accent" OnClick="@HandleTOnOpen">
+        Show Timed Overlay
+    </FluentButton>
+    <FluentOverlay @bind-Visible=@tvisible
+                   Opacity="0.4"
+                   Alignment="Align.Center"
+                   Justification="JustifyContent.Center">
+        <FluentProgressRing />
+    </FluentOverlay>
+</FluentCard>
+
+<h4 class="mt-4">Transparent</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentButton Appearance="Appearance.Accent" OnClick="@(() => tpvisible = !tpvisible)">
+        Show Transparent Overlay
+    </FluentButton>
+    <FluentOverlay @bind-Visible=@tpvisible
+                   Opacity="0"
+                   Alignment="Align.Center"
+                   Justification="JustifyContent.Center">
+        <FluentProgressRing />
+    </FluentOverlay>
+</FluentCard>
+
+<h4 class="mt-4">Full screen</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentButton Appearance="Appearance.Accent" OnClick="@(() => fvisible = !fvisible)">
+        Show Full-Screen Overlay
+    </FluentButton>
+    <FluentOverlay @bind-Visible=@fvisible
+                   Opacity="0.4"
+                   FullScreen="true"
+                   Alignment="Align.Center"
+                   Justification="JustifyContent.Center">
+        <FluentProgressRing />
+    </FluentOverlay>
+</FluentCard>
+
+@code {
+    bool evisible = false;
+
+    bool tvisible = false;
+    async Task HandleTOnOpen()
+    {
+        tvisible = true;
+        await Task.Delay(3000);
+        tvisible = false;
+    }
+
+    bool tpvisible = false;
+
+    bool fvisible = false;
+}