Skip to content

Commit

Permalink
merge main
Browse files Browse the repository at this point in the history
  • Loading branch information
@vnbaaij
vnbaaij committed Dec 20, 2023
2 parents 39499e3 + ff91c1d commit 83aa7bb
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 76 deletions.
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/Design/DesignThemePage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@

<CodeSnippet Language="xml">
@(@"<script src=""_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js"" type=""text/javascript""></script>
<loading-theme storage-name=""theme""></loading-theme>")"
<loading-theme storage-name=""theme""></loading-theme>")
</CodeSnippet>

<p>
Expand Down
7 changes: 7 additions & 0 deletions examples/Demo/Shared/Pages/Home/Home.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,13 @@
<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>
<blockquote>
<strong>
We are aware that the necessary file is missing from the 4.2.0 package and are working on a fix. In the meantime, if you
need a workaround for this, copy the contents of https://github.com/microsoft/fluentui-blazor/blob/dev/src/Core/wwwroot/js/initializersLoader.webview.js
to a file in your project and use that file in the script tag described above.
</strong>
</blockquote>


<h2>Use the DataGrid component with EF Core</h2>
Expand Down
151 changes: 76 additions & 75 deletions examples/Demo/Shared/Pages/TemplatesPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,123 +2,124 @@
<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 Web Components for Blazor 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.
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 href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates/">Microsoft.FluentUI.AspNetCore.Templates</a>
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). The pages you get after creating a project with one of the templates look like this:
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). The pages you get after creating a project with one of the templates look like this:
</p>
<p style="display: flex; flex-direction:column; align-items:center">
<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-home.png" alt="Home page for site created Fluent UI templates" />
<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-counter.png" alt="Counter page for site created Fluent UI templates" />
<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-weather.png" alt="Fetch data page for site created Fluent UI templates" />
<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-home.png" alt="Home page for site created Fluent UI templates" />
<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-counter.png" alt="Counter page for site created Fluent UI templates" />
<img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-weather.png" alt="Fetch data page for site created Fluent UI templates" />
</p>


<h2 id="installation">Installation</h2>
<p>
Install the templates by running the command:
</p>
Install the templates by running the command:
</p>

<CodeSnippet>dotnet new install {path to package}\Microsoft.FluentUI.AspNetCore.Templates.{version}.nupkg</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 page</a>.
</p>

<h2 id="usage">Usage</h2>
<p>
After installing the templates you can create new a project from either the CLI or by using the 'Creating a new project`-dialog in Visual studio 2022.
After installing the templates you can create new a project from either the CLI or by using the 'Creating a new project`-dialog in Visual studio 2022.
</p>

<p>
For creating a new Fluent Blazor Web App project from the CLI:
For creating a new Fluent Blazor Web App project from the CLI:
</p>

<CodeSnippet>dotnet new fluentlazor -o {your project name}</CodeSnippet>
<CodeSnippet>dotnet new fluentblazor -o {your project name}</CodeSnippet>

<p>
For ceating a Fluent Blazor WebAssembly Standalone App project from the CLI:
For creating a Fluent Blazor WebAssembly Standalone App project from the CLI:
</p>

<CodeSnippet>dotnet new fluentblazorwasm -o {your project name}</CodeSnippet>

<p>
In Visual Studio you can create a new project by selecting either the FluentUI Blazor Server App template or the FluentUI Blazor WebAssembly
template in the 'File-&gt;New-&gt;Project'-dialog. It looks like this:
In Visual Studio you can create a new project by selecting either the FluentUI Blazor Server App template or the FluentUI Blazor WebAssembly
template in the 'File-&gt;New-&gt;Project'-dialog. It looks like this:
</p>
<p style="display: flex; justify-content:center">
<img style="border: 1px solid var(--neutral-foreground-focus);" src="_content/FluentUI.Demo.Shared/images/newproject.png" alt="New project dialog with Fluent UI templates" />
<img style="border: 1px solid var(--neutral-foreground-focus);" src="_content/FluentUI.Demo.Shared/images/newproject.png" alt="New project dialog with Fluent UI templates" />
</p>

<h3>Blazor Web App details</h3>
<p>The rendermode and interactivity choices made when creating an application with the template determine the behavoir of the NavMenu and wether we include the web
<p>
The rendermode and interactivity choices made when creating an application with the template determine the behavoir of the NavMenu and wether we include the web
components scrip in <code>App.razor</code>. Starting with v4.0.1 of the templates, the result of that choices are described in the table below:
<table>
<thead>
<tr>
<th>Rendermode / Interactivity</th>
<th>NavMenu @@rendermode</th>
<th>NavMenu Collapsible</th>
<th>WC script in body</th>
</tr>
</thead>
<tbody>
<tr>
<td>SSR / not applicable</td>
<td>❌</td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>Server / Global</td>
<td>❌</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>Server / Per Page</td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>WebAssembly / Global*</td>
<td>❌</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>WebAssembly / Per Page*</td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>Auto / Global*</td>
<td>❌</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>Auto / Per Page*</td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th>Rendermode / Interactivity</th>
<th>NavMenu @@rendermode</th>
<th>NavMenu Collapsible</th>
<th>WC script in body</th>
</tr>
</thead>
<tbody>
<tr>
<td>SSR / not applicable</td>
<td>❌</td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>Server / Global</td>
<td>❌</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>Server / Per Page</td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>WebAssembly / Global*</td>
<td>❌</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>WebAssembly / Per Page*</td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>Auto / Global*</td>
<td>❌</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td>Auto / Per Page*</td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
</tr>
</tbody>
</table>


</p>

<h2 id="uninstalling-the-templates">Uninstalling the templates</h2>

<p>
If you want to uninstall the templates, both from the CLI and Visual Studio 2022, run the following command:
If you want to uninstall the templates, both from the CLI and Visual Studio 2022, run the following command:
</p>

<CodeSnippet>dotnet new uninstall Microsoft.FluentUI.AspNetCore.Templates</CodeSnippet>
Expand Down

0 comments on commit 83aa7bb

Please sign in to comment.