ASP.NET Core MVC / Razor Pages: O Tema Básico

O Tema Básico é uma implementação de tema para a interface do usuário do ASP.NET Core MVC / Razor Pages. É um tema minimalista que não adiciona nenhum estilo além do Bootstrap básico. Você pode usar o Tema Básico como o tema base e construir seu próprio tema ou estilo em cima dele. Veja a seção Customização.

O Tema Básico possui suporte para idiomas da direita para a esquerda (RTL).

Se você está procurando um tema profissional e pronto para uso empresarial, você pode conferir o Tema Lepton, que faz parte do ABP Commercial.

Veja o documento Theming para aprender sobre temas.

Instalação

Se você precisa instalar manualmente este tema, siga os passos abaixo:

Instale o pacote NuGet Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic em seu projeto web.
Adicione AbpAspNetCoreMvcUiBasicThemeModule no atributo [DependsOn(...)] para a sua classe de módulo no projeto web.
Instale o pacote NPM @abp/aspnetcore.mvc.ui.theme.basic em seu projeto web (por exemplo, npm install @abp/aspnetcore.mvc.ui.theme.basic ou yarn add @abp/aspnetcore.mvc.ui.theme.basic).
Execute o comando abp install-libs em um terminal de linha de comando na pasta do projeto web.

Layouts

O Tema Básico implementa os layouts padrão. Todos os layouts implementam as seguintes partes:

O Layout da Aplicação

O Layout da Aplicação implementa as seguintes partes, além das partes comuns mencionadas acima:

Marca
Menu principal
Toolbar principal com seleção de idioma e menu do usuário

O Layout da Conta

O Layout da Conta implementa as seguintes partes, além das partes comuns mencionadas acima:

Marca
Menu principal
Toolbar principal com seleção de idioma e menu do usuário
Área de troca de inquilino

Layout Vazio

O layout vazio é vazio, como o nome sugere. No entanto, ele implementa as partes comuns mencionadas acima.

Customização

Você tem duas opções para personalizar este tema:

Sobrescrevendo Estilos/Componentes

Nesta abordagem, você continua a usar o tema como pacotes NuGet e NPM e personaliza as partes que precisa. Existem várias maneiras de personalizá-lo;

Sobrescrever os Estilos

Crie um arquivo CSS na pasta wwwroot do seu projeto:

Adicione o arquivo de estilo ao bundle global, no método ConfigureServices da sua classe de módulo:

Configure<AbpBundlingOptions>(options =>
{
    options.StyleBundles.Configure(BasicThemeBundles.Styles.Global, bundle =>
    {
        bundle.AddFiles("/styles/global-styles.css");
    });
});

Sobrescrever os Componentes

Veja o Guia de Customização da Interface do Usuário para aprender como substituir componentes, personalizar e estender a interface do usuário.

Copiar e Personalizar

Você pode executar o seguinte comando ABP CLI no diretório do projeto Web para copiar o código-fonte para a sua solução:

abp add-module Volo.BasicTheme --with-source-code --add-to-solution-file

Ou, você pode baixar o código-fonte do Tema Básico, copiar manualmente o conteúdo do projeto para a sua solução, reorganizar as dependências de pacote/módulo (veja a seção de Instalação acima para entender como ele foi instalado no projeto) e personalizar livremente o tema com base nos requisitos da sua aplicação.

Veja também

Theming

4.3 KiB Raw Permalink Blame History