2.8 KiB
ASP.NET Core MVC / Razor Pages: Cabeçalho da Página
O serviço IPageLayout pode ser usado para definir o título da página, o item de menu selecionado e os itens do breadcrumb para uma página. É responsabilidade do tema renderar esses elementos na página.
IPageLayout
O IPageLayout pode ser injetado em qualquer página/view para definir as propriedades do cabeçalho da página.
Título da Página
O título da página pode ser definido da seguinte forma:
@inject IPageLayout PageLayout
@{
PageLayout.Content.Title = "Lista de Livros";
}
- O título da página é definido na tag HTML
title(além do nome da marca/aplicativo). - O tema pode renderizar o título da página antes do conteúdo da página (ainda não implementado pelo Tema Básico).
Breadcrumb
O Tema Básico atualmente não implementa o breadcrumb.
O Tema LeptonX Lite suporta o breadcrumb.
Itens do breadcrumb podem ser adicionados ao PageLayout.Content.BreadCrumb.
Exemplo: Adicionar Gerenciamento de Idioma aos itens do breadcrumb.
PageLayout.Content.BreadCrumb.Add("Gerenciamento de Idioma");
O tema então renderiza o breadcrumb. Um exemplo do resultado renderizado pode ser:
- O ícone Home é renderizado por padrão. Defina
PageLayout.Content.BreadCrumb.ShowHomecomofalsepara ocultá-lo. - O nome da página atual (obtido do
PageLayout.Content.Title) é adicionado por padrão como o último item. DefinaPageLayout.Content.BreadCrumb.ShowCurrentcomofalsepara ocultá-lo.
Qualquer item que você adicionar é inserido entre o Home e os itens da página atual. Você pode adicionar quantos itens forem necessários. O método BreadCrumb.Add(...) recebe três parâmetros:
text: O texto a ser exibido para o item do breadcrumb.url(opcional): Uma URL para navegar, se o usuário clicar no item do breadcrumb.icon(opcional): Uma classe de ícone (comofas fa-user-tiepara Font-Awesome) para exibir junto com otext.
O Item de Menu Selecionado
O Tema Básico atualmente não implementa o item de menu selecionado, pois não é aplicável ao menu superior, que é a única opção para o Tema Básico no momento.
O Tema LeptonX Lite suporta o item de menu selecionado.
Você pode definir o nome do item de menu relacionado a esta página:
PageLayout.Content.MenuItemName = "BookStore.Books";
O nome do item de menu deve corresponder a um nome de item de menu único definido usando o sistema de Navegação / Menu. Nesse caso, espera-se que o tema torne o item de menu "ativo" no menu principal.
