From e6fd4907b99b9c746a659a9f183bf3364cbf562c Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Wed, 24 Jul 2024 17:39:21 +0900
Subject: [PATCH] horizontal scroll

---
 .../Components/Layout/NavMenu.razor           |  1 +
 .../Components/CompoHorizontalScroll.razor    | 97 +++++++++++++++++++
 2 files changed, 98 insertions(+)
 create mode 100644 BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor

diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 9c3ad4d..4491011 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -64,6 +64,7 @@
                 <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>
                 <FluentNavLink Href="compohighlighter" Icon="@(new Icons.Regular.Size20.Highlight())" IconColor="Color.Accent">Highlighter</FluentNavLink>
+                <FluentNavLink Href="compohorizontalscroll" Icon="@(new Icons.Regular.Size20.AlignSpaceEvenlyHorizontal())" IconColor="Color.Accent">HorizontalScroll</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor b/BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor
new file mode 100644
index 0000000..ccf4f05
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor
@@ -0,0 +1,97 @@
+@page "/compohorizontalscroll"
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>HorizontalScroll</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    The <code>FluentHorizontalScroll</code> wraps a web component of a <code>horizontal scroller</code>.
+</div>
+
+
+<h4 class="mt-4">Default</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentHorizontalScroll Speed="600"
+                            Easing="ScrollEasing.EaseInOut"
+                            @onscrollstart="OnEScrollStart"
+                            @onscrollend="OnEScrollStart">
+        <FluentCard>
+            Card number 1
+            <FluentButton Appearance="Appearance.Neutral">A button</FluentButton>
+        </FluentCard>
+        <FluentCard>Card number 2</FluentCard>
+        <FluentCard>Card number 3</FluentCard>
+        <FluentCard>Card number 4</FluentCard>
+        <FluentCard>Card number 5</FluentCard>
+        <FluentCard>Card number 6</FluentCard>
+        <FluentCard>Card number 7</FluentCard>
+        <FluentCard>Card number 8</FluentCard>
+        <FluentCard>Card number 9</FluentCard>
+        <FluentCard>Card number 10</FluentCard>
+        <FluentCard>Card number 11</FluentCard>
+        <FluentCard>Card number 12</FluentCard>
+        <FluentCard>Card number 13</FluentCard>
+        <FluentCard>Card number 14</FluentCard>
+        <FluentCard>Card number 15</FluentCard>
+        <FluentCard>Card number 16</FluentCard>
+    </FluentHorizontalScroll>
+    <p><b>Message</b>: @emessage?.ToString()</p>
+</FluentCard>
+
+<style>
+    .full-width,
+    .full-width fluent-card {
+        width: 300px;
+        height: 150px;
+    }
+</style>
+
+<h4 class="mt-4">Full width cards</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentHorizontalScroll Class="full-width" Speed="600"
+                            Easing="ScrollEasing.EaseInOut"
+                            @onscrollstart="OnFScrollStart"
+                            @onscrollend="OnFScrollStart">
+        <FluentCard>Card number 1</FluentCard>
+        <FluentCard>Card number 2</FluentCard>
+        <FluentCard>Card number 3</FluentCard>
+        <FluentCard>Card number 4</FluentCard>
+        <FluentCard>Card number 5</FluentCard>
+        <FluentCard>Card number 6</FluentCard>
+        <FluentCard>Card number 7</FluentCard>
+        <FluentCard>Card number 8</FluentCard>
+        <FluentCard>Card number 9</FluentCard>
+        <FluentCard>Card number 10</FluentCard>
+        <FluentCard>Card number 11</FluentCard>
+        <FluentCard>Card number 12</FluentCard>
+        <FluentCard>Card number 13</FluentCard>
+        <FluentCard>Card number 14</FluentCard>
+        <FluentCard>Card number 15</FluentCard>
+        <FluentCard>Card number 16</FluentCard>
+    </FluentHorizontalScroll>
+    <p><b>Message</b>: @fmessage?.ToString()</p>
+</FluentCard>
+
+@code {
+    string? emessage;
+    void OnEScrollStart(HorizontalScrollEventArgs args)
+    {
+        emessage = $"Scroll: {args.Scroll}";
+    }
+
+    void OnEScrollEnd(HorizontalScrollEventArgs args)
+    {
+        emessage = $"Scroll: {args.Scroll}";
+    }
+
+    string? fmessage;
+    void OnFScrollStart(HorizontalScrollEventArgs args)
+    {
+        fmessage = $"Scroll: {args.Scroll}";
+    }
+
+    void OnFScrollEnd(HorizontalScrollEventArgs args)
+    {
+        fmessage = $"Scroll: {args.Scroll}";
+    }
+}