Crie componentes Blazor reutilizáveis usando layouts
- 7 minutos
Blazor inclui layouts para facilitar a codificação de elementos comuns da interface do usuário (UI) que aparecem em muitas páginas em seu aplicativo.
Suponha que você esteja trabalhando no site da empresa de entrega de pizza e tenha criado o conteúdo para a maioria das páginas principais como um conjunto de componentes Blazor. Você deseja garantir que essas páginas tenham a mesma marca, menus de navegação e seção de rodapé. No entanto, você não quer ter que copiar e colar esse código em vários arquivos.
Aqui, você aprende a usar componentes de layout no Blazor para renderizar HTML comum em várias páginas.
Note
Os blocos de código nesta unidade são exemplos ilustrativos. Você escreve seu próprio código na próxima unidade.
O que são layouts Blazor?
Na maioria dos sites, a organização dos elementos da interface do usuário é compartilhada em várias páginas. Por exemplo, pode haver um banner de marca na parte superior da página, os links de navegação do site principal no lado esquerdo e um aviso legal na parte inferior. Depois de codificar esses elementos comuns da interface do usuário em uma página, é tedioso copiá-los e colá-los no código de todas as outras páginas. Pior, se houver uma alteração posterior, como uma nova seção principal do site para vincular ou uma mudança de marca do site, você terá que fazer as mesmas alterações repetidas em todos os componentes individuais. Em vez disso, use um componente de layout para simplificar e reutilizar elementos comuns da interface do usuário.
Um componente de layout no Blazor é aquele que compartilha sua marcação renderizada com todos os componentes que fazem referência a ele. Você coloca elementos comuns da interface do usuário, como menus de navegação, identidade visual e rodapés, no layout. Em seguida, você faz referência a esse layout de vários outros componentes. Quando a página é renderizada, elementos exclusivos, como os detalhes da pizza solicitada, vêm do componente de referência. Mas, elementos comuns vêm do layout. Você só precisa codificar os elementos comuns da interface do usuário uma vez, no layout. Então, se você precisar mudar a marca do site, ou fazer alguma outra alteração, você só tem que corrigir o layout. A alteração aplica-se automaticamente a todos os componentes de referência.
Codifique um layout Blazor
Um layout Blazor é um tipo específico de componente, portanto, escrever um layout Blazor é uma tarefa semelhante a escrever outros componentes para renderizar a interface do usuário em seu aplicativo. Por exemplo, você usa @code bloco e muitas diretivas da mesma maneira. Os layouts são definidos em arquivos com uma .razor extensão. O arquivo geralmente é armazenado na pasta Compartilhada dentro do seu aplicativo, mas você pode optar por armazená-lo em qualquer local acessível aos componentes que o usam.
Dois requisitos são exclusivos dos componentes de layout Blazor:
- Você deve herdar a
LayoutComponentBaseclasse. - Você deve incluir a
@Bodydiretiva no local onde deseja renderizar o conteúdo dos componentes aos quais está fazendo referência.
@inherits LayoutComponentBase
<header>
<h1>Blazing Pizza</h1>
</header>
<nav>
<a href="Pizzas">Browse Pizzas</a>
<a href="Toppings">Browse Extra Toppings</a>
<a href="FavoritePizzas">Tell us your favorite</a>
<a href="Orders">Track Your Order</a>
</nav>
@Body
<footer>
@new MarkdownString(TrademarkMessage)
</footer>
@code {
public string TrademarkMessage { get; set; } = "All content is © Blazing Pizzas 2021";
}
Note
Os componentes de layout não incluem uma @page diretiva porque não lidam diretamente com solicitações e não devem ter uma rota criada para eles. Em vez disso, os componentes de referência usam a @page diretiva.
Se você criou seu aplicativo Blazor a partir de um modelo de projeto Blazor, o layout padrão do aplicativo é o componente Shared/MainLayout.razor .
Usar um layout em um componente Blazor
Para usar um layout de outro componente, adicione a @layout diretiva com o nome do layout a ser aplicado. O HTML do componente é renderizado na posição da @Body diretiva.
@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Este diagrama ilustra como um componente e um layout são combinados para renderizar o HTML final:
Se você quiser aplicar um modelo a todos os componentes Blazor em uma pasta, você pode usar o arquivo _Imports.razor como um atalho. Quando o compilador Blazor encontra esse arquivo, ele inclui suas diretivas em todos os componentes da pasta automaticamente. Essa técnica elimina a necessidade de adicionar a @layout diretiva a cada componente e se aplica a componentes na mesma pasta que o arquivo _Imports.razor e todas as suas subpastas.
Important
Não adicione uma @layout diretiva ao arquivo _Imports.razor na pasta raiz do seu projeto porque isso resulta em um loop infinito de layouts.
Se você quiser aplicar um layout padrão a cada componente em todas as pastas do seu aplicativo Web, poderá fazê-lo no componente App.razor , onde configurará o componente Roteador , como aprendeu na unidade 2. Na tag , use o <RouteView>DefaultLayout atributo.
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazingPizzasMainLayout)" />
</Found>
<NotFound>
<p>Sorry, there's nothing at this address.</p>
</NotFound>
</Router>
Os componentes que têm um layout especificado na sua própria diretiva @layout ou num ficheiro _Imports.razor sobrepõem esta configuração de layout padrão.