Interface administrativa Blazor

Use padrões TablerForNet Blazor para telas administrativas práticas

NuGet TablerForNet · latest

TablerForNet oferece às equipes Blazor uma interface administrativa baseada em Tabler com navegação pronta, cartões, formulários, ícones e peças de layout. Use quando o app for uma ferramenta operacional, não uma página de marketing que precise de visual próprio.

Este guia foca no trabalho prático: instalar o pacote NuGet, registrar o serviço, substituir os recursos padrão do Bootstrap, migrar partes do layout e manter o SEO controlado por metadados e roteamento, não por componentes de UI.

Iniciar instalação Verificar compatibilidade Abrir hub Blazor

Resposta rápida

TablerForNet é útil quando o app Blazor funciona como back office

Uma biblioteca de componentes estilo Tabler ajuda quando os usuários precisam de navegação densa, cartões de status, formulários, tabelas, filtros e dashboards repetitivos. É menos útil para páginas editoriais, landing pages ou experiências de marca que exigem design próprio.

Layouts administrativos Formulários reutilizáveis Ícones Tabler Migração do Bootstrap

Verificação de adequação

Use framework de UI administrativa só quando telas repetidas forem o desafio

A biblioteca economiza tempo quando várias telas compartilham navegação, padrões de formulário, espaçamento, ícones e componentes de status. Pode atrapalhar se cada página exigir identidade visual ou interação personalizada.

Boa opção

Ferramentas internas e dashboards

Use TablerForNet quando usuários passarem tempo em grids, filtros, páginas de detalhes, telas de configurações e áreas administrativas com fluxo intenso.

Boa opção

Telas CRUD consistentes

Um estilo de componente compartilhado ajuda quando muitas páginas repetem formulários, tabelas, cartões, badges, estados vazios e ações na toolbar.

Excesso

Páginas públicas pequenas

Um framework completo de UI administrativa geralmente é desnecessário para artigos, landing pages, documentação ou páginas onde o design da marca deve prevalecer.

Cuidado

Estilos mistos Bootstrap e Tabler

Não mantenha duas bases visuais ativas sem um plano claro de migração. Pequenos conflitos CSS ficam caros de depurar depois.

Sumário

Instalação

Instale o pacote, registre serviços e substitua os recursos padrão com atenção

Faça a integração em pequenos commits ou checkpoints. TablerForNet muda o layout do app, então é mais fácil revisar se separar configuração do pacote, imports, recursos estáticos, navegação e mudanças de layout.

Adicionar pacote NuGet

Use o gerenciador de pacotes ou CLI do .NET e execute dotnet restore antes de alterar o layout.

ShellTerminal
dotnet add package TablerForNet

Registrar TablerForNet

Mantenha o registro do serviço junto da configuração do app Blazor para facilitar futuras atualizações.

C#Program.cs
using TablerForNet;

builder.Services.AddTablerForNet();

Importar namespaces

Adicione só os namespaces que realmente usa. Assim evita conflitos de tipos se outra biblioteca tiver nomes de componentes parecidos.

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

Carregar recursos TablerForNet

Adicione o bundle CSS e JavaScript uma vez no documento host ou caminho de layout usado pelo app.

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

Migração

Substitua padrões Bootstrap só depois de saber qual layout controla a página

O template padrão Blazor usa Bootstrap, um NavMenu inicial e containers simples. TablerForNet pode substituir esses itens, mas faça isso de forma planejada para não deixar CSS duplicado, ícones misturados ou dois componentes de título de página ativos.

01

Inventariar o layout atual

Liste os arquivos do template que controlam navegação, containers de página, ícones, referências Bootstrap e uso do título da página.

02

Substitua uma camada por vez

Comece por recursos e imports, depois migre NavMenu, MainLayout e uma página simples antes das telas complexas.

03

Resolver conflitos de nomes de componentes

