From 6af8539e892ce92609afddadd5464d4354b1748a Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Wed, 24 Jul 2024 16:45:51 +0900
Subject: [PATCH] flipper

---
 .../Components/Layout/NavMenu.razor           |  1 +
 .../Components/Pages/CompoFlipper.razor       | 32 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 BlazorFluentUI/Components/Pages/CompoFlipper.razor

diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 5bc0f95..8dea677 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -62,6 +62,7 @@
                 <FluentNavLink Href="compodivider" Icon="@(new Icons.Regular.Size20.DividerShort())" IconColor="Color.Accent">Divider</FluentNavLink>
                 <FluentNavLink Href="compodrag" Icon="@(new Icons.Regular.Size20.Drag())" IconColor="Color.Accent">Drag</FluentNavLink>
                 <FluentNavLink Href="compoemoji" Icon="@(new Icons.Regular.Size20.EmojiMeme())" IconColor="Color.Accent">Emoji</FluentNavLink>
+                <FluentNavLink Href="compoflipper" Icon="@(new Icons.Regular.Size20.LineHorizontal3())" IconColor="Color.Accent">Flipper</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/CompoFlipper.razor b/BlazorFluentUI/Components/Pages/CompoFlipper.razor
new file mode 100644
index 0000000..23a2889
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/CompoFlipper.razor
@@ -0,0 +1,32 @@
+@page "/compoflipper"
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>Flipper</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    The <code>FluentFlipper</code> wraps a web component <code>flipper</code>.
+</div>
+
+
+<h4 class="mt-4">Default Example</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h5>Previous</h5>
+    <FluentFlipper Direction="FlipperDirection.Previous"/>
+
+    <h5>Next</h5>
+    <FluentFlipper Direction="FlipperDirection.Next" />
+
+    <h5>With custom icons (Previous)</h5>
+    <FluentFlipper Direction="FlipperDirection.Previous">
+        <FluentIcon Value="@(new Icons.Regular.Size16.ArrowCircleLeft())" Color="Color.Accent" Slot="previous" />
+    </FluentFlipper>
+    <h5>With custom icons (Next)</h5>
+    <FluentFlipper Direction="FlipperDirection.Next">
+        <FluentIcon Value="@(new Icons.Regular.Size16.ArrowCircleRight())" Color="Color.Accent" Slot="next" />
+    </FluentFlipper>
+</FluentCard>
+
+@code {
+
+}