From 38cc0ddd22c41f041e12e8b1b3772f2f91e20fe6 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Wed, 26 Jun 2024 13:46:59 +0900
Subject: [PATCH] borders

---
 .../Components/Layout/NavMenu.razor           |  6 ++++
 .../Components/Pages/Borders.razor            | 29 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 ComponentPractice/ComponentPractice/Components/Pages/Borders.razor

diff --git a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
index 7fa5c67..83695ff 100644
--- a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
+++ b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
@@ -37,6 +37,12 @@
                 <RadzenIcon Icon="face" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;Icon
             </NavLink>
         </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="borders">
+                <RadzenIcon Icon="aspect_ratio" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;Borders
+            </NavLink>
+        </div>
     </nav>
 </div>
 
diff --git a/ComponentPractice/ComponentPractice/Components/Pages/Borders.razor b/ComponentPractice/ComponentPractice/Components/Pages/Borders.razor
new file mode 100644
index 0000000..fbca6f6
--- /dev/null
+++ b/ComponentPractice/ComponentPractice/Components/Pages/Borders.razor
@@ -0,0 +1,29 @@
+@page "/borders"
+
+@rendermode RenderMode.InteractiveServer
+
+<RadzenText TextStyle="TextStyle.H5">Border Radius</RadzenText>
+<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" JustifyContent="JustifyContent.Center" class="rz-p-12">
+    <RadzenButton Text=".rz-border-radius (theme's default)" class="rz-border-radius" />
+    <RadzenButton Text=".rz-border-radius-3" class="rz-border-radius-3" />
+    <RadzenButton Text=".rz-border-radius-5" class="rz-border-radius-5" />
+    <RadzenButton Text=".rz-border-radius-10" class="rz-border-radius-10" />
+</RadzenStack>
+
+<RadzenText TextStyle="TextStyle.H5">Border Utility</RadzenText>
+<RadzenStack Orientation="Orientation.Vertical" Wrap="FlexWrap.Wrap" JustifyContent="JustifyContent.Center" class="rz-p-12">
+    <RadzenText class="rz-border-primary" Text=".rz-border-primary" />
+    <RadzenText class="rz-border-secondary" Text=".rz-border-secondary" />
+</RadzenStack>
+
+<RadzenStack Orientation="Orientation.Vertical" Wrap="FlexWrap.Wrap" JustifyContent="JustifyContent.Center" class="rz-p-12">
+    <RadzenText class="rz-border-white" Text=".rz-border-white" />
+    <RadzenText class="rz-border-base-200" Text=".rz-border-base-200" />
+    <RadzenText class="rz-border-base-400" Text=".rz-border-base-400" />
+    <RadzenText class="rz-border-base-800" Text=".rz-border-base-800" />
+    <RadzenText class="rz-border-black" Text=".rz-border-black" />
+</RadzenStack>
+
+@code {
+
+}