popover

9 months ago · 6704f94171
parent 26aa7ef1e1
commit 6704f94171
2 changed files with 54 additions and 0 deletions
--- 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>
--- a/BlazorFluentUI/Components/Pages/Components/CompoPopover.razor
+++ 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;
+}