TablerForNet Blazor: Guía de instalación y plantilla administrativa

Github TranslateForNet

NuGet TablerForNet · latest

Pila de software Blazor Server · VS 2026 · .NET 10 · TablerForNet

Última actualización 29/1/2026

Guía completa paso a paso para integrar TablerForNet en aplicaciones Blazor Server. Sustituye Bootstrap por un framework UI administrativo moderno y responsive basado en Tabler.

⤢

Guía paso a paso para instalar TablerForNet

La guía muestra la instalación en un proyecto Blazor Server .NET 7 nuevo. Sigue estos pasos:

• Paso 1: Instala el paquete NuGet 'TablerForNet'.
• Paso 2: Añade los 'usings' necesarios y registra el servicio TablerForNet en Program.cs.
• Paso 3: Incorpora los 'usings' requeridos en el archivo _imports.razor.
• Paso 4: Modifica la etiqueta PageTitle.
• Paso 5: Añade los archivos CSS y JS de 'tablerForNet' en _Host.cshtml.
• Paso 6: Elimina Bootstrap y los recursos relacionados.
• Paso 7: Actualiza NavMenu.razor según corresponda.
• Paso 8: Ajusta MainLayout.razor.
• Paso 9: Modifica las páginas Index, Counter y FetchData.

Paso 1: Instalación del paquete NuGet

Sigue las indicaciones en nuget.org.

Paso 2: Registra el servicio TablerForNet

using TablerForNet;
 builder.Services.AddTablerForNet();

Paso 3: Añade los 'usings'

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

Paso 4: Conflicto con la etiqueta PageTitle

Existe un conflicto de nombres entre la etiqueta PageTitle de TablerForNet y la de Microsoft. Se recomienda eliminar la primera o renombrarla explícitamente a 'TablerForNet.Components.PageTitle'. Modifica los siguientes archivos:

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

Paso 5: Integra CSS y JS

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

Paso 6: Elimina Bootstrap

Borra la carpeta Bootstrap dentro del directorio CSS. Además, elimina la carpeta 'open-iconic' ya que usarás los iconos de tabler. Quita el enlace asociado en _Host.cshtml como se muestra a continuación:

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

Paso 7: Renovación de 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>

Paso 8: Ajuste de MainLayout

@inherits LayoutComponentBase

<NavMenu />

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

Paso 9: Ajusta otras páginas

Como se observa, se añadió una etiqueta 'div' en la página index. Se recomienda replicarla en todas las demás páginas.

@page "/"

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

	Welcome to your new app.

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

¡Felicidades! Has integrado TablerForNet con éxito en tu proyecto Blazor. Con estos pasos, estás listo para aprovechar todo el potencial de este potente framework. Disfruta de sus capacidades mejoradas y crea aplicaciones web excepcionales. Si encuentras dificultades, recuerda que cada reto es una oportunidad para crecer. ¡Feliz codificación!