Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Components Doc] use of new components tels FluentLayout, FluentHeader.. #888

Merged
merged 14 commits into from
Oct 27, 2023
Merged

[Components Doc] use of new components tels FluentLayout, FluentHeader.. #888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e5761c8
Update InputFileByCode.razor
tossnet Oct 18, 2023
e897ffc
Merge branch 'microsoft:dev' into dev
tossnet Oct 18, 2023
bcfb5d7
WIP update layout
Oct 23, 2023
526f7cd
use of new components tels FluentLayout, FluentHeader..
Oct 24, 2023
9d9d92b
Merge branch 'dev' into users/tossnet/new-layout
vnbaaij Oct 24, 2023
1dcd075
delete unused css
Oct 24, 2023
96f4155
changes based on comments
Oct 24, 2023
dd62746
Merge branch 'dev' into users/tossnet/new-layout
vnbaaij Oct 25, 2023
cd6e7c5
fixe the aside element regardless the Y scroll position
Oct 26, 2023
e524605
Merge branch 'users/tossnet/new-layout' of https://github.com/tossnet…
Oct 26, 2023
ce25c44
Merge branch 'dev' into users/tossnet/new-layout
vnbaaij Oct 27, 2023
d7300e9
improve Aside element
Oct 27, 2023
c0a4ccb
Merge branch 'users/tossnet/new-layout' of https://github.com/tossnet…
Oct 27, 2023
fe86d83
Merge branch 'dev' into users/tossnet/new-layout
vnbaaij Oct 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/Demo/Server/Pages/_Layout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
}
}
</style>
<link href="_content/FluentUI.Demo.Shared/css/site.css" rel="stylesheet" />
<link href="FluentUI.Demo.Server.styles.css" rel="stylesheet" />
<link href="_content/FluentUI.Demo.Shared/css/site.css" rel="stylesheet" />

<!-- Monaco editor -->
<link rel="stylesheet" data-name="vs/editor/editor.main" href="_content/Microsoft.Fast.Components.FluentUI/lib/monaco-editor/min/vs/editor/editor.main.min.css">
Expand Down
83 changes: 48 additions & 35 deletions examples/Demo/Shared/Shared/DemoMainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
@using Microsoft.AspNetCore.Components
@using System.Runtime.InteropServices
@namespace FluentUI.Demo.Shared
@inherits LayoutComponentBase

<PageTitle>Fluent UI Blazor components demo page</PageTitle>

<div id="container" @ref="container">
<header>
<div @ref="container">
<FluentLayout>
<FluentHeader>
<div class="logo" role="presentation" aria-hidden="true" itemprop="logo" itemscope="itemscope">
<svg xmlns="http://www.w3.org/2000/svg" width="108" height="23" viewBox="72 72 337 74" preserveAspectRatio="xMidYMin slice">
<g data-name="MS-symbol">
Expand All @@ -26,56 +26,69 @@
</svg>

</div>
<FluentSpacer />
<div class="notifications">
<NotificationCenter />
</div>
<div class="settings">
<SiteSettings />
</div>
</header>
<main>
<input type="checkbox" id="menu-toggle" checked=@menuchecked @onclick=HandleChecked />
</FluentHeader>

<FluentStack Orientation="Orientation.Horizontal" Width="100%">
<label for="menu-toggle" class="menu-icon">
<FluentIcon Icon="Icons.Regular.Size24.Navigation" />
</label>
<nav>
</label>
<input type="checkbox" id="menu-toggle" checked=@menuchecked @onclick=HandleChecked />

<nav style="height: Calc(100vh - 90px);"
onclick="document.getElementById('menu-toggle').click()">
<DemoNavMenu />
</nav>
<div class="content">
<article id="article">

<FluentMessageBarContainer Section="@App.MESSAGES_TOP" />

<ErrorBoundary @ref="errorBoundary">
<ChildContent>
<CascadingValue Value=@OnRefreshTableOfContents>
@Body
</CascadingValue>
</ChildContent>
<ErrorContent Context="ex">
<div class="blazor-error-boundary">@ex.Message</div>
</ErrorContent>
</ErrorBoundary>
</article>
<aside>
<TableOfContents @ref=_toc/>
<ConsoleLog />
</aside>
</div>
</main>
<FluentToastContainer MaxToastCount="10" />
<FluentDialogProvider />
<FluentTooltipProvider />
<footer>

<FluentBodyContent Style="height: Calc(100dvh - 90px);">
<div class="content">
<article id="article">

<FluentMessageBarContainer Section="@App.MESSAGES_TOP" />

<ErrorBoundary @ref="errorBoundary">
<ChildContent>
<CascadingValue Value=@OnRefreshTableOfContents>
@Body
</CascadingValue>
</ChildContent>
<ErrorContent Context="ex">
<div class="blazor-error-boundary">@ex.Message</div>
</ErrorContent>
</ErrorBoundary>
</article>
<aside>
<TableOfContents @ref=_toc />
<ConsoleLog />
</aside>

<FluentToastContainer MaxToastCount="10" />
<FluentDialogProvider />
<FluentTooltipProvider />

</div>
</FluentBodyContent>
</FluentStack>

<FluentFooter Style="@("height: 40px; color: white;")">
<div class="version">
<small>
Version: @_version
&nbsp;-&nbsp;
<a href="https://dotnet.microsoft.com/en-us/learn/aspnet/what-is-aspnet-core">Powered by @RuntimeInformation.FrameworkDescription</a>
</small>
</div>
<FluentSpacer />
<div class="copy">
<small>Microsoft © 2023. All rights reserved.</small>
</div>
</footer>
</FluentFooter>

</FluentLayout>
</div>
3 changes: 3 additions & 0 deletions examples/Demo/Shared/Shared/DemoMainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ namespace FluentUI.Demo.Shared;

public partial class DemoMainLayout : IAsyncDisposable
{
[Parameter]
public RenderFragment? Body { get; set; }

private OfficeColor _selectedColorOption;
private string? _version;

Expand Down
Loading