Skip to content

Commit 54f2686

Browse files
dvoiturondvoituron
authored
[dev-v5] Update the FluentLayout component (#3743)
1 parent dc030c0 commit 54f2686

34 files changed

+1036
-466
lines changed

‎examples/Demo/FluentUI.Demo.Client/DebugPages/DebugLayout.razor

Lines changed: 0 additions & 130 deletions
This file was deleted.

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/Layout/DebugPages/DebugLayout.razor

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
@page "/Layout/Debug"
2+
@using Microsoft.AspNetCore.Components.Rendering
3+
4+
<h1>Layout Debug Page</h1>
5+
6+
<div style="margin: 24px;">
7+
8+
@_renderOptions
9+
10+
<FluentTextArea @bind-Value="@HamburgerContent" Label="Hamburger content" />
11+
12+
<FluentStack Margin="@Margin.Vertical2">
13+
View: @(MobileView ? "📱 Mobile" : "💻 Desktop")
14+
<FluentSpacer />
15+
Opened: @Opened
16+
</FluentStack>
17+
18+
<div style="resize: horizontal; overflow: hidden;">
19+
<FluentLayout GlobalScrollbar="@GlobalScrollbar" Height="400px" Style="@CommonStyles.NeutralBorder1" OnBreakpointEnter="@(e => MobileView = e)" MenuDeferredLoading="@MenuDeferredLoading">
20+
21+
@if (Header.Visible)
22+
{
23+
<!-- Header -->
24+
<FluentLayoutItem Area="@LayoutArea.Header" Sticky="@Header.Sticky">
25+
26+
<!-- Hamburger menu -->
27+
<FluentLayoutHamburger OnOpened="@(e => Opened = e.Opened)"
28+
ChildContent="@(string.IsNullOrWhiteSpace(HamburgerContent) ? null : builder => { builder.AddMarkupContent(0, HamburgerContent); })" />
29+
30+
<FluentText Weight="TextWeight.Bold" Size="TextSize.Size400">
31+
Microsoft Demo
32+
</FluentText>
33+
<FluentSpacer />
34+
<FluentButton Appearance="ButtonAppearance.Primary" Shape="ButtonShape.Rounded">
35+
Sign in
36+
</FluentButton>
37+
38+
<!-- Second Hamburger menu -->
39+
<FluentLayoutHamburger OnOpened="@(e => Opened = e.Opened)"
40+
ChildContent="@(string.IsNullOrWhiteSpace(HamburgerContent) ? null : builder => { builder.AddMarkupContent(0, HamburgerContent); })" />
41+
42+
</FluentLayoutItem>
43+
}
44+
45+
@if (Menu.Visible)
46+
{
47+
<!-- Menu -->
48+
<FluentLayoutItem Area="@LayoutArea.Menu" Sticky="@Menu.Sticky"
49+
Width="150px" Padding="@Padding.All2"
50+
Style="border-right: var(--strokeWidthThin) solid var(--colorNeutralStroke1);">
51+
52+
<FluentText Weight="TextWeight.Bold">Navigation</FluentText>
53+
@NavigationContent
54+
</FluentLayoutItem>
55+
}
56+
57+
@if (Content.Visible)
58+
{
59+
<!-- Content -->
60+
<FluentLayoutItem Area="@LayoutArea.Content" Padding="@Padding.All3">
61+
<FluentText Weight="TextWeight.Bold">Content</FluentText>
62+
@BodyContent
63+
</FluentLayoutItem>
64+
}
65+
66+
@if (Aside.Visible)
67+
{
68+
<!-- Aside -->
69+
<FluentLayoutItem Area="@LayoutArea.Aside" Width="120px" Sticky="Aside.Sticky"
70+
Style="padding: 8px; background-color: var(--colorBrandBackground2);">
71+
<FluentText Weight="TextWeight.Bold">News</FluentText>
72+
@AsideContent
73+
</FluentLayoutItem>
74+
}
75+
76+
@if (Footer.Visible)
77+
{
78+
<!-- Footer -->
79+
<FluentLayoutItem Area="@LayoutArea.Footer" Sticky="@Footer.Sticky">
80+
&copy; Microsoft @DateTime.Now.Year
81+
</FluentLayoutItem>
82+
}
83+
84+
</FluentLayout>
85+
</div>
86+
87+
</div>
88+
89+
<h1>Standalone Hamburger</h1>
90+
<FluentLayoutHamburger Visible="true"
91+
Icon="@(new Icons.Regular.Size20.LineHorizontal4().WithColor(Color.Primary))">
92+
Standalone Hamburger Content
93+
</FluentLayoutHamburger>
94+
95+
@code
96+
{
97+
protected void RenderOptions(RenderTreeBuilder __builder)
98+
{
99+
<table>
100+
<thead>
101+
<tr>
102+
<th>Area</th>
103+
<th>Visible</th>
104+
<th>Sticky</th>
105+
</tr>
106+
</thead>
107+
<tbody>
108+
<tr>
109+
<td>Global Scrollbar</td>
110+
<td><InputCheckbox @bind-Value="@(GlobalScrollbar)" /></td>
111+
</tr>
112+
<tr>
113+
<td>Menu Deferred Loading</td>
114+
<td><InputCheckbox @bind-Value="@(MenuDeferredLoading)" /></td>
115+
</tr>
116+
<tr>
117+
<td>Header</td>
118+
<td><InputCheckbox @bind-Value="@(Header.Visible)" /></td>
119+
<td><InputCheckbox @bind-Value="@(Header.Sticky)" /></td>
120+
</tr>
121+
<tr>
122+
<td>Menu</td>
123+
<td><InputCheckbox @bind-Value="@(Menu.Visible)" /></td>
124+
<td><InputCheckbox @bind-Value="@(Menu.Sticky)" /></td>
125+
</tr>
126+
<tr>
127+
<td>Content</td>
128+
<td><InputCheckbox @bind-Value="@(Content.Visible)" /></td>
129+
<td></td>
130+
</tr>
131+
<tr>
132+
<td>Aside</td>
133+
<td><InputCheckbox @bind-Value="@(Aside.Visible)" /></td>
134+
<td><InputCheckbox @bind-Value="@(Aside.Sticky)" /></td>
135+
</tr>
136+
<tr>
137+
<td>Footer</td>
138+
<td><InputCheckbox @bind-Value="@(Footer.Visible)" /></td>
139+
<td><InputCheckbox @bind-Value="@(Footer.Sticky)" /></td>
140+
</tr>
141+
</tbody>
142+
</table>
143+
}
144+
}

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/Layout/DebugPages/DebugLayout.razor.cs

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// ------------------------------------------------------------------------
2+
// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
3+
// ------------------------------------------------------------------------
4+
5+
using Microsoft.AspNetCore.Components;
6+
7+
namespace FluentUI.Demo.Client.Documentation.Components.Layout.DebugPages;
8+
9+
public partial class DebugLayout
10+
{
11+
private bool GlobalScrollbar = true;
12+
private bool MenuDeferredLoading;
13+
private string HamburgerContent = string.Empty;
14+
private readonly RenderFragment _renderOptions;
15+
private readonly Option Header = new() { Visible = true, Sticky = false };
16+
private readonly Option Menu = new() { Visible = true, Sticky = false };
17+
private readonly Option Content = new() { Visible = true, Sticky = false };
18+
private readonly Option Aside = new() { Visible = true, Sticky = false };
19+
private readonly Option Footer = new() { Visible = true, Sticky = false };
20+
21+
public bool MobileView { get; set; }
22+
public bool Opened { get; set; }
23+
24+
private class Option
25+
{
26+
public bool Visible { get; set; }
27+
public bool Sticky { get; set; }
28+
}
29+
30+
public DebugLayout()
31+
{
32+
_renderOptions = RenderOptions;
33+
}
34+
35+
private static readonly MarkupString NavigationContent = SampleData.Text.Titles.Take(20).ToMarkupList("li");
36+
private static readonly MarkupString BodyContent = SampleData.Text.LoremIpsum.Take(10).ToMarkupList("p");
37+
private static readonly MarkupString AsideContent = (MarkupString)SampleData.Text.LoremIpsum.ElementAt(2)[..200];
38+
}

0 commit comments

Comments
 (0)