Содержание
Bootstrap замечательный фреймворк для web-приложений, но без должной подготовки и изучения документации довольно сложно собрать из имеющихся готовых компонентов какой-то свой уникальный или, хотя бы, похожий на популярные компонент. Например, тот же TreeView придется «изобретать» достаточно долго. Но зачем это делать, если всё уже придумано до нас? В сети появилось достаточно много готовых компонентов Blazor, однако мы сегодня начнем рассмотрение всего лишь одной, но достаточно мощной и функциональной библиотеки компонентов Blazor для Bootstrap — Blazorise.
Что из себя представляет Blazorise
Blazorise — это библиотека готовых компонентов Blazor с открытым исходным кодом. Пользоваться компонентами можно в том числе и бесплатно, получая при этом доступ к репозиторию на Github. Единственное условие, которое ставят разработчики перед пользователями компонентов — это приобретать лицензию на компоненты, если ваш годовой доход превышает $1 000 000.
Все компоненты разделены на ряд пакетов, которые можно увидеть в менеджере пакетов NuGet. Вот, например, как выглядит Blazorise на момент написания этого обзора:
Установка Blazorise
Для начала, попробуем воспроизвести простой пример использования этих компонентов в Blazor. Создадим новый проект в Visual Studio — .NET MAUI Blazor.
Установим следующие пакеты: Blazorise.Bootstrap и Blazorise.Icons.FontAwesome. Сделать это можно, как через менеджер пакетов NuGet, так и командами в консоли менеджера пакетов:
Install-Package Blazorise.Bootstrap Install-Package Blazorise.Icons.FontAwesome
Первый пакет добавит в ваш проект Blazorise с поддержкой Bootstrap, второй — компонент для работы с иконками FontAwesome. Дополнительно можете установить и другие пакеты, которые могут вам пригодиться, например, Blazorise.Bootstrap5 для поддержки пятой версии Bootstrap или же Blazorise.Charts для доступа к компоненту работы с графиками. Нам пока потребуются эти два пакета.
Подключение статических файлов, необходимых Blazorise
Для работы, компонентам необходим доступ к оригинальным CSS и JS файлам тех или иных фреймворков, поэтому их необходимо подключить в проект в первую очередь. Для этого переходим в обозревателе решений в папку wwwroot нашего проекта и открываем файл index.html:
Добавляем в файл скрипты и ссылки на css-файлы как показано ниже:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
</body>
</html>
Здесь стоит отметить следующее — все внешние ресурсы, типа JQuery или тот же Bootstrap мы подключили через cdn. Однако, никто не запрещает вам скачать необходимые файлы в ту же папку wwwroot проекта и сделать ссылки на локальные файлы. Здесь мы видим, что использоваться в примере будет Bootstrap версии 4.6.1. Но это для нас пока не важно, при необходимости, переключимся и на 5 версию.
Подключение Blazorise в свой проект
Компоненты Blazorise подключаются в проект как сервис. Для того, чтобы подключить компоненты в свой проект делаем следующее:
во-первых, открываем файл _Imports.razor и добавляем в него директиву @using BlazoriseВ итоге файл, если вы используете .NET 7, должен выглядеть следующим образом:
@using System.Net.Http @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @using MauiApp1 @using MauiApp1.Shared @using Blazorise
во-вторых, открываем файл MauiProgram.cs и добавляем в него следующий код:
.....
using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;
namespace MauiApp1;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
.......
builder.Services
.AddBlazorise(options => options.Immediate = true)
.AddBootstrapProviders() //подключаем работу с компонентами Bootstrap
.AddFontAwesomeIcons(); //добавляем поддержку работы с иконками
......
return builder.Build();
}
}
Теперь всё готово для использования компонентов Blazorise в нашем проекте. Начнем с самого начала — поменяем макет нашего приложения. Чтобы было с чем сравнить, напомню как выглядит интерфейс стандартного приложения Blazor Hybrid:
Меняем главный макет приложения
На данный момент, главный макет приложения выглядит следующим образом:
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
Заменим этот макет и создадим его с нуля, используя Blazorise. За работу с макетом приложения отвечают компоненты Layout..., а именно:
<Layout>— главный компонент макета приложения. В нем будут содержаться все остальные части макета<LayoutHeader>— компонент макета для размещения в нем верхнего меню, иконки приложения и т.д.<LayoutContent>— компонент для размещения в нем и отрисовки контента приложения<LayoutFooter>— компонент «подвала»<LayoutSider>— компонент бокового меню<LayoutSiderContent>— компонент для размещения элементов бокового меню. Этот компонент должен находиться внутри<LayoutSider>
Итак сделаем макет, с заголовком (Header), подвалом (Footer) и боковым меню (Sidear). Удаляем всё, кроме первой строчки из файла MainLayout.razor и создаем макет с нуля:
<Layout>
<LayoutHeader Fixed>
Header
</LayoutHeader>
<Layout Sider>
<LayoutSider>
<LayoutSiderContent>
Sidebar
</LayoutSiderContent>
</LayoutSider>
<Layout>
<LayoutContent>
@Body
</LayoutContent>
</Layout>
</Layout>
<LayoutFooter Fixed>
Footer
</LayoutFooter>
</Layout>
Посмотрим, что мы здесь сделали. Во-первых, добавили главный компонент макета — Layout.
Дальше идет LayoutHeader со свойством Fixed, которое указывает, что верхнее меню должно прижиматься кверху.
Затем идет ещё один компонент Layout у которого определено свойство Sider. Свойство Sider означает, что внутри этого компонента будет расположено боковое меню. Внутри этого компонента мы разместили LayoutSider и LayoutSiderContent — компоненты, которые нам необходимы для работы с боковым меню.
Затем снова вставлен Layout в котором мы определили LayoutContent для размещения контента приложения и, собственно указали директиву Razor @Body для вывода контента именно в этом месте.
Завершает весь наш макет компонент Footer, который мы будем также, как и «шапку» прижимать, но только не к верху, а к низу.
Теперь можно запустить приложение и полюбоваться на вот такой неказистый макет:
Теперь наполним этот макет каким-либо полезным содержимым: добавим элементы бокового меню, настроим немного подвал и верхнее меню.
Создаем боковое меню
Плохая идея заталкивать в главный макет всё, что, по нашему мнению не будет меняться от страницы к странице или будет меняться редко. Поэтому создадим меню сайдбара как отдельный компонент Blazor. Добавим в папку Shared новый компонент Blazor и назовем его SideMenu.razor:
Если вы немного знакомы с Bootstrap, то наверняка в курсе, что за меню отвечает компонент Bar. В Blazorise есть точно такой же компонент. Именно из него мы и будем собирать наше боковое меню. Вначале добавим «скелет» меню — сам компонент Bar, кнопку сворачивания и иконку приложения:
<Bar Mode="BarMode.VerticalInline"
CollapseMode="BarCollapseMode.Small"
ThemeContrast="ThemeContrast.Light">
@*Настраиваем брэнд - иконку и название приложения*@
<BarBrand>
<BarItem>
<BarLink To="#">
<BarIcon IconName="IconName.Dashboard" />
Привет, Blazorise!
</BarLink>
</BarItem>
</BarBrand>
@*Добавляем кнопку сворачивания меню*@
<BarToggler></BarToggler>
</Bar>
Здесь мы указали для нашего меню Bar следующие свойства:
Mode="BarMode.VerticalInline" Элементы меню выстраиваются вертикально
CollapseMode="BarCollapseMode.Small" При сворачивании меню не исчезает, а сворачивается до минимально ширины (будут видны только иконки)
ThemeContrast="ThemeContrast.Light" Настройка контрастности цветов — для светлой темы
Также мы добавили иконку приложения и его название (компонент BarBrand) и кнопку сворачивания (BarToggler). Теперь добавим это меню в наш макет приложения. Должно получиться следующим образом:
<Layout>
<LayoutHeader Fixed>
Header
</LayoutHeader>
<Layout Sider>
<LayoutSider>
<LayoutSiderContent>
@*Вставляем главное меню в макет*@
<SideMenu></SideMenu>
</LayoutSiderContent>
</LayoutSider>
<Layout>
<LayoutContent>
@Body
</LayoutContent>
</Layout>
</Layout>
<LayoutFooter Fixed>
Footer
</LayoutFooter>
</Layout>
Теперь запустим приложение и полюбуемся на результат (кликните по картинке, если анимация не проигрывается):
Теперь добавим пару ссылок в меню. Для этого допишем наш компонент SideMenu.razor следующим образом:
<Bar Mode="BarMode.VerticalInline"
CollapseMode="BarCollapseMode.Small"
ThemeContrast="ThemeContrast.Light">
@*Настраиваем брэнд - иконку и название приложения*@
<BarBrand>
<BarItem>
<BarLink To="#">
<BarIcon IconName="IconName.Dashboard" />
Привет, Blazorise!
</BarLink>
</BarItem>
</BarBrand>
@*Меню приложения*@
<BarMenu>
@*Эти элементы меню будут прижиматься к верху*@
<BarStart>
@*Ссылка на главную страницу*@
<BarItem>
<BarLink To="/">
<BarIcon IconName="IconName.Home" />
Главная
</BarLink>
</BarItem>
@*Ссылка на счётчик*@
<BarItem>
<BarLink To="counter">
<BarIcon IconName="IconName.Clock" />
Счётчик
</BarLink>
</BarItem>
</BarStart>
@*Эти элементы меню будут прижиматься к низу*@
<BarEnd>
<BarItem>
<BarLink To="fetchdata">
<BarIcon IconName="IconName.User" />
Fetch Data
</BarLink>
</BarItem>
</BarEnd>
</BarMenu>
@*Добавляем кнопку сворачивания меню*@
<BarToggler></BarToggler>
</Bar>
По сути, мы вернули на место три пункта меню из шаблона приложения Blazor — ссылку на главную страницу, счётчик и демонстрацию работы с сервисами. Все шаги по построению такого меню закомментированы в коде. Теперь снова запустим приложение и посмотрим на результат (кликните по картинке, если анимация не проигрывается):
Остался один небольшой штрих, чтобы наш макет был готов. Обратите внимание как некрасиво контент страницы прижимается к меню. Давайте сделаем небольшой внутренний отступ. Для этого перейдем в главный макет нашего приложения и изменим компонент Layout для вывода контента следующим образом:
<Layout>
<LayoutContent Padding="Padding.Is4.OnAll">
@Body
</LayoutContent>
</Layout>
Здесь мы добавили свойство Padding, которое означает следующее: padding (внутренний отступ) равен $spacer * 1.5 по всем направлениям (сверху, снизу, слева, справа). Результат будет следующим (кликните по картинке, если анимация не проигрывается):
Теперь наше приложение более красивым и функциональным. В следующий раз мы продолжим работу с компонентами Blazorise и посмотрим на другие не менее интересные вещи.
Итого
Blazorise — это библиотека из более 80 различных компонентов, позволяющих использовать всю мощь Bootstrap и, при этом, оперировать известными программисту C# терминами и понятиями. Компоненты позволяют перестраивать графическую часть приложения Blazor практически с нуля — начиная с макета приложения.