From 6704f94171e17462d25c64fb7870708b1a0ddfcb Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Tue, 30 Jul 2024 16:35:06 +0900
Subject: [PATCH] popover

---
 .../Components/Layout/NavMenu.razor           |  1 +
 .../Pages/Components/CompoPopover.razor       | 53 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 BlazorFluentUI/Components/Pages/Components/CompoPopover.razor
diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 897f1b8..f2704a7 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -71,6 +71,7 @@
                 <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>
                 <FluentNavLink Href="compopersona" Icon="@(new Icons.Regular.Size20.PersonSearch())" IconColor="Color.Accent">Persona</FluentNavLink>
+                <FluentNavLink Href="compopopover" Icon="@(new Icons.Regular.Size20.TooltipQuote())" IconColor="Color.Accent">Popover</FluentNavLink>
                 <FluentNavLink Href="compotoast" Icon="@(new Icons.Regular.Size20.FoodToast())" IconColor="Color.Accent">Toast</FluentNavLink>
 
             </FluentNavGroup>
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoPopover.razor b/BlazorFluentUI/Components/Pages/Components/CompoPopover.razor
new file mode 100644
index 0000000..90cdf51
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Components/CompoPopover.razor
@@ -0,0 +1,53 @@
+﻿@page "/compopopover"
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>Popover</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    <code>FluentPopover</code>s are used to display additional information about an element when the user hovers over or focuses on the element.
+    Use the <code>AnchorId</code> parameter to connect the popover to the component it is positioned relative to.
+</div>
+
+
+<h4 class="mt-4">Callout</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <div style="display: flex; width=100%">
+        <FluentButton Id="cpopbutton1" Appearance="Appearance.Accent" OnClick="@(() => cVisible1 = !cVisible1)">
+            Open Callout 1
+        </FluentButton>
+        <FluentSpacer/>
+        <FluentButton Id="cpopbutton2" Appearance="Appearance.Accent" OnClick="@(() => cVisible2 = !cVisible2)">
+            Open Callout 2
+        </FluentButton>
+
+        <FluentPopover AnchorId="cpopbutton1" Style="width:300px" VerticalThreshold="170"  @bind-Open="cVisible1">
+            <Header>Callout Header</Header>
+            <Body>
+                Callout Body
+                <FluentStack Orientation="Orientation.Vertical">
+                    <FluentCheckbox>Item 1</FluentCheckbox>
+                    <FluentCheckbox>Item 2</FluentCheckbox>
+                    <FluentTextField tabindex="0"/>
+                </FluentStack>
+            </Body>
+            <Footer>
+                Callout Footer
+            </Footer>
+        </FluentPopover>
+
+        <FluentPopover AnchorId="cpopbutton2" Style="width:300px" VerticalThreshold="170" @bind-Open="cVisible2">
+            <Header>Callout Header</Header>
+            <Body>
+                Callout Body
+            </Body>
+            <Footer>
+                Callout Footer
+            </Footer>
+        </FluentPopover>
+    </div>
+</FluentCard>
+
+@code {
+    bool cVisible1, cVisible2;
+}
