Улучшение меню навигации по умолчанию в Blazor

Боковая панель, аккордеон, иерархическая структура, «хлебные крошки». У вас есть множество вариантов навигации помимо базового предложения Blazor.

Если вы разрабатывали приложения с использованием Blazor, то наверняка узнаете немодифицированное приложение по этому характерному фиолетовому меню. Для демонстрационных приложений это нормально. Но когда вы хотите вывести пользовательский опыт на новый уровень, вам следует подумать о том, как улучшить его, не нарушая поведение приложения.

В наборе Progress Telerik UI for Blazor мы можем найти серию компонентов навигации, которые позволяют заменить или улучшить меню по умолчанию. Давайте разберем каждый из них. Давайте начнем!

Давайте рассмотрим, как устроено меню навигации, входящее в шаблон Blazor. Мы можем увидеть это в только что созданном проекте, открыв файл Components/Layout/NavMenu.razor:

В коде по умолчанию вы можете найти элементы NavLink, которые автоматически позволяют подсвечивать активную страницу в меню. В первой ссылке NavLink мы видим атрибут Match="NavLinkMatch.All", который указывает, что эта ссылка (на главную страницу) будет отмечена как активная только тогда, когда URL полностью совпадает. Если бы мы его не включили, элемент подсвечивался бы практически на любой странице, на которую мы переходили.

Как я уже говорил, это подходит для демо-приложений, но когда у нас есть корпоративные приложения, меню может стать длинным и сложным для организации.

Теперь давайте посмотрим на компоненты Telerik, которые могут помочь нам улучшить меню навигации.

Без сомнения, один из первых компонентов, о котором я должен рассказать, — это Blazor Drawer. Этот компонент представляет собой выдвижную панель, которую можно сворачивать и отображать по желанию, чтобы пользователь мог сосредоточиться на приложении.

Некоторые преимущества компонента:

• Мини-режим, отображающий только настроенные иконки
• Различные режимы открытия, такие как Push и Overlay
• Возможность привязки к списку объектов
• Автоматическая подсветка выбранного пункта меню

Если вы хотите попробовать его, вы можете сделать это, изменив Components/Layout/NavMenu.razor или создав новый файл макета и добавив этот код:

В предыдущем коде вы можете получить представление о потенциале конфигурации компонента благодаря следующим деталям:

• Мы используем NavItems, привязанные к Data для отображения меню.
• С помощью MiniMode="true" мы делаем так, чтобы меню продолжало отображать иконки при сворачивании.
• Привязка @bind-SelectedItem отвечает за поддержание активной страницы подсвеченной.

Результат выполнения выглядит следующим образом:

Вы можете видеть, что боковое меню значительно улучшилось благодаря этой реализации.

Реализация горизонтальной иерархической навигации в Blazor

Следующий компонент, который мы рассмотрим, — это Blazor Menu. Этот компонент отображает горизонтальную панель навигации, где родительские элементы показывают дочерние при наведении курсора. Давайте посмотрим на некоторые из его преимуществ:

• Поддержка иерархий навигации с вложенными подменю
• Автоматическое отображение при наведении
• Простая привязка благодаря свойству Data

Пример реализации выглядит следующим образом:

Давайте выделим некоторые интересные моменты приведенного выше кода:

• Каждый объект MenuItem может содержать список MenuItem, что создает иерархии в меню.
• Если у элемента не задано свойство Url, это означает, что он является заголовком группы, то есть он будет раскрывать свои дочерние элементы.

Ниже вы можете увидеть демонстрацию пользовательского интерфейса:

Этот тип меню может помочь вашим пользователям легко ориентироваться в иерархии.

Реализация навигации в стиле аккордеона с использованием TelerikPanelBar

Еще один элемент, который может быть полезен при создании пользовательских меню, — это Blazor PanelBar. Этот тип панели широко используется в почтовых приложениях или подобных им, так как он позволяет родительским элементам разворачиваться и сворачиваться, чтобы показать дочерние элементы.

Некоторые из его преимуществ:

• Дизайн в стиле аккордеона, экономящий вертикальное пространство
• Группировка ссылок в сворачиваемые секции
• Привязка к иерархическим данным

Если вы хотите реализовать это в своих приложениях, вам следует использовать примерно следующее:

В приведенном выше коде мы видим структуру, похожую на Blazor Menu, с иерархическими элементами, привязанными через свойство Items. Родительские элементы, такие как Dashboard, — это те, которые можно развернуть или свернуть по клику:

Иерархическая навигация с использованием древовидных структур

Следующий компонент, который мы рассмотрим, — это Blazor TreeView, который отображает навигацию в виде расширяемого дерева. Он идеально подходит для глубоких структур, создания страниц в стиле документации, файловых проводников или некоторого рода вложенных конфигураций.

Некоторые из его основных особенностей:

• Многоуровневые иерархии с раскрывающимися узлами
• Привязка к плоским данным со ссылками на самих себя
• Контроль состояния развертывания

Вы можете реализовать его следующим образом:

В отличие от предыдущих примеров, здесь мы использовали плоское определение данных, то есть каждый элемент TreeItem ссылается на своего родителя с помощью свойства ParentId.

С другой стороны, свойство HasChildren указывает дереву, какие узлы могут быть развернуты.

Наконец, можно использовать параметр @bind-ExpandedItems для управления тем, какие узлы отображаются в развернутом виде. Вот как это выглядит в реализованном виде:

Теперь давайте изучим компонент «хлебных крошек».

Создание маршрутов навигации на основе хлебных крошек в Blazor

Другим возможным решением для улучшения навигации в ваших приложениях является использование хлебных крошек. Идеальным компонентом для этого типа навигации является Blazor Breadcrumb, который позволяет показать текущее местоположение пользователя в иерархии приложения, позволяя ему быстро вернуться на любой более высокий уровень. Хотя он не полностью заменяет основное боковое меню, он может идеально дополнить его.

Некоторые из его основных преимуществ:

• Он быстро указывает местоположение пользователя.
• Пользователь может легко перейти на любой родительский уровень.
• Вы можете добавлять значки и ссылки для каждого уровня.

Пример его использования выглядит следующим образом:

В приведенном выше коде каждый элемент BreadcrumbItem представляет собой уровень иерархии, который должен идти от наиболее общего к наиболее специфичному. Элементы со значением в Url доступны для навигации, в то время как последний, у которого нет этого значения, представляет текущую страницу и будет отключен.

Результат выполнения выглядит следующим образом:

Это, без сомнения, отличный способ дополнить основную навигацию вашего приложения.

Заключение

В ходе этой статьи вы смогли узнать о различных способах улучшения стандартной системы навигации: от вариантов, позволяющих заменить характерное для Blazor боковое меню, до тех, которые могут послужить дополнением к основной навигационной системе.

Теперь ваша очередь облегчить жизнь вашим пользователям при необходимости навигации, используя компоненты, описанные в статье.

Попробуйте Telerik UI for Blazor