diff --git a/examples/Demo/Shared/Pages/TemplatesPage.razor b/examples/Demo/Shared/Pages/TemplatesPage.razor
index 4739c6622e..0b10093ffc 100644
--- a/examples/Demo/Shared/Pages/TemplatesPage.razor
+++ b/examples/Demo/Shared/Pages/TemplatesPage.razor
@@ -4,137 +4,15 @@
Project templates
-
- 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
- Microsoft.FluentUI.AspNetCore.Templates template package.
-
-
- 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.
-
-
- 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 Icon page.
-
-
- 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
- Icons and Emoji page for more information.
-
+
-
- The pages created from these templates will appear like the following based on the type of project and options selected during creation.
-
-
- 
-
- 
-
- 
-
+@code {
-
-IMPORTANT!!
-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!
-
+ [CascadingParameter]
+ public EventCallback OnRefreshTableOfContents { get; set; }
-
Installation
-
- You can install the templates by running the following command:
-
-
-
dotnet new install Microsoft.FluentUI.AspNetCore.Templates
-
-
- The current version can be found on the NuGet site.
-
-
-
Usage
-
- 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.
-
-
-
- For creating a new Fluent Blazor Web App project from the CLI:
-
-
-
dotnet new fluentblazor -o {your project name}
-
-
- For creating a Fluent Blazor WebAssembly Standalone App project from the CLI:
-
-
-
dotnet new fluentblazorwasm -o {your project name}
-
-
- 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'
- template in the 'File->New->Project'-dialog. It looks like this:
-
-
- 
-
-
-
Blazor Web App details
-
- 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
- components script in App.razor. Starting with v4.2.1 of the templates, the result of that choices is described in the table below:
-
-
-
-
- | Rendermode / Interactivity |
- NavMenu @@rendermode |
- NavMenu Collapsible |
-
-
-
-
- | SSR / not applicable |
- ❌ |
- ✅* |
-
-
- | Server / Global |
- ❌ |
- ✅ |
-
-
- | Server / Per Page |
- ✅ |
- ✅ |
-
-
- | WebAssembly / Global** |
- ❌ |
- ✅ |
-
-
- | WebAssembly / Per Page** |
- ✅ |
- ✅ |
-
-
- | Auto / Global** |
- ❌ |
- ✅ |
-
-
- | Auto / Per Page** |
- ✅ |
- ✅ |
-
-
-
-
-
- * For expanding/collapsing items, this uses a JavaScript file that is only active when running in SSR mode.
- ** The NavMenu component is located in the Client project.
-
-
-
Uninstalling the templates
-
-
- If you want to uninstall the templates, both from the CLI and Visual Studio 2022, run the following command:
-
-
-
dotnet new uninstall Microsoft.FluentUI.AspNetCore.Templates
+ private async Task RefreshTableOfContents()
+ {
+ await OnRefreshTableOfContents.InvokeAsync();
+ }
+}
diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css
index dfaa44baa1..ea2eaab54c 100644
--- a/examples/Demo/Shared/wwwroot/css/site.css
+++ b/examples/Demo/Shared/wwwroot/css/site.css
@@ -140,6 +140,31 @@ nav fluent-anchor {
display: flex;
}
+ul.news {
+ padding-left: 0;
+ list-style-type: none;
+}
+
+ ul.news li {
+ display: flex;
+ gap: calc( var(--design-unit) * 2px);
+ align-items: center;
+ padding-bottom: calc( var(--design-unit) * 2px);
+ }
+
+.news .calendar {
+
+}
+
+.news a {
+ font-size: var(--type-ramp-plus-1-font-size);
+ line-height: var(--type-ramp-plus-1-line-height);
+ font-weight: 600;
+ text-decoration: none;
+}
+
+
+
article {
padding: 1.5rem 1rem;
border-right: 1px solid var(--neutral-stroke-divider-rest);
@@ -301,7 +326,7 @@ kbd {
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
- margin-top:80px;
+ margin-top: 80px;
}
.loading-progress-text:after {
@@ -426,6 +451,7 @@ kbd {
fluent-select::part(control) {
width: 150px;
}
+
.content {
flex-direction: column;
}
@@ -433,7 +459,7 @@ kbd {
aside {
padding: 1.5em 0.75em 1em 0.75em;
width: 100%;
- height: 100%!important;
+ height: 100% !important;
max-height: 100% !important;
}
@@ -554,3 +580,13 @@ kbd {
display: block;
min-height: 24px;
}
+
+.youtube-thumbnail {
+ position: relative;
+ overflow: hidden;
+ max-width: 100%;
+}
+
+ .youtube-thumbnail img {
+ width: 100%;
+ }
diff --git a/examples/Demo/Shared/wwwroot/docs/Templates.md b/examples/Demo/Shared/wwwroot/docs/Templates.md
new file mode 100644
index 0000000000..197ff4ff2b
--- /dev/null
+++ b/examples/Demo/Shared/wwwroot/docs/Templates.md
@@ -0,0 +1,77 @@
+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 [Microsoft.FluentUI.AspNetCore.Templates](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates/) template package. The package contains 4 Blazor templates for creating the following type of applications:
+- Fluent Blazor Web App
+- Fluent Blazor WebAssembly Standalone App
+- Fluent .NET MAUI Blazor Hybrid and Web App
+- Fluent .NAT Aspire Starter app
+
+
+All of these templates mimic their standard Blazor template counterpart but have the Fluent UI Blazor components already fully set up. If you choose to add sample pages when creating a project, all components have been replaced with Fluent UI components (and a few extra have been added). All Bootstrap styling is removed of course as well.
+
+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 [Icon](https://www.fluentui-blazor.net/Icon) page.
+
+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 [Icons and Emoji](https://www.fluentui-blazor.net/IconsAndEmoji) page for more information.
+
+The pages created from these templates will appear like the following based on the type of project and options selected during creation.
+
+
+
+
+
+> **IMPORTANT!!**
+> 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!
+
+## Installation
+
+You can install the templates by running the following command:
+
+```cshtml
+dotnet new install Microsoft.FluentUI.AspNetCore.TemplatesCopy
+```
+
+The current version can be found on the [NuGet site](https://www.nuget.org/packages/Microsoft.FLuentUI.AspNetCore.Templates/).
+
+## Usage
+
+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.
+
+For creating a new Fluent Blazor Web App project from the CLI:
+
+```cshtml
+dotnet new fluentblazor -o {your project name}Copy
+```
+
+For creating a Fluent Blazor WebAssembly Standalone App project from the CLI:
+
+```cshtml
+dotnet new fluentblazorwasm -o {your project name}Copy
+```
+
+In Visual Studio you can create a new project by selecting on of the templates in the 'File->New->Project'-dialog. It looks like this (when you select 'Fluent'
+in the 'All project types' drop down:
+
+
+
+### Blazor Web App details
+
+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 components script in `App.razor`. Starting with v4.2.1 of the templates, the result of that choices is described in the table below:
+
+| Rendermode / Interactivity | NavMenu @rendermode | NavMenu Collapsible |
+| --- | --- | --- |
+| SSR / not applicable | ❌ | ✅^\*^ |
+| Server / Global | ❌ | ✅ |
+| Server / Per Page | ✅ | ✅ |
+| WebAssembly / Global^\*\*^ | ❌ | ✅ |
+| WebAssembly / Per Page^\*\*^ | ✅ | ✅ |
+| Auto / Global^\*\*^ | ❌ | ✅ |
+| Auto / Per Page^\*\*^ | ✅ | ✅ |
+
+*\* For expanding/collapsing items, this uses a JavaScript file that is only active when running in SSR mode.*
+*\*\* The NavMenu component is located in the Client project.*
+
+## Uninstalling the templates
+
+If you want to uninstall the templates, both from the CLI and Visual Studio 2022, run the following command:
+
+```cshtml
+dotnet new uninstall Microsoft.FluentUI.AspNetCore.Templates
+```
diff --git a/examples/Demo/Shared/wwwroot/images/lUZ5mrg2Q8k-MQ.jpg b/examples/Demo/Shared/wwwroot/images/lUZ5mrg2Q8k-MQ.jpg
new file mode 100644
index 0000000000..83e954e93e
Binary files /dev/null and b/examples/Demo/Shared/wwwroot/images/lUZ5mrg2Q8k-MQ.jpg differ
diff --git a/examples/Demo/Shared/wwwroot/images/new-project-dialog.png b/examples/Demo/Shared/wwwroot/images/new-project-dialog.png
new file mode 100644
index 0000000000..3a9f0012f6
Binary files /dev/null and b/examples/Demo/Shared/wwwroot/images/new-project-dialog.png differ
