Компонент NavLink

Последнее обновление: 30.11.2023

Встроенный компонент NavLink применяется для создания ссылок на компоненты. В целом этот компонент ведет себя как стандартный html-элемент <a> за тем исключением, что он также переключает css-класс active, который позволяет стилизовать текующю активную ссылку.

Пусть у нас есть в проекте в папке "Components/Pages" три маршоутизируемых компонента: Home, Contacts и About с каким-нибудь содержимым:

NavLink и создание ссылок в компонентах Blazor на C#

Например, пусть в компоненте Home будет следующее содержимое:

@page "/"

<h2>Home Page</h2>

Компонент Contacts:

@page "/contacts"

<h2>Contacts Page</h2>

Компонент About:

@page "/about"

<h2>About Page</h2>

В папке Components/Layouts определим компонент компоновки MainLayout со следующим кодом:

@inherits LayoutComponentBase
@using Microsoft.AspNetCore.Components.Routing  @*для NavLink*@
<style>
    a {
        color: #00897B;
    }
    a.active {
        color: #004D40;
        font-weight: 700;
    }
</style>
<div>
    <div>
        <NavLink href="/">Home</NavLink> | 
        <NavLink href="contacts">Contacts</NavLink> | 
        <NavLink href="about">About</NavLink>
    </div>
    <div>
        @Body 
    </div>
</div>

Здесь с помощью компонента NavLink определены ссылки на компоненты Home, Contacts и About. Кроме того, определены стили ссылок, в частности, класс active для стилизации активной ссылки.

В компоненте App определим маршрутизацию и применим компонент компоновки:

@using Microsoft.AspNetCore.Components.Routing
@** пространство имен компонента MainLayout **@
@using BlazorApp.Components.Layouts

<!DOCTYPE html>
<html>
<head>
    <title>METANIT.COM</title>
    <meta charset="utf-8" />
    <base href="/" />
</head>
<body>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
    </Router>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

Если мы запустим проект, то по NavLink будут создаваться сслыки, которые будут стилизоваться в соответствии с установленными нами стилями:

Стилизация NavLink в компонентах Blazor на C#

Однако мы видим, что при переходе к компонентам Contacts и About стилизуются как активная ссылка (с помощью класса active) не только ссылки на эти компоненты, но и ссылка на компонент Home, что, возможно, представляет не самое лучшее и ожидаемое поведение.

С помощью свойства Match класс NavLink позволяет установить, в каком случае к ссылке будет применяться класс active. Это свойство принимает значение типа NavLinkMatch и может принимать два значения:

  • NavLinkMatch.All: ссылка активна, если ее адрес полностью соответствует адресу текущего компонента.

  • NavLinkMatch.Prefix: ссылка активна, если ее адрес соответствует началу адреса текущего компонента (значение по умолчанию).

В примере выше адрес компонента About представляет путь "/about" - он начинается с префикса "/", а это путь к компоненту Home. Поэтому как активные выделяются две ссылки - на компонент About и на компонент Home. Чтобы выйти из этой ситуации у NavLink свойству Match надо передать значение NavLinkMatch.All:

<div>
    <NavLink Match="NavLinkMatch.All" href="/">Home</NavLink> |
    <NavLink href="contacts">Contacts</NavLink> | 
    <NavLink href="about">About</NavLink>
</div>
Настройка NavLink в компонентах Blazor на C#

Стоит отметить, что с помощью свойства ActiveClass компонента NavLink можно установить другой класс в качестве класса активной ссылки. 

@inherits LayoutComponentBase
@using Microsoft.AspNetCore.Components.Routing  @*для NavLink*@
<style>
    a {
        color: #F44336;
    }
    .activeNavLink {
        color: #B71C1C;
        font-weight:700;
    }
</style>
<div>
    <div>
        <NavLink ActiveClass="activeNavLink" Match="NavLinkMatch.All" href="/">Home</NavLink> |
        <NavLink ActiveClass="activeNavLink" href="contacts">Contacts</NavLink> |
        <NavLink ActiveClass="activeNavLink" href="about">About</NavLink>
    </div>
    <div>
        @Body 
    </div>
</div>

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850