Админ-интерфейс Blazor

Практичные админ-экраны на TablerForNet Blazor UI

NuGet TablerForNet · latest

TablerForNet даёт командам Blazor админский интерфейс на базе Tabler с готовой навигацией, карточками, формами, иконками и элементами макета. Используйте его, если приложение — это рабочий инструмент, а не маркетинговая страница с уникальным визуальным стилем.

В этом руководстве — только практика: установка NuGet-пакета, регистрация сервиса, замена стандартных Bootstrap-ресурсов, перенос макета и управление SEO через метаданные и маршрутизацию, а не через UI-компоненты.

Начать установку Проверить, подходит ли Открыть Blazor-хаб

Краткий ответ

TablerForNet полезен, если Blazor-приложение — это бэк-офис

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

Админские макеты Переиспользуемые формы Иконки Tabler Миграция с Bootstrap

Проверка соответствия

Используйте админский UI-фреймворк только если часто повторяются экраны инструментов

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

Подходит

Внутренние инструменты и дашборды

Используйте TablerForNet, если пользователи работают с таблицами, фильтрами, деталями, настройками и сложными административными зонами.

Подходит

Единообразные CRUD-экраны

Общий стиль компонентов удобен, если на многих страницах повторяются формы, таблицы, карточки, бейджи, пустые состояния и действия на панели.

Избыточно

Небольшие публичные страницы с контентом

Полный админский UI-фреймворк часто не нужен для статей, лендингов, документации или страниц, где важен брендовый дизайн.

Осторожно

Смешивание стилей Bootstrap и Tabler

Не держите две визуальные основы без чёткого плана миграции. Мелкие CSS-конфликты потом сложно отлаживать.

Содержание

Установка

Установите пакет, зарегистрируйте сервисы и только потом заменяйте стандартные ресурсы

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

Добавьте пакет NuGet

Используйте менеджер пакетов или .NET CLI, затем выполните dotnet restore перед изменением макета.

ShellТерминал
dotnet add package TablerForNet

Зарегистрируйте TablerForNet

Регистрируйте сервис рядом с остальной настройкой Blazor, чтобы обновления было легко найти.

C#Program.cs
using TablerForNet;

builder.Services.AddTablerForNet();

Импортируйте пространства имён

Добавляйте только нужные пространства имён. Это поможет избежать конфликтов типов, если другая библиотека содержит похожие имена компонентов.

Razor_Imports.razor
@using TablerForNet
@using TablerForNet.Components
@using TablerForNet.Flags

Загрузите ресурсы TablerForNet

Добавьте CSS и JavaScript-бандл один раз в хост-документ или макет, который использует ваше приложение.

HTMLХост-документ
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>

Миграция

Заменяйте стандартные Bootstrap-ресурсы только после того, как определили макет страницы

Шаблон Blazor по умолчанию использует Bootstrap, стартовое NavMenu и простые контейнеры. TablerForNet может заменить эти элементы, но делайте это осознанно, чтобы не оставить дублирующий CSS, смешанные иконки или два компонента заголовка страницы.

01

Инвентаризация текущего макета

Перечислите файлы шаблона, которые отвечают за навигацию, контейнеры, иконки, ссылки на Bootstrap и заголовки страниц.

02

Заменяйте по одному слою

Начните с ресурсов и импортов, затем перенесите NavMenu, MainLayout и простую страницу, прежде чем переходить к сложным экранам.

03

Разрешайте конфликты имён компонентов

Если PageTitle или другой компонент есть в двух пространствах имён, явно указывайте нужный и держите список using минимальным.

04

Проверьте адаптивность

Проверьте отображение на десктопе и мобильных до завершения миграции. Админская навигация обычно ломается первой на маленьких экранах.

Удалите стандартные ссылки на Bootstrap

Оставьте одну визуальную основу. Если оставить CSS шаблона, могут появиться мелкие баги в макете, которые потом сложно найти.

HTMLУдалите из хост-документа
<!-- Remove these default template references when TablerForNet owns the visual layout. -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/open-iconic/font/css/open-iconic-bootstrap.min.css" rel="stylesheet" />

Разрешите конфликт PageTitle

Если две библиотеки содержат компонент PageTitle, явно указывайте нужный или удалите конфликтующий using.

RazorЯвное указание компонента
<TablerForNet.Components.PageTitle>
    Dashboard
</TablerForNet.Components.PageTitle>

Макет

Перенесите навигацию и оформление страницы в макет до доработки экранов

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

Пример навигации

RazorNavMenu.razor
<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">
    <NavbarMenu>
        <NavbarMenuItem Href="/" Text="Home">
            <MenuItemIcon>
                <Icon class="icon" IconType="@TablerIcons.Home" />
            </MenuItemIcon>
        </NavbarMenuItem>

        <NavbarMenuItem Href="/reports" Text="Reports">
            <MenuItemIcon>
                <Icon class="icon" IconType="@TablerIcons.Chart_bar" />
            </MenuItemIcon>
        </NavbarMenuItem>
    </NavbarMenu>
</Navbar>

Пример макета

RazorMainLayout.razor
@inherits LayoutComponentBase

<NavMenu />

<div class="page">
    <main class="container-xl py-3">
        @Body
    </main>
</div>

Реальность SEO

TablerForNet делает интерфейс единообразным, но не управляет метаданными для поиска

Чистый админский UI повышает удобство, доступность и качество. Он не создаёт канонические URL, hreflang-ссылки, Open Graph или JSON-LD. Эти задачи решайте через метаданные и маршрутизацию, соответствующую видимому контенту.

Связанная реализация

Сочетайте UI-фреймворк с метаданными страниц и ссылками с учётом культуры (locale)

Используйте эти руководства, если в приложении TablerForNet есть публичные страницы, локализованные маршруты, статьи или индексируемая документация рядом с админ-экранами.

Руководство по метаданным Гайд по ссылкам с locale

Проверка

Проверяйте отображение приложения, а не только установку пакета

После компиляции страницы проверьте реальный UI в браузере. Навигацию, адаптивность, фокус, дублирующий CSS и метаданные проще увидеть глазами, чем по выводу менеджера пакетов.

  • Запустите приложение и откройте страницу с новым макетом.
  • Убедитесь, что ресурсы Bootstrap и TablerForNet не конфликтуют.
  • Проверьте навигацию, фокус, иконки и адаптивные точки.
  • Проверьте заголовок, H1, метаописание, канонический URL и JSON-LD на публичных страницах.
  • Держите настройку пакета, миграцию макета и изменения SEO-метаданных отдельно для удобства проверки.

Частые вопросы

Что добавляет TablerForNet в Blazor-приложение?

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

Стоит ли удалять Bootstrap при использовании TablerForNet?

Обычно да. TablerForNet построен на визуальной системе Tabler, поэтому если оставить стандартные ресурсы Bootstrap, появится дублирование отступов, кнопок, иконок и макета.

Подходит ли TablerForNet для всех сайтов на Blazor?

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

Решает ли TablerForNet SEO в Blazor?

Нет. Он помогает сделать интерфейс чище, но SEO зависит от контента, заголовков, описаний, канонических URL, hreflang-ссылок, Open Graph и JSON-LD, соответствующих странице.

Можно ли использовать TablerForNet с Blazor WebAssembly?

Да, но действуют те же правила фронтенда: держите бандлы разумными, ресурсы подключайте один раз, а публичный контент делайте доступным в виде HTML, если важен SEO.

Как решать конфликты с PageTitle?

Явно указывайте пространство имён для нужного компонента или удаляйте конфликтующий using. Это понятнее, чем полагаться на первый найденный PageTitle.