[Docs] Update homepage (#2324)
* A fresh coat of paint for the homepage. Plus some updates to the general doc pages * Try publish PR step * More moving things around * Some more changes to cotent. Hidding TOC for homepage. * Add some lines * Update GH workflow
This commit is contained in:
Vincent Baaij
GitHub
Родитель
33b4d3900b
Коммит
b8a84dd269
|
|
@ -138,3 +138,59 @@ jobs:
|
|||
continue-on-error: true
|
||||
with:
|
||||
path: CoverageReports/SummaryGithub.md
|
||||
deploy_demo:
|
||||
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
|
||||
runs-on: ubuntu-latest
|
||||
name: Build and Deploy Demo site
|
||||
env:
|
||||
DOTNET_CLI_TELEMETRY_OPTOUT: 1
|
||||
DOTNET_SKIP_FIRST_TIME_EXPERIENCE: 1
|
||||
DOTNET_NOLOGO: true
|
||||
DOTNET_GENERATE_ASPNET_CERTIFICATE: false
|
||||
DOTNET_ADD_GLOBAL_TOOLS_TO_PATH: false
|
||||
DOTNET_MULTILEVEL_LOOKUP: 0
|
||||
PROJECT: "examples/Demo/Client/FluentUI.Demo.Client.csproj"
|
||||
BUILD_ARCH: "Any CPU"
|
||||
BUILD_CONFIG: "Release"
|
||||
SKIP_DEPLOY_ON_MISSING_SECRETS: true
|
||||
steps:
|
||||
- name: Checkout source
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: .NET Setup SDKs
|
||||
uses: actions/setup-dotnet@v4
|
||||
with:
|
||||
dotnet-version: |
|
||||
8.0.x
|
||||
include-prerelease: true
|
||||
- name: .NET Builld
|
||||
run: dotnet build ${{ env.PROJECT }} -c ${{ env.BUILD_CONFIG }} -o publish -f net8.0 -r linux-x64 --self-contained=true -p:BuildNumber=$BUILD_NUMBER -p:SourceRevisionId=$GITHUB_SHA -p:ContinuousIntegrationBuild=true
|
||||
|
||||
- name: .NET Publish
|
||||
run: dotnet publish ${{ env.PROJECT }} -c ${{ env.BUILD_CONFIG }} -o publish -f net8.0 -r linux-x64 --self-contained=true -p:BuildNumber=$BUILD_NUMBER -p:SourceRevisionId=$GITHUB_SHA -p:ContinuousIntegrationBuild=true
|
||||
|
||||
- name: Deploy demo site to new Azure Static Web App
|
||||
id: builddeploy
|
||||
uses: Azure/static-web-apps-deploy@v1
|
||||
with:
|
||||
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLACK_PEBBLE_0DC79CB03 }}
|
||||
repo_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
action: "upload"
|
||||
app_location: "publish/wwwroot"
|
||||
api_location: "Api"
|
||||
output_location: "publish/wwwroot"
|
||||
skip_api_build: true
|
||||
skip_app_build: true
|
||||
production_branch: 'dev'
|
||||
|
||||
destroy:
|
||||
if: github.event_name == 'pull_request' && github.event.action == 'closed'
|
||||
runs-on: ubuntu-latest
|
||||
name: Close Pull Request Job
|
||||
steps:
|
||||
- name: Close Pull Request on new Azure Static Web App
|
||||
id: closepullrequest
|
||||
uses: Azure/static-web-apps-deploy@v1
|
||||
with:
|
||||
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLACK_PEBBLE_0DC79CB03 }}
|
||||
action: "close"
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
</PropertyGroup>
|
||||
<ItemGroup>
|
||||
<!-- For Sample Apps -->
|
||||
<PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.8.1" />
|
||||
<PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.9.0" />
|
||||
<PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.6.0" />
|
||||
<PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" version="4.8.0" />
|
||||
<PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" version="4.9.0" />
|
||||
|
||||
<!-- Build dependencies -->
|
||||
<PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="$(AspNetCoreVersion)" />
|
||||
|
|
|
|||
|
|
@ -46,15 +46,6 @@ EndProject
|
|||
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "eng", "eng", "{E7FD7A3C-3C34-4DF6-961F-D731B0164CE4}"
|
||||
EndProject
|
||||
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "pipelines", "pipelines", "{2A9638B8-C6D0-455C-B6B1-72D734664973}"
|
||||
ProjectSection(SolutionItems) = preProject
|
||||
eng\pipelines\azure-pipelines.yml = eng\pipelines\azure-pipelines.yml
|
||||
eng\pipelines\build-all-lib.yml = eng\pipelines\build-all-lib.yml
|
||||
eng\pipelines\build-core-lib.yml = eng\pipelines\build-core-lib.yml
|
||||
eng\pipelines\common-variables.yaml = eng\pipelines\common-variables.yaml
|
||||
eng\pipelines\compute-version-variables.ps1 = eng\pipelines\compute-version-variables.ps1
|
||||
eng\pipelines\update-assembly-version.ps1 = eng\pipelines\update-assembly-version.ps1
|
||||
eng\pipelines\version.yml = eng\pipelines\version.yml
|
||||
EndProjectSection
|
||||
EndProject
|
||||
Global
|
||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
@page "/BlazorHybrid"
|
||||
@using FluentUI.Demo.Shared.Pages.Home.Examples
|
||||
|
||||
<PageTitle>@App.PageTitle("Blazor Hybrid")</PageTitle>
|
||||
|
||||
<h1>Blazor Hybrid</h1>
|
||||
|
||||
<p>
|
||||
It is possible to use this library in your Blazor Hybrid projects. Setup is almost the same as described in the "Getting started" section above,
|
||||
however to get everything to work you'll need to take one extra step:
|
||||
</p>
|
||||
|
||||
<h3 id="temporary-workaround-for-mauiwpfwindows-forms-issues">Temporary workaround for MAUI/WPF/Windows Forms issues</h3>
|
||||
<p>
|
||||
Currently when using WebView to run Blazor (in all Hybrid variants), the web-components script is not imported automatically (see <a href="https://github.com/microsoft/fluentui-blazor/issues/404">#404</a>).
|
||||
There is also an issue with loading the custom event handlers that are being configured by the web-components script. Until these are fixed on the WebView side, there is
|
||||
a workaround available, namely to intercept '_framework/blazor.modules.json' and provide proper JS initializers (created by the build). The needed script is
|
||||
included in the general library script and needs to be included with a script tag <strong>before</strong> the <code>_framework/blazor.webview.js</code> script tag.
|
||||
</p>
|
||||
|
||||
<CodeSnippet Language="language-html">
|
||||
<script app-name="{NAME OF YOUR APP}" src="./_content/Microsoft.FluentUI.AspNetCore.Components/js/initializersLoader.webview.js"></script>
|
||||
<script src="_framework/blazor.webview.js"></script>
|
||||
</CodeSnippet>
|
||||
|
||||
<p>
|
||||
The <code>app-name</code> attribute needs to match your app's assembly name - the script uses 'app-name' to resolve the name of the file with initializers.
|
||||
The 'initializersLoader' part of the script replaces the standard <code>fetch</code> function with one which provides the correct file in place of the empty <code>blazor.modules.json</code>. <code>fetch</code> is restored to its original state once the <code>_framework/blazor.modules.json</code> request is intercepted.
|
||||
</p>
|
||||
<p>
|
||||
For more information regarding this bug, see issue <a href="https://github.com/dotnet/maui/issues/15234">15234</a> in the MAUI repo.
|
||||
</p>
|
||||
|
||||
|
|
@ -49,6 +49,20 @@
|
|||
A sort can be removed by right clicking on the header column (with exception of the default sort).
|
||||
</p>
|
||||
|
||||
<h2 if="usewithef">Using the DataGrid component with EF Core</h2>
|
||||
<p>
|
||||
If you want to use the <code>FluentDataGrid</code> with data provided through EF Core, you need to install an additional package so the
|
||||
grid knows how to resolve queries asynchronously for efficiency.
|
||||
</p>
|
||||
|
||||
<h3>Installation</h3>
|
||||
Install the package by running the command:
|
||||
<CodeSnippet>dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter</CodeSnippet>
|
||||
|
||||
<h3>Usage</h3>
|
||||
In your <code>Program.cs</code> file you need to add the following after the <code>builder.Services.AddFluentUIComponents();</code> line:
|
||||
<CodeSnippet Language="csharp">builder.Services.AddDataGridEntityFrameworkAdapter();</CodeSnippet>
|
||||
|
||||
<h2 id="example">Examples</h2>
|
||||
|
||||
<DemoSection Title="Get started" Component="@typeof(DataGridGetStarted)">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@using Microsoft.FluentUI.AspNetCore.Components
|
||||
|
||||
<FluentCard Width="400px" Height="250px">
|
||||
<FluentCard Width="350px" Height="250px">
|
||||
<h2>Hello World!</h2>
|
||||
<FluentButton Appearance="@Appearance.Accent">Click Me</FluentButton>
|
||||
</FluentCard>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,29 @@
|
|||
|
||||
<PageTitle>@App.PageTitle("Welcome")</PageTitle>
|
||||
|
||||
<h1>Welcome to the Fluent UI Blazor components library</h1>
|
||||
<div class="demopanel" style="margin: 1rem 0; padding: 2.5rem; text-align: center">
|
||||
|
||||
<FluentGrid Class="home" Justify="JustifyContent.FlexStart" Spacing="6">
|
||||
<FluentGridItem xs="12" sm="6">
|
||||
<h1>Welcome!</h1>
|
||||
<p>
|
||||
The Fluent UI Blazor library provides a robust and extensive set of <a href="https://blazor.net">Blazor</a> components. Some of those
|
||||
components are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the <a href="https://fluent2.microsoft.design/">Fluent Design System</a>
|
||||
or just make it easier to work with Fluent in general.
|
||||
</p>
|
||||
<p>
|
||||
To get up and running with the <code>Microsoft.FluentUI.AspNetCore.Components</code> library, see the "Getting Started" section below.
|
||||
</p>
|
||||
<h2>Introduction and getting started video</h2>
|
||||
<div class="youtube-responsive">
|
||||
<iframe src="https://www.youtube.com/embed/lUZ5mrg2Q8k" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<p style="margin-top: 0.5rem;">
|
||||
More videos on our <a href="/Videos">videos page</a>
|
||||
</p>
|
||||
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="6">
|
||||
<div class="demopanel" style="margin: 1rem 0; padding: 1.5rem; text-align: center">
|
||||
<p>This is the demo and documentation site for version <strong>@_version</strong> of the library. This version supports .NET 8 <strong>only</strong> </p>
|
||||
<br />
|
||||
<p>
|
||||
|
|
@ -13,234 +34,123 @@
|
|||
<a href="https://aka.ms/fluentui-blazor-v3/" target="_blank">Version 3.7.5</a><br />
|
||||
This version supports both .NET 6 (supported till November 12 2024) and .NET 7 (out of support since May 14 2024).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 id="introduction">Introduction</h2>
|
||||
<p>
|
||||
The <code>Microsoft.FluentUI.AspNetCore.Components</code> package provides a set of <a href="https://blazor.net">Blazor</a> components. Some of the
|
||||
components are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the Fluent Design System
|
||||
or make it easier to work with Fluent. To get up and running with the <code>Microsoft.FluentUI.AspNetCore.Components</code> library, see the 'Getting Started'' section below.
|
||||
</p>
|
||||
<p>
|
||||
The source for the library is hosted in the <a href="https://github.com/microsoft/fluentui-blazor">fluentui-blazor</a> repository at GitHub.
|
||||
</p>
|
||||
|
||||
<FluentGrid Justify="JustifyContent.Center">
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
<div class="youtube-title" style="overflow: unset;">Open at Microsoft - 2024</div>
|
||||
<div class="youtube-responsive">
|
||||
<iframe src="https://www.youtube.com/embed/lUZ5mrg2Q8k" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
<div class="youtube-title"></div>
|
||||
<div class="youtube-responsive">
|
||||
<iframe src="https://www.youtube.com/embed/jOv9ioCVDFU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
<div class="youtube-title"></div>
|
||||
<div class="youtube-responsive">
|
||||
<iframe src="https://www.youtube.com/embed/HTUemhV9W-M" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
<div class="youtube-title">ASP.NET Community Standup 2024</div>
|
||||
<div class="youtube-responsive">
|
||||
<iframe src="https://www.youtube.com/embed/1fveBAi6Q7I" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
<div class="youtube-title">.NET Conf 2023</div>
|
||||
<div class="youtube-responsive">
|
||||
<iframe src="https://www.youtube.com/embed/a0xOqNemRoY" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</FluentGridItem>
|
||||
</FluentGrid>
|
||||
|
||||
<h2 id="whatsnew">What's new?</h2>
|
||||
<p>
|
||||
If you are already up-and-running and upgrading from an earlier version of the library, please see the <a href="/WhatsNew">What's new'</a> section
|
||||
for information on (breaking) changes.
|
||||
</p>
|
||||
|
||||
<h2 id="getting-started">Getting Started</h2>
|
||||
<p>
|
||||
The easiest way to get started is by using our <a href="/Templates">templates</a>. To start using the Fluent UI Blazor components from scratch,
|
||||
you first need to install the main <a href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components/">Nuget package</a> in the
|
||||
project you want to use the components. You can use the NuGet package manager in your IDE for that or use the following command when using a CLI:
|
||||
</p>
|
||||
<CodeSnippet>dotnet add package Microsoft.FluentUI.AspNetCore.Components</CodeSnippet>
|
||||
|
||||
<h3>Scripts</h3>
|
||||
<p>
|
||||
As mentioned, we wrap the Fluent UI Web Components. These components are implemented in a script file which is included in the library itself
|
||||
and does not have to be downloaded or pulled from a CDN.
|
||||
</p>
|
||||
<p>
|
||||
It is dependant on what type of project you are creating, if the script needs to be added to your <code>index.html</code> or
|
||||
<code>App.razor</code> file. When using SSR, you will need to include the web components script. As there is no Blazor script being loaded/used,
|
||||
our script will also not get loaded.
|
||||
</p>
|
||||
<p>
|
||||
|
||||
In this situation, include the following in your App.razor:
|
||||
</p>
|
||||
<CodeSnippet><script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script></CodeSnippet>
|
||||
<p>
|
||||
If you later add interactivity, the Blazor script will kick in and load the web component script again but JavaScript will
|
||||
handle that gracefully by design.
|
||||
</p>
|
||||
<p>
|
||||
If you use the templates to create your project, inserting the script will be taken care of based on the choices you make when creating the
|
||||
application. By including the script in the library we can safeguard that you are always using the best matching script version.
|
||||
</p>
|
||||
|
||||
<h3>Styles</h3>
|
||||
<p>
|
||||
In order for this library to work as expected, you will need to add the composed scoped CSS file for the components. This can be done by
|
||||
adding the following line to the <code><head></code> section of your <code>index.html</code>, <code>_Layout.cshtml</code> or <code>App.razor</code> file in the
|
||||
project you installed the package:
|
||||
</p>
|
||||
<CodeSnippet><link href="{PROJECT_NAME}.styles.css" rel="stylesheet" /></CodeSnippet>
|
||||
<p>
|
||||
It is possible that the line is already there (but commented out).
|
||||
</p>
|
||||
<blockquote>
|
||||
<p><strong>IMPORTANT:</strong></p>
|
||||
<h2 id="whatsnew">What's new?</h2>
|
||||
<p>
|
||||
When you change the root namespace/assembly name of your project, you need to update the {PROJECT_NAME} in your copy of the code above accordingly.
|
||||
If you are already up-and-running and upgrading from an earlier version of the library, please go to the <a href="/WhatsNew">What's new</a> page
|
||||
for information on additions, fixes and (breaking) changes.
|
||||
</p>
|
||||
</blockquote>
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="6">
|
||||
<h2 id="getting-started">Getting Started</h2>
|
||||
<p>
|
||||
By far rhe easiest way to get started is by using our templates. Setting them up is quick and easy. See the <a href="/Templates">templates</a> page
|
||||
for instructions and usage.
|
||||
</p>
|
||||
<h3>Manual setup</h3>
|
||||
<p>
|
||||
To start using the Fluent UI Blazor components from scratch, you first need to install the main <a href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components/">Nuget package</a>
|
||||
in the project you want to use the components. You can use the NuGet package manager in your IDE for that or use the following command when using a CLI:
|
||||
</p>
|
||||
<CodeSnippet>dotnet add package Microsoft.FluentUI.AspNetCore.Components</CodeSnippet>
|
||||
|
||||
<h4>Reboot</h4>
|
||||
<p>
|
||||
Reboot is a collection of element-specific CSS changes in a single file to help kickstart building a site with the Fluent UI Blazor components.
|
||||
It provides an elegant, consistent, and simple baseline to build upon.
|
||||
</p>
|
||||
<p>
|
||||
If you want to use Reboot, you'll need to add to your <code>index.html</code>, <code>_Layout.cshtml</code> or <code>App.razor</code> file a
|
||||
line that includes the stylesheet (<code>.css</code> file). This can be done by adding the following line to the <code><head></code> section:
|
||||
<CodeSnippet Language="language-html"><link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" /></CodeSnippet>
|
||||
</p>
|
||||
<p>When using the templates to create your application, Reboot is already set-up for you.</p>
|
||||
<p>
|
||||
It is entirely possible to build a site without using Reboot. If you do not want to use Reboot and you used the templates as a starting point, just
|
||||
remove the following line from the <code>app.css</code> file (it is the first line in the file):
|
||||
</p>
|
||||
<CodeSnippet>@@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';</CodeSnippet>
|
||||
<p>
|
||||
Refer to the <a href="/CodeSetup">code setup</a> document to learn what else needs done to get up-and-running. This includes adding code to the
|
||||
<code>Program.cs</code> file so all necessary services are available and setup in the correct way.
|
||||
</p>
|
||||
</FluentGridItem>
|
||||
|
||||
<h3>Code setup</h3>
|
||||
<p>
|
||||
Please refer to the <a href="/CodeSetup">code setup</a> document to learn what needs to be included in your
|
||||
<code>Program.cs</code> file so that all necessary services are available and setup in the correct way.
|
||||
</p>
|
||||
<FluentGridItem xs="12" sm="6">
|
||||
<h3>Scripts</h3>
|
||||
<p>
|
||||
As mentioned, we wrap the Fluent UI Web Components for some of our compnents. The needed script is included in the library and will
|
||||
be loaded for you automatically by using Blazor's built-in capabilities. You do not need to download or pull the script from a CDN manually.
|
||||
</p>
|
||||
<p>
|
||||
Please refer to the <a href="/CodeSetup#script">script section</a> on the Code setup page for infomation on how to manually add the script to your pages (which should normally not be necessary).
|
||||
</p>
|
||||
|
||||
<h2 id="getting-started-by-using-project-templates">Getting started by using project templates</h2>
|
||||
<p>
|
||||
To make it easier to start a project that uses the Fluent UI Web Components for Blazor out of the box, we have created the
|
||||
<a target="top" href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates/">Microsoft.FluentUI.AspNetCore.Templates</a> template package.
|
||||
</p>
|
||||
<p>
|
||||
The package contains templates for creating Blazor Server and/or Blazor WebAssembly apps that mimic the regular Blazor
|
||||
templates with the Fluent UI components already set up (and all the Bootstrap styling removed). All components have been
|
||||
replaced with Fluent UI counterparts (and a few extra have been added). Please see the <a target="top" href="/Templates">documentation page</a>
|
||||
for more information.
|
||||
</p>
|
||||
<p>
|
||||
If you want to use icons and/or emoji with applications based on the templates, you still need to make some changes to the project. See the
|
||||
<a href="/IconsAndEmoji"> Icons and Emoji</a> page for more information.
|
||||
</p>
|
||||
<h3>Styles</h3>
|
||||
<p>
|
||||
In order for this library to work as expected, it expects the composed scoped CSS file to be loaded. When using our templates, this will already
|
||||
be set up.
|
||||
</p>
|
||||
<p>
|
||||
Please refer to the <a href="/CodeSetup#styles">styles section</a> on the Code setup page for more information on:
|
||||
<ul>
|
||||
<li>Manually adding the style link</li>
|
||||
<li>Our <code>Reboot.css</code> file</li>
|
||||
<li>Possible configuration steps needed when combining the library with other CSS frameworks (like <i>Tailwind</i>)</li>
|
||||
</ul>
|
||||
|
||||
</p>
|
||||
</FluentGridItem>
|
||||
|
||||
<FluentGridItem xs="12" sm="8">
|
||||
<h2 id="using-the-fluentui-web-components">Using the Fluent UI Blazor components</h2>
|
||||
<p>With the package installed, you can begin using the Fluent UI Blazor components in the same way as any other Blazor component. Just be sure to add the following using statement to your views:</p>
|
||||
<CodeSnippet>@@using Microsoft.FluentUI.AspNetCore.Components</CodeSnippet>
|
||||
|
||||
|
||||
<h2 id="using-the-fluentui-web-components">Using the Fluent UI Blazor components</h2>
|
||||
<p>With the package installed, you can begin using the Fluent UI Blazor components in the same way as any other Blazor component. Just be sure to add the following using statement to your views:</p>
|
||||
<CodeSnippet>@@using Microsoft.FluentUI.AspNetCore.Components</CodeSnippet>
|
||||
<blockquote>
|
||||
<p><strong>Tip</strong></p>
|
||||
<p>You can add <code>@@using Microsoft.FluentUI.AspNetCore.Components.</code> to the namespace collection in <code>_Imports.razor</code>, so you don't have to add it to every razor page that uses one of the components.</p>
|
||||
</blockquote>
|
||||
|
||||
<DemoSection Title="Simple components example" Component="@typeof(HomeSimpleExample)" ShowDownloads=false HideAllButExample="true">
|
||||
<DemoSection Title="Simple components example" Component="@typeof(HomeSimpleExample)" ShowDownloads=false HideAllButExample="true">
|
||||
<Description>
|
||||
<p>Here's a small example of a <code>FluentCard</code> with a <code>FluentButton</code> (which does not do anything) that uses Fluent's "Accent" appearance.</p>
|
||||
</Description>
|
||||
<ChildContent>
|
||||
<CodeSnippet>
|
||||
@@using Microsoft.FluentUI.AspNetCore.Components.
|
||||
@@using Microsoft.FluentUI.AspNetCore.Components.
|
||||
|
||||
<FluentCard Width="400px" Height="250px">
|
||||
<FluentCard Width="350px" Height="250px">
|
||||
<h2>Hello World!</h2>
|
||||
<FluentButton Appearance="@@Appearance.Accent">Click Me</FluentButton>
|
||||
</FluentCard></CodeSnippet>
|
||||
</FluentCard>
|
||||
</CodeSnippet>
|
||||
<p>Renders as:</p>
|
||||
</ChildContent>
|
||||
</DemoSection>
|
||||
|
||||
<blockquote>
|
||||
<p><strong>Tip</strong></p>
|
||||
<p>You can add <code>@@using Microsoft.FluentUI.AspNetCore.Components.</code> to the namespace collection in <code>_Imports.razor</code>, so you don't have to add it to every razor page that uses one of the components.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2 id="configuring-the-design-system">Configuring the Design System</h2>
|
||||
<p>
|
||||
</DemoSection>
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
<h2 id="configuring-the-design-system">Configuring the Design System</h2>
|
||||
<p>
|
||||
The Fluent UI Blazor components are built on FAST's Adaptive UI technology, which enables design customization and personalization, while
|
||||
automatically maintaining accessibility. This is accomplished through setting various "Design Tokens". The library exposes all of
|
||||
the available Design Tokens, which you can use both from code as in a declarative way in your <code>.razor</code> pages. The three different
|
||||
ways of working with design tokens are described in the <a target="top" href="/DesignTokens">design tokens</a> page.
|
||||
</p>
|
||||
automatically maintaining accessibility. This is accomplished through setting various "Design Tokens".
|
||||
</p>
|
||||
<p>
|
||||
The library exposes all of the available Design Tokens, which you can use both from code as in a declarative way in your <code>.razor</code> pages. The different
|
||||
ways of working with design tokens are described on the <a href="/DesignTokens">design tokens</a> page.
|
||||
</p>
|
||||
|
||||
<h2 id="blazor-hybrid">Blazor Hybrid</h2>
|
||||
<p>
|
||||
It is possible to use this library in your Blazor Hybrid projects. Setup is almost the same as described in the "Getting started" section above,
|
||||
however to get everything to work you'll need to take one extra step:
|
||||
</p>
|
||||
</FluentGridItem>
|
||||
|
||||
<h3 id="temporary-workaround-for-mauiwpfwindows-forms-issues">Temporary workaround for MAUI/WPF/Windows Forms issues</h3>
|
||||
<p>
|
||||
Currently when using WebView to run Blazor (in all Hybrid variants), the web-components script is not imported automatically (see <a href="https://github.com/microsoft/fluentui-blazor/issues/404">#404</a>).
|
||||
There is also an issue with loading the custom event handlers that are being configured by the web-components script. Until these are fixed on the WebView side, there is
|
||||
a workaround available, namely to intercept '_framework/blazor.modules.json' and provide proper JS initializers (created by the build). The needed script is
|
||||
included in the general library script and needs to be included with a script tag <strong>before</strong> the <code>_framework/blazor.webview.js</code> script tag.
|
||||
</p>
|
||||
<FluentGridItem xs="12" sm="6">
|
||||
<h2 id="support">Support</h2>
|
||||
<p>
|
||||
The Microsoft Fluent UI Blazor library is an open-source project. The source code (including this demo site) is hosted in the <a href="https://github.com/microsoft/fluentui-blazor">fluentui-blazor</a>
|
||||
repository at GitHub.
|
||||
</p>
|
||||
<p>
|
||||
The library is <strong>not</strong> an official part of ASP.NET Core. This means the packages are <strong>not</strong> officially
|
||||
supported and we are not committed to shipping updates as part of any official .NET updates. It is built and maintained by Microsoft employees
|
||||
(and external contributors) and offers support, like most other open-source projects, on a <strong>best effort</strong> base through
|
||||
the GitHub repository <strong>only</strong>. No support is offered through any of Microsoft's official support channels.
|
||||
</p>
|
||||
</FluentGridItem>
|
||||
|
||||
<CodeSnippet Language="language-html"><script app-name="{NAME OF YOUR APP}" src="./_content/Microsoft.FluentUI.AspNetCore.Components/js/initializersLoader.webview.js"></script>
|
||||
<script src="_framework/blazor.webview.js"></script></CodeSnippet>
|
||||
|
||||
<p>
|
||||
The <code>app-name</code> attribute needs to match your app's assembly name - the script uses 'app-name' to resolve the name of the file with initializers.
|
||||
The 'initializersLoader' part of the script replaces the standard <code>fetch</code> function with one which provides the correct file in place of the empty <code>blazor.modules.json</code>. <code>fetch</code> is restored to its original state once the <code>_framework/blazor.modules.json</code> request is intercepted.
|
||||
</p>
|
||||
<p>
|
||||
For more information regarding this bug, see issue <a href="https://github.com/dotnet/maui/issues/15234">15234</a> in the MAUI repo.
|
||||
</p>
|
||||
|
||||
<h2>Use the DataGrid component with EF Core</h2>
|
||||
<p>
|
||||
If you want to use the <code>FluentDataGrid</code> with data provided through EF Core, you need to install an additional package so the
|
||||
grid knows how to resolve queries asynchronously for efficiency.
|
||||
</p>
|
||||
|
||||
<h3>Installation</h3>
|
||||
Install the package by running the command:
|
||||
<CodeSnippet>dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter</CodeSnippet>
|
||||
|
||||
<h3>Usage</h3>
|
||||
In your <code>Program.cs</code> file you need to add the following after the <code>builder.Services.AddFluentUIComponents();</code> line:
|
||||
<CodeSnippet Language="csharp">builder.Services.AddDataGridEntityFrameworkAdapter();</CodeSnippet>
|
||||
|
||||
<h2 id="support">Support</h2>
|
||||
<p>
|
||||
The Microsoft Fluent UI Blazor library is an open source project and is <strong>not</strong> an official part of ASP.NET Core, which means it’s <strong>not</strong> officially
|
||||
supported and isn’t committed to ship updates as part of any official .NET updates. It is built and maintained by Microsoft employees (<strong>and</strong> other contributors)
|
||||
and offers support, like most other open source projects, on a best effort base through the GitHub repository <strong>only</strong>.
|
||||
</p>
|
||||
|
||||
|
||||
<h2 id="joining-the-community">Joining the Community</h2>
|
||||
<p>
|
||||
<FluentGridItem xs="12" sm="6">
|
||||
<h2 id="joining-the-community">Joining the Community</h2>
|
||||
<p>
|
||||
Looking to get answers to questions or engage with us in real-time?
|
||||
<ul>
|
||||
<li>Join the DotNetEvolution server and chat with us in real-time on <a target="_blank" href="https://discord.gg/M5cBTfp6J2">Discord</a>. You can also find us on <a target="_blank" href="https://app.gitter.im/#/room/#fluentui-blazor:gitter.im">Gitter</a>.</li>
|
||||
<li>Submit requests and issues on <a target="top" href="https://github.com/microsoft/fluentui-blazor/issues/new/choose">GitHub</a> <strong>only</strong>.</li>
|
||||
<li>Contribute by helping out on some of our recommended first issues on <a target="top" href="https://github.com/microsoft/fluentui-blazor/labels/community:good-first-issue">GitHub</a>.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>We look forward to building an amazing open source community with you!</p>
|
||||
|
||||
</p>
|
||||
<p>We look forward to building an amazing open source community with you!</p>
|
||||
</FluentGridItem>
|
||||
</FluentGrid>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
@page "/Videos"
|
||||
|
||||
@using FluentUI.Demo.Shared.Pages.Home.Examples
|
||||
|
||||
<PageTitle>@App.PageTitle("Welcome")</PageTitle>
|
||||
|
||||
<h1>Videos</h1>
|
||||
|
||||
<p>Every now and then, we do guests appearances in videos to promote the library and show a bit more on how it works. See the overview below for our most recent appearances</p>
|
||||
|
||||
<FluentGrid Spacing="7">
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
<div class="youtube-title">ASP.NET Community Standup 2024</div>
|
||||
<div class="youtube-responsive">
|
||||
<iframe src="https://www.youtube.com/embed/1fveBAi6Q7I" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
<div class="youtube-title" style="overflow: unset;">Open at Microsoft - 2024</div>
|
||||
<div class="youtube-responsive">
|
||||
<iframe src="https://www.youtube.com/embed/lUZ5mrg2Q8k" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
<div class="youtube-title"></div>
|
||||
<div class="youtube-responsive">
|
||||
<iframe src="https://www.youtube.com/embed/jOv9ioCVDFU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
<div class="youtube-title"></div>
|
||||
<div class="youtube-responsive">
|
||||
<iframe src="https://www.youtube.com/embed/HTUemhV9W-M" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
<div class="youtube-title">.NET Conf 2023</div>
|
||||
<div class="youtube-responsive">
|
||||
<iframe src="https://www.youtube.com/embed/a0xOqNemRoY" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
</FluentGridItem>
|
||||
<FluentGridItem xs="12" sm="4">
|
||||
</FluentGridItem>
|
||||
</FluentGrid>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<p>
|
||||
If you want to use Reboot, like this demo site, you'll need to include it in your <code>App.razor</code> or <code>index.html</code> file like this:
|
||||
<CodeSnippet Language="language-html"><link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" /></CodeSnippet>
|
||||
If you are using our <a href="/Templates">Templates</a> package, this is already set up for you. You can
|
||||
If you are creating a site by using our <a href="/Templates">Templates</a> package, this is already set up for you. You can
|
||||
<FluentAnchor Appearance=Appearance.Hypertext Href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" Download="reboot.css">download the file</FluentAnchor>
|
||||
to see what's inside.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,23 @@
|
|||
<h1><FluentIcon Value="@(new Icons.Regular.Size24.Classification())" /> Project templates</h1>
|
||||
|
||||
<p>
|
||||
To make it easier to start a project that uses the Fluent UI Blazor components out of the box, we have created the <a href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates/">Microsoft.FluentUI.AspNetCore.Templates</a>
|
||||
package. The package contains templates for creating a Blazor Web App or Blazor WebAssembly Standalone App. They mimic the standard Blazor templates and
|
||||
offer the exact same options (including authentication) when creating a new project either in Visual Studio or with a CLI.
|
||||
To make it easier to start a project that uses the Fluent UI Web Components for Blazor out of the box, we have created the
|
||||
<a target="top" href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates/">Microsoft.FluentUI.AspNetCore.Templates</a> template package.
|
||||
</p>
|
||||
<p>
|
||||
The Fluent UI Blazor library package is already added to the new project and all standard components have been replaced with Fluent UI counterparts
|
||||
(and a few extra have been added). All Bootstrap styling has been removed.</p>
|
||||
The package contains templates for creating Blazor Server and/or Blazor WebAssembly apps which mimic the regular Blazor
|
||||
templates. The Fluent UI Blazor components are already fully set up. If you choose to use the sample pages when creating a project,
|
||||
all components have been replaced with Fluent UI counterparts (and a few extra have been added). All Bootstrap styling is removed of course as well.
|
||||
</p>
|
||||
<p>
|
||||
If you want to use the Icon component with applications based on the templates, we have already included and set up the Icon package for you.
|
||||
The full collection of approximately 12 thousand icons in different variants and sizes can be browsed and searched from the <a href="/Icon">Icon</a> page.
|
||||
</p>
|
||||
<p>
|
||||
If you want to use the Emoji component with applications based on the templates, you still need to make some changes to the project. See the
|
||||
<a href="/IconsAndEmoji"> Icons and Emoji</a> page for more information.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The pages created from these templates will appear like the following based on the type of project and options selected during creation.
|
||||
</p>
|
||||
|
|
@ -30,13 +40,13 @@
|
|||
|
||||
<h2 id="installation">Installation</h2>
|
||||
<p>
|
||||
Install the templates by running this command:
|
||||
You can install the templates by running the following command:
|
||||
</p>
|
||||
|
||||
<CodeSnippet>dotnet new install Microsoft.FluentUI.AspNetCore.Templates</CodeSnippet>
|
||||
|
||||
<p>
|
||||
The current version can be found on the <a href="https://www.nuget.org/packages/Microsoft.FLuentUI.AspNetCore.Templates/" rel="noopener noreferrer nofollow">NuGet page</a>.
|
||||
The current version can be found on the <a href="https://www.nuget.org/packages/Microsoft.FLuentUI.AspNetCore.Templates/" rel="noopener noreferrer nofollow">NuGet aite</a>.
|
||||
</p>
|
||||
|
||||
<h2 id="usage">Usage</h2>
|
||||
|
|
|
|||
|
|
@ -64,10 +64,14 @@
|
|||
</CascadingValue>
|
||||
|
||||
</article>
|
||||
|
||||
@if (NavigationManager.Uri != NavigationManager.BaseUri)
|
||||
{
|
||||
<aside>
|
||||
<TableOfContents @ref=_toc />
|
||||
<ConsoleLog />
|
||||
</aside>
|
||||
}
|
||||
|
||||
<FluentToastProvider MaxToastCount="10" />
|
||||
<FluentDialogProvider />
|
||||
|
|
|
|||
|
|
@ -79,6 +79,18 @@ public class DemoNavProvider
|
|||
title: "Icons and Emoji"
|
||||
),
|
||||
|
||||
new NavLink(
|
||||
href: "/Videos",
|
||||
icon: new Icons.Regular.Size20.Video(),
|
||||
title: "Videos"
|
||||
),
|
||||
|
||||
new NavLink(
|
||||
href: "/BlazorHybrid",
|
||||
icon: new Icons.Regular.Size20.Phone(),
|
||||
title: "Blazor Hybrid / MAUI"
|
||||
),
|
||||
|
||||
new NavGroup(
|
||||
icon: new Icons.Regular.Size20.SettingsCogMultiple(),
|
||||
title: "Services",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@ blockquote p:last-child {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.home div[sm="4"], .home div[sm="6"], .home div[sm="8"] {
|
||||
border-bottom: 1px solid var(--neutral-stroke-divider-rest) !important;
|
||||
}
|
||||
|
||||
.siteheader {
|
||||
background-color: var(--neutral-layer-4) !important;
|
||||
border-bottom: calc(var(--stroke-width) * 2px) solid var(--accent-fill-rest);
|
||||
|
|
|
|||
|
|
@ -38,11 +38,11 @@ dotnet add package Microsoft.FluentUI.AspNetCore.Components.Emoji
|
|||
```
|
||||
|
||||
### Script
|
||||
As mentioned, we wrap the **Fluent UI Web Components** which are implemented in a script file. This **file is included in the library** itself and does not have to be downloaded or pulled from a CDN.
|
||||
We wrap the **Fluent UI Web Components**, which are implemented in a script file, for quite a few of our components. This **file is included in the library** itself and does not have to be downloaded or pulled from a CDN.
|
||||
|
||||
> By including the script in the library we can safeguard that you are always using the best matching script version.
|
||||
|
||||
When using **SSR (Static Server Rendering)**, you will need to include the web components script in your `App.razor`. As there is no Blazor script being loaded/used, our script will also not get loaded.
|
||||
In some cases, like when using .NET 8's new **SSR (Static Server Rendering)** rendermode, it might be necessary to include our library script in your `App.razor` manually. You can do so as follows:
|
||||
|
||||
```html
|
||||
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
|
||||
|
|
@ -51,8 +51,19 @@ If you would later add interactivity, the Blazor script will kick in and try to
|
|||
|
||||
### Styles
|
||||
|
||||
The styles used by FluentUI are included in the package.
|
||||
You don't need to do anything to include them in your project.
|
||||
The styles used by FluentUI are included in the package. You normally don't need to do anything to include them in your project.
|
||||
|
||||
If needed, you can add the following line to the `<head>`> section of your `index.html`, `_Layout.cshtml` or `App.razor` file in the
|
||||
project you installed the package in:
|
||||
|
||||
```html
|
||||
<link href="{PROJECT_NAME}.styles.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
It is possible that the line is already there (but commented out).
|
||||
|
||||
>**IMPORTANT:**
|
||||
>When you change the root namespace/assembly name of your project, you need to update the {PROJECT_NAME} in your code accordingly.
|
||||
|
||||
You can always add your own styles, using the `class` or `style` attribute on the components.
|
||||
By default, the classes are organised and checked by the component itself (in particular by checking that the class names are valid).
|
||||
|
|
@ -66,8 +77,9 @@ builder.Services.AddFluentUIComponents(options =>
|
|||
});
|
||||
```
|
||||
|
||||
### Reboot (optional)
|
||||
#### Reboot
|
||||
**Reboot** is a collection of element-specific CSS changes in a single file to help kick-start building a site with the **Fluent UI Blazor** components for Blazor. It provides an elegant, consistent, and simple baseline to build upon.
|
||||
The library automatically includes reboot through the
|
||||
|
||||
If you want to use **Reboot**, you'll need to add to your `app.razor`, `index.html` or `_Layout.cshtml` file a line that includes the stylesheet (`.css` file). This can be done by adding the following line to the `<head>` section:
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче