From 004ff64396b6af6cbdcc77ef86fc9c3654cc4378 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Thu, 25 Jul 2024 14:56:54 +0900
Subject: [PATCH] horizontal scroll

---
 .../Components/CompoHorizontalScroll.razor    | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor b/BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor
index ccf4f05..7e5828c 100644
--- a/BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor
+++ b/BlazorFluentUI/Components/Pages/Components/CompoHorizontalScroll.razor
@@ -72,6 +72,61 @@
     <p><b>Message</b>: @fmessage?.ToString()</p>
 </FluentCard>
 
+<style>
+    .right-gradient {
+        --scroll-fade-next: var(--fill-color)
+    }
+
+    .both-gradient {
+        --scroll-fade-previous: var(--fill-color);
+        --scroll-fade-next: var(--fill-color);
+    }
+</style>
+
+<h4 class="mt-4">Gradients</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h5>Right gradient</h5>
+    <FluentHorizontalScroll Class="right-gradient" Speed="600"
+                            Easing="ScrollEasing.EaseInOut">
+        <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>
+    <h5>Right gradient</h5>
+    <FluentHorizontalScroll Class="both-gradient" Speed="600"
+                            Easing="ScrollEasing.EaseInOut">
+        <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>
+</FluentCard>
+
 @code {
     string? emessage;
     void OnEScrollStart(HorizontalScrollEventArgs args)