flipper

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>

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 {
+
+}