|
4 | 4 |
|
5 | 5 | <h1><FluentIcon Value="@(new Icons.Regular.Size24.Classification())" /> Project templates</h1> |
6 | 6 |
|
7 | | -<p> |
8 | | - 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 |
9 | | - <a target="top" href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates/">Microsoft.FluentUI.AspNetCore.Templates</a> template package. |
10 | | -</p> |
11 | | -<p> |
12 | | - The package contains templates for creating Blazor Server and/or Blazor WebAssembly apps which mimic the regular Blazor |
13 | | - templates. The Fluent UI Blazor components are already fully set up. If you choose to use the sample pages when creating a project, |
14 | | - 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. |
15 | | -</p> |
16 | | -<p> |
17 | | - 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. |
18 | | - 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. |
19 | | -</p> |
20 | | -<p> |
21 | | - 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 |
22 | | - <a href="/IconsAndEmoji"> Icons and Emoji</a> page for more information. |
23 | | -</p> |
| 7 | +<MarkdownSection FromAsset="./_content/FluentUI.Demo.Shared/docs/Templates.md" OnContentConverted="RefreshTableOfContents" /> |
24 | 8 |
|
25 | | -<p> |
26 | | - The pages created from these templates will appear like the following based on the type of project and options selected during creation. |
27 | | -</p> |
28 | | -<p style="display: flex; flex-direction:column; align-items:center"> |
29 | | - <img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-home.png" alt="Home page for site created Fluent UI templates" /> |
30 | | - <br /> |
31 | | - <img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-counter.png" alt="Counter page for site created Fluent UI templates" /> |
32 | | - <br /> |
33 | | - <img style="width: 750px;" src="_content/FluentUI.Demo.Shared/images/template-weather.png" alt="Fetch data page for site created Fluent UI templates" /> |
34 | | -</p> |
| 9 | +@code { |
35 | 10 |
|
36 | | -<blockquote> |
37 | | -<strong>IMPORTANT!!</strong> |
38 | | -<p>Just as with the standard Blazor Web App template, Blazor will use SSR by default. If you want to have interactive components, make sure you add a rendermode to the app, page or component!</p> |
39 | | -</blockquote> |
| 11 | + [CascadingParameter] |
| 12 | + public EventCallback OnRefreshTableOfContents { get; set; } |
40 | 13 |
|
41 | | -<h2 id="installation">Installation</h2> |
42 | | -<p> |
43 | | - You can install the templates by running the following command: |
44 | | -</p> |
45 | | - |
46 | | -<CodeSnippet>dotnet new install Microsoft.FluentUI.AspNetCore.Templates</CodeSnippet> |
47 | | - |
48 | | -<p> |
49 | | - The current version can be found on the <a href="https://www.nuget.org/packages/Microsoft.FLuentUI.AspNetCore.Templates/" rel="noopener noreferrer nofollow">NuGet site</a>. |
50 | | -</p> |
51 | | - |
52 | | -<h2 id="usage">Usage</h2> |
53 | | -<p> |
54 | | - After installing the templates, you can create a new project from either the CLI or by using the 'Creating a new project'-dialog in Visual Studio 2022. |
55 | | -</p> |
56 | | - |
57 | | -<p> |
58 | | - For creating a new Fluent Blazor Web App project from the CLI: |
59 | | -</p> |
60 | | - |
61 | | -<CodeSnippet>dotnet new fluentblazor -o {your project name}</CodeSnippet> |
62 | | - |
63 | | -<p> |
64 | | - For creating a Fluent Blazor WebAssembly Standalone App project from the CLI: |
65 | | -</p> |
66 | | - |
67 | | -<CodeSnippet>dotnet new fluentblazorwasm -o {your project name}</CodeSnippet> |
68 | | - |
69 | | -<p> |
70 | | - In Visual Studio you can create a new project by selecting either the 'Fluent Blazor Web App' template or the 'Fluent Blazor WebAssembly Standalone App' |
71 | | - template in the 'File->New->Project'-dialog. It looks like this: |
72 | | -</p> |
73 | | -<p style="display: flex; justify-content:center"> |
74 | | - <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" /> |
75 | | -</p> |
76 | | - |
77 | | -<h3>Blazor Web App details</h3> |
78 | | -<p> |
79 | | - The rendermode and interactivity choices made when creating an application with the template determine the behavior of the NavMenu and whether we include the web |
80 | | - components script in <code>App.razor</code>. Starting with v4.2.1 of the templates, the result of that choices is described in the table below: |
81 | | - |
82 | | - <table width="90%"> |
83 | | - <thead> |
84 | | - <tr> |
85 | | - <th width="33%">Rendermode / Interactivity</th> |
86 | | - <th width="33%">NavMenu @@rendermode</th> |
87 | | - <th width="33%">NavMenu Collapsible</th> |
88 | | - </tr> |
89 | | - </thead> |
90 | | - <tbody> |
91 | | - <tr> |
92 | | - <td>SSR / not applicable</td> |
93 | | - <td>❌</td> |
94 | | - <td>✅<sup>*</sup></td> |
95 | | - </tr> |
96 | | - <tr> |
97 | | - <td>Server / Global</td> |
98 | | - <td>❌</td> |
99 | | - <td>✅</td> |
100 | | - </tr> |
101 | | - <tr> |
102 | | - <td>Server / Per Page</td> |
103 | | - <td>✅</td> |
104 | | - <td>✅</td> |
105 | | - </tr> |
106 | | - <tr> |
107 | | - <td>WebAssembly / Global<sup>**</sup></td> |
108 | | - <td>❌</td> |
109 | | - <td>✅</td> |
110 | | - </tr> |
111 | | - <tr> |
112 | | - <td>WebAssembly / Per Page<sup>**</sup></td> |
113 | | - <td>✅</td> |
114 | | - <td>✅</td> |
115 | | - </tr> |
116 | | - <tr> |
117 | | - <td>Auto / Global<sup>**</sup></td> |
118 | | - <td>❌</td> |
119 | | - <td>✅</td> |
120 | | - </tr> |
121 | | - <tr> |
122 | | - <td>Auto / Per Page<sup>**</sup></td> |
123 | | - <td>✅</td> |
124 | | - <td>✅</td> |
125 | | - </tr> |
126 | | - </tbody> |
127 | | - </table> |
128 | | -</p> |
129 | | -<p> |
130 | | - <em>* For expanding/collapsing items, this uses a JavaScript file that is only active when running in SSR mode.</em><br /> |
131 | | - <em>** The NavMenu component is located in the Client project.</em> |
132 | | - </p> |
133 | | - |
134 | | -<h2 id="uninstalling-the-templates">Uninstalling the templates</h2> |
135 | | - |
136 | | -<p> |
137 | | - If you want to uninstall the templates, both from the CLI and Visual Studio 2022, run the following command: |
138 | | -</p> |
139 | | - |
140 | | -<CodeSnippet>dotnet new uninstall Microsoft.FluentUI.AspNetCore.Templates</CodeSnippet> |
| 14 | + private async Task RefreshTableOfContents() |
| 15 | + { |
| 16 | + await OnRefreshTableOfContents.InvokeAsync(); |
| 17 | + } |
| 18 | +} |
0 commit comments