From 6de1e88583f730209e8f99064204bb11651af885 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Thu, 4 Jul 2024 10:14:04 +0900
Subject: [PATCH] layout row

---
 .../Components/Layout/NavMenu.razor           |  1 +
 .../Components/Pages/LayoutRow.razor          | 36 +++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 ComponentPractice/ComponentPractice/Components/Pages/LayoutRow.razor

diff --git a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
index 95b70c2..cf71c5d 100644
--- a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
+++ b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
@@ -34,6 +34,7 @@
             <RadzenPanelMenuItem Text="Layout" Icon="dashboard">
                 <RadzenPanelMenuItem Text="Layout" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layout" />
                 <RadzenPanelMenuItem Text="Stack" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutstack" />
+                <RadzenPanelMenuItem Text="Row" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutrow" />
             </RadzenPanelMenuItem>
         </RadzenPanelMenu>
     </RadzenStack>
diff --git a/ComponentPractice/ComponentPractice/Components/Pages/LayoutRow.razor b/ComponentPractice/ComponentPractice/Components/Pages/LayoutRow.razor
new file mode 100644
index 0000000..296e5fe
--- /dev/null
+++ b/ComponentPractice/ComponentPractice/Components/Pages/LayoutRow.razor
@@ -0,0 +1,36 @@
+@page "/layoutrow"
+
+@rendermode RenderMode.InteractiveServer
+
+<RadzenCard class="rz-p-4 rz-mt-6">
+    <RadzenText TextStyle="TextStyle.H5">Row</RadzenText>
+    <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
+    <RadzenCard class="my-4">
+        <RadzenStack Orientation="Orientation.Vertical" Gap="4px">
+            AlignItems
+            <RadzenDropDown @bind-Value="@alignItems" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "align items" }})"
+                            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", "justify content" }})"
+                            Data="@(Enum.GetValues(typeof(JustifyContent)).Cast<JustifyContent>().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>
+    </RadzenCard>
+    <RadzenRow class="rz-border-info-light" AlignItems="@alignItems" JustifyContent="@justifyContent" Gap="@gap">
+        <RadzenColumn Size="2" class="rz-background-color-info-lighter rz-color-on-info-lighter rz-text-align-center rz-p-2">Col1</RadzenColumn>
+        <RadzenColumn Size="2" class="rz-background-color-success-lighter rz-color-on-success-lighter rz-text-align-center rz-p-2" Style="height:60px">Col2</RadzenColumn>
+        <RadzenColumn Size="2" class="rz-background-color-warning-lighter rz-color-on-warning-lighter rz-text-align-center rz-p-2" Style="height:120px">Col3</RadzenColumn>
+        <RadzenColumn Size="2" class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-text-align-center rz-p-2" Style="height:180px">Col4</RadzenColumn>
+    </RadzenRow>
+</RadzenCard>
+
+@code {
+    AlignItems alignItems = AlignItems.Normal;
+    JustifyContent justifyContent = JustifyContent.Normal;
+    string gap = "1rem";
+}
\ No newline at end of file