grid

BlazorFluentUI/Components/App.razor

@@ -8,6 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
     <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="/fluentcustom.css" />
     <link rel="stylesheet" href="app.css" />
     <link rel="stylesheet" href="BlazorFluentUI.styles.css" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -14,6 +14,7 @@
                 <FluentNavLink Href="layoutheader" Icon="@(new Icons.Regular.Size20.DocumentHeader())" IconColor="Color.Accent">Header</FluentNavLink>
                 <FluentNavLink Href="layoutfooter" Icon="@(new Icons.Regular.Size20.DocumentFooter())" IconColor="Color.Accent">Footer</FluentNavLink>
                 <FluentNavLink Href="layoutbodycontent" Icon="@(new Icons.Regular.Size20.ContentViewGallery())" IconColor="Color.Accent">BodyContent</FluentNavLink>
+                <FluentNavLink Href="layoutgrid" Icon="@(new Icons.Regular.Size20.Grid())" IconColor="Color.Accent">Grid</FluentNavLink>
             </FluentNavGroup>
         </FluentNavMenu>
     </nav>

BlazorFluentUI/Components/Pages/LayoutGrid.razor

@@ -0,0 +1,119 @@
+@page "/layoutgrid"
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+
+@rendermode RenderMode.InteractiveServer
+
+<style>
+    .round-edge {
+        border-radius: 10px;
+        border-style: solid;
+        border-width: 1px
+    }
+</style>
+
+<FluentLabel Typo="Typography.H3">Grid</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentGrid</code> component helps keeping layout consistent across various screen resolutions and sizes.
+</FluentLabel>
+<FluentCard Width="auto" Height="auto">
+    <FluentStack Class="mb-3" VerticalAlignment="VerticalAlignment.Center" Wrap="true">
+        <FluentStack Orientation="Orientation.Horizontal">
+            <FluentLabel>Justify</FluentLabel>
+            <FluentSelect Items=@(Enum.GetValues<JustifyContent>())
+                          OptionValue="@(c => c.ToAttributeValue())"
+                          TOption="JustifyContent"
+                          Position="SelectPosition.Below"
+                          @bind-SelectedOption="@justification" />
+        </FluentStack>
+        <FluentStack Orientation="Orientation.Horizontal">
+            <FluentLabel>Spacing</FluentLabel>
+            <FluentSlider class="fluentslider-300" @bind-Value="@spacing" Min="0" Max="10" Step="1" />
+        </FluentStack>
+    </FluentStack>
+
+    <FluentGrid class="p-3 round-edge" Justify="@justification" Spacing="@spacing"
+                OnBreakpointEnter="@OnBreakpointEnterHandler" 
+                AdaptiveRendering="true">
+        <FluentGridItem xs="12">
+            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
+                xs="12"
+            </FluentLabel>
+        </FluentGridItem>
+        <FluentGridItem xs="12" sm="6" HiddenWhen="GridItemHidden.SmAndDown">
+            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
+                xs="12" sm="6" HiddenWhen="GridItemHidden.SmAndDown"
+            </FluentLabel>
+        </FluentGridItem>
+        <FluentGridItem xs="12" sm="6">
+            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
+                xs="12" sm="6"
+            </FluentLabel>
+        </FluentGridItem>
+        <FluentGridItem xs="6" sm="3">
+            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
+                xs="6" sm="3"
+            </FluentLabel>
+        </FluentGridItem>
+        <FluentGridItem xs="6" sm="3">
+            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
+                xs="6" sm="3"
+            </FluentLabel>
+        </FluentGridItem>
+        <FluentGridItem xs="6" sm="3">
+            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
+                xs="6" sm="3"
+            </FluentLabel>
+        </FluentGridItem>
+        <FluentGridItem xs="6" sm="3">
+            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
+                xs="6" sm="3"
+            </FluentLabel>
+        </FluentGridItem>
+        <FluentGridItem xs="3">
+            <FluentLabel class="round-edge" Alignment="HorizontalAlignment.Center">
+                xs="3"
+            </FluentLabel>
+        </FluentGridItem>
+    </FluentGrid>
+
+    <FluentLabel>@message</FluentLabel>
+</FluentCard>
+
+<FluentLabel Typo="Typography.H3">Breakpoints</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    Breakpoints help you control your layout base on widows size.
+</FluentLabel>
+<FluentCard Width="auto" Height="auto">
+    <FluentLabel>
+        Extra Small <code>xd</code> &lt;600px, Small to large phone
+    </FluentLabel>
+    <FluentLabel>
+        Small <code>sm</code> &lt;960px, Small to medium tablet
+    </FluentLabel>
+    <FluentLabel>
+        Medium <code>md</code> &lt;1280px, Large tablet to laptop
+    </FluentLabel>
+    <FluentLabel>
+        Large <code>lg</code> &lt;1920px, Desktop
+    </FluentLabel>
+    <FluentLabel>
+        Extra Large <code>xl</code> &lt;2560px, HD and 4k
+    </FluentLabel>
+    <FluentLabel>
+        Extra Extra Large <code>xxl</code> =&gt;2560px, 4k+ and ultra-wide
+    </FluentLabel>
+    
+</FluentCard>
+
+@code {
+    JustifyContent justification = JustifyContent.FlexStart;
+    int spacing = 3;
+    string message = "Message: ";
+
+    void OnBreakpointEnterHandler(GridItemSize size)
+    {
+        message = $"Message: Page size {size}";
+    }
+}

BlazorFluentUI/wwwroot/fluentcustom.css

@@ -0,0 +1,4 @@
+.fluentslider-300 {
+	max-width: 300px;
+	margin-top: 10px
+}