Se PageTitle ou outro nome de componente existir em dois namespaces, qualifique explicitamente e mantenha a lista de using pequena.

04

Revisar comportamento responsivo

Abra larguras desktop e mobile antes de considerar a migração pronta. Navegação administrativa costuma quebrar primeiro em telas pequenas.

Remover referências padrão do Bootstrap

Mantenha uma base visual única. Deixar o CSS do template pode causar bugs de layout aleatórios depois.

HTMLRemover do documento host
<!-- 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" />

Resolver conflito do PageTitle

Se duas bibliotecas expõem PageTitle, qualifique o componente desejado ou remova o using conflitante.

RazorReferência explícita de componente
<TablerForNet.Components.PageTitle>
    Dashboard
</TablerForNet.Components.PageTitle>

Layout

Mova navegação e elementos da página para o layout antes de polir telas

Um layout limpo deixa o trabalho nas páginas mais previsível: um modelo de navegação, um container de conteúdo, um sistema de ícones e um local fixo para ações de página. Comece por aí antes de estilizar telas individuais.

Exemplo de navegação

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>

Exemplo de layout

RazorMainLayout.razor
@inherits LayoutComponentBase

<NavMenu />

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

Realidade do SEO

TablerForNet melhora a consistência da interface, não os metadados de busca

Uma UI administrativa limpa melhora usabilidade, acessibilidade e qualidade percebida. Não cria URLs canônicas, links hreflang, Open Graph ou JSON-LD. Mantenha essas regras em metadados e roteamento alinhados ao conteúdo visível.

Implementação relacionada

Combine framework de UI com metadados de página e links sensíveis a idioma-região

Use estes guias se o app TablerForNet tiver páginas públicas, rotas localizadas, artigos ou documentação rastreável além das telas administrativas.

Guia de metadados Guia de links idioma-região

Validação

Verifique o app renderizado, não só a instalação do pacote

Depois de compilar, veja a UI real no navegador. Navegação, breakpoints responsivos, estados de foco, CSS duplicado e saída de metadados são mais fáceis de notar visualmente do que na saída do gerenciador de pacotes.

  • Execute o app e abra uma página que use o novo layout.
  • Confirme que recursos Bootstrap e TablerForNet não estão em conflito.
  • Verifique navegação, estados de foco, ícones e breakpoints responsivos.
  • Inspecione título, H1, meta descrição, URL canônica e saída JSON-LD em páginas públicas.
  • Mantenha configuração do pacote, migração de layout e mudanças de SEO revisáveis separadamente.

Perguntas frequentes

O que o TablerForNet adiciona a um app Blazor?

Oferece blocos de UI Blazor baseados em Tabler para apps administrativos: navegação, cartões, padrões de formulário, ícones, peças de layout e estrutura para dashboards.

Devo remover o Bootstrap ao usar TablerForNet?

Geralmente sim. TablerForNet usa o sistema visual Tabler, então manter o Bootstrap padrão pode criar regras duplicadas de espaçamento, botões, ícones e layout.

TablerForNet é uma boa escolha para todo site Blazor?

Não. É indicado para telas administrativas, ferramentas internas, dashboards e apps com muitos dados. Para páginas editoriais, landing pages ou sites públicos com marca forte, um design personalizado menor pode ser melhor.

TablerForNet resolve SEO no Blazor?

Não. Ajuda a criar uma interface mais limpa, mas SEO depende do conteúdo renderizado, títulos, descrições, URLs canônicas, hreflang, Open Graph e JSON-LD alinhados à página.

Posso usar TablerForNet com Blazor WebAssembly?

Sim, mas as mesmas regras de frontend valem: mantenha bundles razoáveis, carregue recursos uma vez e torne conteúdo público disponível como HTML renderizado se SEO for importante.

Como lidar com conflitos do PageTitle?

Use o namespace explicitamente para o componente desejado ou remova o using conflitante. Isso é mais claro do que depender de qual PageTitle o compilador encontra primeiro.