From a5095e744a959d75e5f33a5219a73a5d4f899da0 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Wed, 3 Jul 2024 17:34:59 +0900
Subject: [PATCH] stack

---
 .../Components/Layout/NavMenu.razor           |  3 +-
 .../Components/Pages/LayoutStack.razor        | 59 +++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 ComponentPractice/ComponentPractice/Components/Pages/LayoutStack.razor

diff --git a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
index f9aded1..78072ac 100644
--- a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
+++ b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
@@ -43,7 +43,8 @@
             </RadzenPanelMenuItem>
             <RadzenPanelMenuItem Text="Layout" Icon="dashboard">
                 <div onclick="document.querySelector('.navbar-toggler').click()">
-                    <RadzenPanelMenuItem Text="Basic" Icon="dashboard_customize" Path="layout" />
+                    <RadzenPanelMenuItem Text="Layout" Icon="dashboard_customize" Path="layout" />
+                    <RadzenPanelMenuItem Text="Stack" Icon="dashboard_customize" Path="layoutstack" />
                 </div>
             </RadzenPanelMenuItem>
         </RadzenPanelMenu>
diff --git a/ComponentPractice/ComponentPractice/Components/Pages/LayoutStack.razor b/ComponentPractice/ComponentPractice/Components/Pages/LayoutStack.razor
new file mode 100644
index 0000000..d6eafc9
--- /dev/null
+++ b/ComponentPractice/ComponentPractice/Components/Pages/LayoutStack.razor
@@ -0,0 +1,59 @@
+@page "/layoutstack"
+
+@rendermode RenderMode.InteractiveServer
+
+<RadzenCard class="rz-p-12 rz-m-12">
+    <RadzenText TextStyle="TextStyle.H5">Stack</RadzenText>
+    <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
+    @* Option card *@
+    <RadzenCard class="my-4">
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap">
+            <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
+                Orientation
+                <RadzenDropDown @bind-Value="@orientation" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string, object>() {{ "aria-label", "orientation"}})"
+                                Data="@(Enum.GetValues(typeof(Orientation)).Cast<Orientation>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
+            </RadzenStack>
+            <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
+                Alignments
+                <RadzenDropDown @bind-Value="@alignItems" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string, object>() {{ "aria-label", "alignItems"}})"
+                                Data="@(Enum.GetValues(typeof(AlignItems)).Cast<AlignItems>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
+            </RadzenStack>
+            <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
+                JustifyContent
+                <RadzenDropDown @bind-Value="@justifyContent" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string, object>() {{ "aria-label", "justifyContent"}})"
+                                Data="@(Enum.GetValues(typeof(JustifyContent)).Cast<JustifyContent>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
+            </RadzenStack>
+            <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
+                FlexWrap
+                <RadzenDropDown @bind-Value="@flexWrap" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string, object>() {{ "aria-label", "flexWrap"}})"
+                                Data="@(Enum.GetValues(typeof(FlexWrap)).Cast<FlexWrap>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
+            </RadzenStack>
+            <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
+                Gap
+                <RadzenTextBox @bind-Value="@gap" aria-label="gap" />
+            </RadzenStack>
+            <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
+                Reverse
+                <RadzenSwitch @bind-Value="@reverse" class="rz-m-3" InputAttributes="@(new Dictionary<string, object>() {{ "aria-label", "reverse"}})" />
+            </RadzenStack>
+        </RadzenStack>
+    </RadzenCard>
+    @* Stack *@
+    <RadzenCard class="p-0">
+        <RadzenStack Orientation="@orientation" Gap="@gap" Reverse="@reverse" JustifyContent="@justifyContent" AlignItems="@alignItems" Wrap="@flexWrap">
+            <RadzenCard class="p-1 rz-background-color-info rz-color-on-info rz-text-align-center">A</RadzenCard>
+            <RadzenCard class="p-1 rz-background-color-success rz-color-on-success rz-text-align-center" Style="height:40px; width:40px">B</RadzenCard>
+            <RadzenCard class="p-1 rz-background-color-warning rz-color-on-warning rz-text-align-center" Style="height:60px; width:60px">C</RadzenCard>
+            <RadzenCard class="p-1 rz-background-color-danger rz-color-on-danger rz-text-align-center" Style="height:80px; width:80px">D</RadzenCard>
+        </RadzenStack>
+    </RadzenCard>
+</RadzenCard>
+
+@code {
+    Orientation orientation = Orientation.Horizontal;
+    AlignItems alignItems = AlignItems.Normal;
+    JustifyContent justifyContent = JustifyContent.Normal;
+    FlexWrap flexWrap = FlexWrap.NoWrap;
+    string gap = "10px";
+    bool reverse;
+}