Guia de Instalação e Template Admin do TablerForNet Blazor
Guia completo para integrar o TablerForNet em aplicações Blazor Server. Substitua o Bootstrap por um framework admin moderno e responsivo baseado no Tabler.
Eleve seu desenvolvimento Blazor com TablerForNet. Este framework moderno une design responsivo e SEO para criar apps web com ótima experiência e alta visibilidade nos buscadores.
TablerForNet é baseado no popular template admin Tabler, oferecendo mais de 300 componentes UI para Blazor. Combinado com metadados SEO adequados e roteamento adaptado à cultura, você pode criar aplicações prontas para produção que se destacam nos motores de busca.
Se você é novo no Blazor, comece com nosso Guia O que é Blazor para entender os fundamentos do framework.
Sumário
Guia passo a passo para instalar o TablerForNet
O guia mostra a instalação em um projeto Blazor Server .NET 7 novo. Siga os passos abaixo:
- Passo 1: Instale o pacote NuGet 'TablerForNet'.
- Passo 2: Adicione os 'usings' necessários e registre o serviço TablerForNet no arquivo Program.cs.
- Passo 3: Inclua os 'usings' necessários no arquivo _imports.razor.
- Passo 4: Modifique a tag PageTitle.
- Passo 5: Adicione os arquivos CSS e JS do 'tablerForNet' no arquivo _Host.cshtml.
- Passo 6: Remova o Bootstrap e os arquivos relacionados.
- Passo 7: Atualize o NavMenu.razor conforme necessário.
- Passo 8: Ajuste o MainLayout.razor.
- Passo 9: Ajuste as páginas Index, Counter e FetchData.
Passo 1: Instalação do pacote NuGet
Siga as instruções disponíveis no nuget.org.
Passo 2: Registre o serviço TablerForNet
using TablerForNet;
builder.Services.AddTablerForNet();Passo 3: Inclua os 'usings'
@using TablerForNet;
@using TablerForNet.Components
@using GhostlyInc.Components.Icons
@using TablerForNet.FlagsPasso 4: Conflito na tag PageTitle
Há conflito entre a tag PageTitle do TablerForNet e a do Microsoft. Recomenda-se remover a do TablerForNet ou renomeá-la para 'TablerForNet.Components.PageTitle'. Modifique os arquivos abaixo:
- App.razor
- Index.razor
- Counter.razor
- Fetchdata.razor
- MainLayout.razor
Passo 5: Integre CSS e JS
<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>Passo 6: Remova o Bootstrap
Apague a pasta Bootstrap dentro do diretório CSS. Também remova a pasta 'open-iconic', pois usará os ícones do tabler. Exclua o link correspondente no arquivo _Host.cshtml conforme abaixo:
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />Passo 7: Revisão do 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>Passo 8: Ajustes no MainLayout
@inherits LayoutComponentBase
<NavMenu />
<div class="page">
<div class="container-fluid mt-2">
@Body
<br />
</div>
</div>Passo 9: Ajuste outras páginas
Como mostrado abaixo, uma tag 'div' foi adicionada na página index. Recomenda-se replicar isso em todas as outras 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>Parabéns! Você integrou o TablerForNet com sucesso ao seu projeto Blazor. Com esses passos, está pronto para explorar todo o potencial deste framework. Aproveite os recursos avançados e crie aplicações web incríveis. Se surgir algum desafio, lembre-se que é uma chance de aprendizado. Bom desenvolvimento!