Боковая панель в Blazor не является чем-то особенным. Если вы отметите MainLayout.razor, то увидите ссылку на компонент NavMenu с классом sidebar:
<div class="sidebar">
<NavMenu />
</div>
Если вы откроете NavMenu.razor, вы увидите, что это просто Bootstrap Navbar, удобно упакованный в многоразовый компонент.
Обновление
Blazor использует Bootstrap, что делает остальную часть проблемы проблемой таблицы стилей, а не проблемой Blazor.
Таблица стилей шаблона Blazor была создана для этого конкретного макета, похожего на проводник - вертикальная панель навигации слева, основная область справа. Цвета, размеры и, самое главное, поток, предназначены для этого. Недостаточно изменить один класс стилей.
С другой стороны, таблица стилей Razor pages была создана для «классического» внешнего вида начальной загрузки с меню сверху, контейнерами и строками всередина, колонтитулы и колонтитулы. Это означает, что мы можем «позаимствовать» таблицу стилей и макет из нового приложения Razor Pages.
- Создать новый проект с
dotnet new webapp - Удалить все в Blazor's
site.css, кромепервая строка:
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
Скопируйте содержимое Razor's
site.css в Blazor's
site.css. Файл должен выглядеть так:
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
...
Измените Blazor's
Shared\MainLayout.razor, чтобы имитировать структуру в Razor's
Shared\_Layout.cshtml:
@inherits LayoutComponentBase
<header>
<NavMenu />
</header>
<div class="container">
<main role="main" class="pb-3">
@Body
</main>
</div>
Здесь нет нижнего колонтитула, поскольку в шаблоне Blazor нет страницы Privacy.
Измените
Shared\NavMenu.razor, чтобы использовать структуру и стили шаблона Razor. Элементы
<a> должны быть заменены элементами
NavLink. Другая сложность заключается в том, что переключатель в Razor работает через атрибуты
data-toggle="collapse" data-target, которые не работают в Blazor. Вот почему необходим обработчик щелчков:
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="">blazornav</a>
<button class="navbar-toggler" type="button" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<NavLink class="nav-link text-dark" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link text-dark" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link text-dark" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
</ul>
</div>
</div>
</nav>
Обработчик щелчков просто добавляет или удаляет класс collapse к базовому стилю навигации, скопированному из Razor
@code {
bool collapseNavMenu = true;
string baseMenuClass = "navbar-collapse d-sm-inline-flex flex-sm-row-reverse";
string NavMenuCssClass => baseMenuClass + (collapseNavMenu ? " collapse" : "");
void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
ThisВ результате появляется горизонтальное меню с переключателем справа:
