daohualiuxiang
/
AspNetCore.Docs
mirror of https://github.com/dotnet/AspNetCore.Docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Surface NavMenu component (#21295)

pull/21297/head
Luke Latham 2021-01-22 18:30:52 -06:00 committed by GitHub
parent 3285896db2
commit 65748bdb4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aspnetcore/blazor/fundamentals/routing.md
View File

@ -337,7 +337,7 @@ The following `ParseQueryString` component example parses a query string paramet
::: moniker-end
## `NavLink` component
## `NavLink` and `NavMenu` components
Use a <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component in place of HTML hyperlink elements (`<a>`) when creating navigation links. A <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component behaves like an `<a>` element, except it toggles an `active` CSS class based on whether its `href` matches the current URL. The `active` class helps a user understand which page is the active page among the navigation links displayed. Optionally, assign a CSS class name to <xref:Microsoft.AspNetCore.Components.Routing.NavLink.ActiveClass?displayProperty=nameWithType> to apply a custom CSS class to the rendered link when the current route matches the `href`.

8
aspnetcore/blazor/project-structure.md
View File

@ -31,7 +31,7 @@ The Blazor WebAssembly template (`blazorwasm`) creates the initial files and dir
* `Shared` folder: Contains the following shared components and stylesheets:
* `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/layouts).
* `MainLayout.razor.css`: Stylesheet for the app's main layout.
* `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-component) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), which renders navigation links to other Razor components. The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.
* `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-and-navmenu-components) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), which renders navigation links to other Razor components. The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.
* `NavMenu.razor.css`: Stylesheet for the app's navigation menu.
* `SurveyPrompt` component (`SurveyPrompt.razor`): Blazor survey component.
@ -41,7 +41,7 @@ The Blazor WebAssembly template (`blazorwasm`) creates the initial files and dir
* `Shared` folder: Contains the following shared components:
* `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/layouts).
* `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-component) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), which renders navigation links to other Razor components. The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.
* `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-and-navmenu-components) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), which renders navigation links to other Razor components. The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.
* `SurveyPrompt` component (`SurveyPrompt.razor`): Blazor survey component.
::: moniker-end
@ -106,7 +106,7 @@ The Blazor Server template (`blazorserver`) creates the initial files and direct
* `Shared` folder: Contains the following shared components and stylesheets:
* `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/layouts).
* `MainLayout.razor.css`: Stylesheet for the app's main layout.
* `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-component) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), which renders navigation links to other Razor components. The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.
* `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-and-navmenu-components) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), which renders navigation links to other Razor components. The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.
* `NavMenu.razor.css`: Stylesheet for the app's navigation menu.
* `SurveyPrompt` component (`SurveyPrompt.razor`): Blazor survey component.
@ -116,7 +116,7 @@ The Blazor Server template (`blazorserver`) creates the initial files and direct
* `Shared` folder: Contains the following shared components:
* `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/layouts).
* `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-component) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), which renders navigation links to other Razor components. The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.
* `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-and-navmenu-components) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), which renders navigation links to other Razor components. The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.
* `SurveyPrompt` component (`SurveyPrompt.razor`): Blazor survey component.
::: moniker-end

2
aspnetcore/blazor/security/index.md
View File

@ -282,7 +282,7 @@ If authorization conditions aren't specified, <xref:Microsoft.AspNetCore.Compone
* Authenticated (signed-in) users as authorized.
* Unauthenticated (signed-out) users as unauthorized.
The <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeView> component can be used in the `NavMenu` component (`Shared/NavMenu.razor`) to display a list item (`<li>...</li>`) for a [`NavLink` component](xref:blazor/fundamentals/routing#navlink-component) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), but note that this approach only removes the list item from the rendered output. It doesn't prevent the user from navigating to the component.
The <xref:Microsoft.AspNetCore.Components.Authorization.AuthorizeView> component can be used in the `NavMenu` component (`Shared/NavMenu.razor`) to display a list item (`<li>...</li>`) for a [`NavLink` component](xref:blazor/fundamentals/routing#navlink-and-navmenu-components) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), but note that this approach only removes the list item from the rendered output. It doesn't prevent the user from navigating to the component.
### Role-based and policy-based authorization

4
aspnetcore/toc.yml
View File

@ -461,9 +461,9 @@
- name: MainLayout
href: blazor/layouts.md#mainlayout-component
- name: NavLink
href: blazor/fundamentals/routing.md#navlink-component
href: blazor/fundamentals/routing.md#navlink-and-navmenu-components
- name: NavMenu
href: blazor/fundamentals/routing.md#navlink-component
href: blazor/fundamentals/routing.md#navlink-and-navmenu-components
- name: Router
href: blazor/fundamentals/routing.md#route-templates
- name: Virtualize