TablerForNet Blazor: Руководство по установке и админ-шаблон

Github TranslateForNet

NuGet TablerForNet · latest

Программный стек Blazor Server · VS 2026 · .NET 10 · TablerForNet

Последнее обновление 29.01.2026

Полное пошаговое руководство по интеграции TablerForNet в Blazor Server. Замените Bootstrap на современный адаптивный админ-фреймворк на базе Tabler.

⤢

Пошаговое руководство по установке TablerForNet

В руководстве показана установка на чистом проекте Blazor Server .NET 7. Пожалуйста, следуйте этим шагам:

• Шаг 1: Установите пакет NuGet 'TablerForNet'.
• Шаг 2: Добавьте необходимые 'using' и зарегистрируйте сервис TablerForNet в файле Program.cs.
• Шаг 3: Включите нужные 'using' в файл _imports.razor.
• Шаг 4: Измените тег PageTitle.
• Шаг 5: Добавьте CSS и JS файлы 'tablerForNet' в _Host.cshtml.
• Шаг 6: Удалите Bootstrap и связанные ресурсы.
• Шаг 7: Обновите NavMenu.razor соответственно.
• Шаг 8: Улучшите MainLayout.razor.
• Шаг 9: Отредактируйте страницы Index, Counter и FetchData.

Шаг 1: Установка пакета NuGet

Действуйте согласно инструкциям на nuget.org.

Шаг 2: Регистрация сервиса TablerForNet

using TablerForNet;
 builder.Services.AddTablerForNet();

Шаг 3: Добавление 'using'

@using TablerForNet;
 @using TablerForNet.Components
 @using GhostlyInc.Components.Icons
 @using TablerForNet.Flags

Шаг 4: Конфликт тега PageTitle

Обнаружен конфликт между тегом PageTitle TablerForNet и встроенным Microsoft. Рекомендуется удалить первый или явно указать 'TablerForNet.Components.PageTitle'. Внесите изменения в следующие файлы:

• App.razor
• Index.razor
• Counter.razor
• Fetchdata.razor
• MainLayout.razor

Шаг 5: Подключение CSS и JS

<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>

Шаг 6: Удаление Bootstrap

Удалите папку Bootstrap в каталоге CSS. Также удалите папку 'open-iconic', так как используются иконки Tabler. Удалите соответствующую ссылку в файле _Host.cshtml, как показано ниже:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

Шаг 7: Обновление NavMenu

<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">

	<NavbarMenu>
		<NavbarMenuItem Href="@($"/")" Text="Home">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Home" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/counter")" Text="Counter">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Brand_days_counter" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/fetchdata")" Text="Fetch data">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Database" />
			</MenuItemIcon>
		</NavbarMenuItem>

Шаг 8: Настройка MainLayout

@inherits LayoutComponentBase

<NavMenu />

<div class="page">
	<div class="container-fluid mt-2">
		@Body
		<br />
	</div>
</div>

Шаг 9: Корректировка других страниц

Как видно ниже, на странице index добавлен тег 'div'. Рекомендуется повторить это на всех остальных страницах.

@page "/"

<div class="container-md">
	<h1>Hello, world!</h1>

	Welcome to your new app.

	<SurveyPrompt Title="How is Blazor working for you?" />
</div>

Поздравляем! Вы успешно интегрировали TablerForNet в ваш проект Blazor. Теперь вы готовы использовать весь потенциал этого мощного фреймворка. Используйте новые возможности для создания отличных веб-приложений. Если возникнут трудности, помните, что каждая проблема — это шанс для роста. Удачной разработки!