layout row

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>

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";
+}