No desenvolvimento de aplicações web (bem como mobile, desktop, etc.) com frequência utilizamos algumas “peças visuais” que se repetem, tanto dentro da aplicação, quanto entre diferentes aplicações, como botões, tabelas, menus. Às vezes a demanda pode ser suprida utilizando apenas recursos nativos de cada plataforma, como as tags da linguagem HTML. Em outros momentos, é preciso incrementar esses recursos básicos, adicionando mais funcionalidades e aperfeiçoando sua aparência.
Apesar deste tipo de atividade fazer parte naturalmente do processo de desenvolvimento dos softwares, há muitos casos em que a criação desse tipo de elemento por si só não agrega tanto valor ao produto final. Nestas situações, utilizar soluções já “prontas” (porém customizáveis) tende a ser a melhor escolha, tanto por gerar economia de tempo (e de esforço), quanto por garantir que estamos utilizando implementações já maduras e amplamente testadas.
É neste contexto em que entra o MudBlazor, uma biblioteca de componentes visuais gratuita e de código aberto, disponível para uso em projetos Blazor. Com ela, temos à disposição dezenas de elementos de uso comum em aplicações web, como botões, caixas de diálogo, grids, que podem ser adicionados às nossas aplicações com esforço mínimo.
Por padrão, os componentes do MudBlazor já possuem um estilo visual baseado no Material Design, garantindo uma aparência agradável e capaz de suprir boa parte das demandas com pouca ou nenhuma alteração. De toda forma, também é possível customizar essa aparência de acordo com a necessidade de cada projeto.
Neste artigo veremos como criar um novo projeto Blazor utilizando o template já disponível pelo MudBlazor, bem como aprenderemos a adicionar essa biblioteca em um projeto já criado e conhecer alguns de seus componentes.
Criando um projeto com o template MudBlazor
Caso você esteja iniciando um novo projeto, ou mesmo se deseja apenas explorar as capacidades do MudBlazor, é possível utilizar um template do Visual Studio que já traz a biblioteca instalada e pré-configurada.
Para tê-lo disponível em seu editor, execute o comando abaixo no seu terminal. Ele utiliza a .NET CLI para instalar um novo template de projeto:
dotnet new install MudBlazor.Templates
Feito isso, você já poderá iniciar um novo projeto utilizando a própria .NET CLI:
dotnet new mudblazor --name TestandoMudBlazor --all-interactive
Ou, se preferir e estiver usando o Visual Studio, basta selecionar o template MudBlazor Web App, como mostra a imagem a seguir:
Mais adiante, é importante selecionar um dos modos de interatividade disponíveis, uma vez que os componentes do MudBlazor possuem comportamentos dinâmicos (por exemplo, um menu que se abre ao ser clicado):
Além disso, note que na imagem acima selecionamos a opção Global no campo Interactivity location. Isso indica que todas as páginas e componentes serão interativos por padrão. Caso selecionemos “Per page/component”, os comportamentos dinâmicos implementados no arquivo MainLayout.razor seriam comprometidos, por não ter interatividade ativa.
Com o projeto criado, execute-o utilizando a .NET CLI ou pressionando F5 no Visual Studio:
dotnet watch run
Ao abrir a URL disponibilizada no browser, você deve visualizar o seguinte resultado, onde já é possível perceber alguns componentes do MudBlazor.
Adicionando o MudBlazor a um projeto existente
Anteriormente vimos como criar um novo projeto utilizando o template MudBlazor Web App, que já traz a biblioteca instalada e com o layout configurado. Porém, nem sempre este é o caso. Às vezes já temos um projeto iniciado e desejamos adicionar novos recursos a ele. Para isso, basta adicionar o pacote MudBlazor utilizando o Nuget ou a .NET CLI:
dotnet add package MudBlazor
Em seguida, localize o arquivo _Imports.razor e adicione a seguinte linha, que importa o namespace MudBlazor de forma global. Dessa forma, não é necessário adicionar a diretiva using em cada página onde os componentes forem utilizados:
@using MudBlazor
O próximo passo será abrir o arquivo App.razor e adicionar as folhas de estilo (CSS) e o script (JavaScript) requeridos pela biblioteca. Adicione as seguintes tag <style> no head e a tag <script> no body:
<link data-optimized="1" href="https://nextwave.education/wp-content/litespeed/css/dd3f2be076cfeb941309e3de100a4a14.css?ver=a4a14" rel="stylesheet" />
<link data-optimized="1" href="https://nextwave.education/wp-content/litespeed/css/5d171d61780501da5005e48437d09b38.css?ver=09b38" rel="stylesheet" /> <script data-optimized="1" src="https://nextwave.education/wp-content/litespeed/js/8223a4ace8ee9b5292bfb5e6f351651f.js?ver=1651f"></script>
Caso você esteja utilizando Bootstrap ou outra biblioteca que envolva estilização visual, pode acabar ocorrendo conflito entre as folhas de estilo. O ideal seria removê-los e utilizar apenas os estilos do MudBlazor. O mesmo pode ocorrer com seu código CSS próprio. Então, se você está usando um projeto recém-criado apenas para testes, pode apagar o conteúdo do arquivo app.css e remover a referência a bootstrap.min.css que vem por padrão.
Por fim, o último passo de configuração é adicionar os serviços do MudBlazor no Program.cs (ou Startup.cs):
using MudBlazor.Services;
...
builder.Services.AddMudServices();
Agora que todas as configurações foram feitas, você já pode usar os componentes. Por exemplo, adicione o seguinte código no MainLayout.razor:
@inherits LayoutComponentBase
<MudThemingProvider />
<MudLayout>
<MudAppBar Elevation="1">
<MudText Typo="Typo.h5" Class="ml-3">Application</MudText>
</MudAppBar>
<MudDrawer Open="true" ClipMode="DrawerClipMode.Always" Elevation="2">
<NavMenu />
</MudDrawer>
<MudMainContent Class="mt-16 pa-4">
@Body
</MudMainContent>
</MudLayout>
Agora, ao executar sua aplicação, o resultado deve ser semelhante à imagem abaixo:
Note que já temos as barras de menu superior e lateral do MudBlazor, porém com estilo ainda conflitante com o conteúdo anterior do projeto.
Abra então o arquivo NavMenu.razor e substitua seu conteúdo pelo seguinte:
<MudNavMenu>
<MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
<MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
<MudNavLink Href="weather" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Weather</MudNavLink>
</MudNavMenu>
O resultado atualizado é o que vemos abaixo:
Aqui já podemos notar o uso dos componentes NavMenu e NavLink, bem como dos ícones que já vêm incluídos por padrão na biblioteca.
Explorando os componentes
Conforme foi comentado anteriormente, existem dezenas de componentes disponíveis no MudBlazor. Vamos ver aqui apenas alguns deles, para que você entenda o procedimento básico para utilizá-los em seus projetos.
Então, considerando que você está usando uma aplicação Blazor recém criada, que contém uma página “Counter”, com um botão que incrementa um contador, vamos atualizar o layout dessa página. Comece então substituindo o conteúdo HTML dessa página pelo seguinte:
<MudCard>
<MudCardHeader>
<MudText Typo="Typo.h1">Contador</MudText>
</MudCardHeader>
<MudCardContent>
</MudCardContent>
</MudCard>
Aqui usamos o component Card, que representa um container genérico com cabeçalho, corpo e rodapé. Em seu cabeçalho utilizamos um componente Text, que funciona como um elemento de texto genérico cujas características podem ser customizadas. Aqui, definimos que sua aparência será de um título <h1>. Observe o uso de constantes para definição desse tamanho, facilitando o uso e evitando erros e maus cheiros como magic strings no código.
A aparência da página agora deve ser esta:
Agora, dentro do MudCardContent, adicione o seguinte bloco de código:
<MudGrid>
<MudItem xs="12" sm="6">
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(e => IncrementCount())">Incrementar</MudButton>
</MudItem>
<MudItem xs="12" sm="6">
<MudChip Icon="@Icons.Material.Filled.Check" Color="Color.Info">Contador: @currentCount</MudChip>
</MudItem>
</MudGrid>
Dessa vez estamos usando o componente Grid, que faz o mesmo papel do grid do Bootstrap (e por isso você não precisa dele se estiver usando o MudBlazor). Neste caso adicionamos dois itens ocuparão 12 colunas na resolução extra small (xs) e 6 colunas na resolução small (sm) e maiores.
Na primeira coluna temos um botão cuja aparência é do tipo “preenchida/cor sólida” (Variant.Filled) e o preenchimento utiliza a cor primária do tema atual, que por padrão é roxo. Também estamos tratando o evento OnClick desse botão, acionando o método IncrementCount que já vem por padrão quando criamos o projeto, e que apenas incrementa a variável currentCount.
Já na segunda coluna utilizamos o MudChip, que é um elemento semelhante ao badge do Bootstrap. Ele suporta texto, ícone e diferentes cores. Observe que o ícone também é definido por meio de constantes e que existem várias versões dos ícones. Na cor usamos a Info e no conteúdo exibimos a variável currentCount.
O resultado pode ser visto abaixo:
E se você redimensionar a janela do browser, verá as colunas se adaptando conforme a configuração que fizemos, bem como o menu lateral sendo ocultado automaticamente:
Para finalizar essa breve demonstração dos componentes, vamos adicionar um botão do tipo “hamburguer” na barra superior para exibir e ocultar a barra lateral. Para isso, volte no arquivo MainLayout.razor e altere seu conteúdo de acordo com o código abaixo:
@inherits LayoutComponentBase
<MudThemingProvider />
<MudLayout>
<MudAppBar Elevation="1">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => AlternarMenu())" />
<MudText Typo="Typo.h5" Class="ml-3">Application</MudText>
</MudAppBar>
<MudDrawer @bind-Open="menuAberto" ClipMode="DrawerClipMode.Always" Variant="@DrawerVariant.Mini" Elevation="2">
<NavMenu />
</MudDrawer>
<MudMainContent Class="mt-16 pa-4">
@Body
</MudMainContent>
</MudLayout>
@code {
private bool menuAberto = true;
private void AlternarMenu()
{
menuAberto = !menuAberto;
}
}
Adicionamos na barra superior um novo botão, dessa vez usando o MudIconButton, que ao ser clicado vai alternar o valor da variável booleana menuAberto. Esta, por sua vez, está sendo usada pelo MudDrawer para definir quando ele estará aberto. Assim, ao clicarmos no botão, o menu lateral irá abrir e fechar, como vemos na imagem a seguir:
Neste ponto já é possível perceber a riqueza de recursos do MudBlazor e como essa biblioteca nos gera ganho de tempo na construção do layout de nossas aplicações. Com pouquíssimo esforço já temos um layout responsivo com menu lateral.
Customizando a aparência dos componentes
Assim que instalamos o MudBlazor ele usa por padrão o tema que tem a cor roxa como principal. Porém, é possível customizar as cores, fontes, tamanhos, entre outras características. Para que isso seja possível, devemos criar uma instância da classe MudTheme e atribuí-la ao MudThemingProvider, que adicionamos no MainLayout.razor.
Na seção @code deste arquivo, adicione o seguinte trecho de código:
private MudTheme temaPadrao = new MudTheme
{
Palette = new PaletteLight
{
Primary = Colors.Blue.Default,
AppbarBackground = new MudBlazor.Utilities.MudColor("#4169E1")
},
Typography = new Typography
{
H1 = new H1
{
FontSize = "30px",
FontWeight = 700,
LineHeight = 2
}
}
};
Em seguida, altere a tag <MudThemingProvider>, da seguinte forma:
<MudThemingProvider Theme="temaPadrao"/>
Na variável temaPadrao podemos ver alguns tipos de customização:
- alteramos a cor primária da palleta para uma cor já definida na biblioteca (Colors.Blue.Default);
- alteramos a cor da barra superior para um valor customizado (código hexadecimal da cor);
- alteramos as características do título H1.
Feito isso, se voltarmos na página Counter veremos o seguinte resultado:
Note a cor da barra superior, do botão (que definimos como Primary) e a aparência do título, que definimos como H1 anteriormente.
Seguindo esta lógica você pode realizar toda a customização do tema, seguindo a identidade visual do seu sistema, e continuar utilizando as constantes de cor e tamanho no seu código, sem precisar espalhar diversos códigos hexadecimais e folhas de estilo por todo o projeto.
Conclusão
Como foi possível perceber ao longo deste artigo, o MudBlazor é uma biblioteca simples de ser instalada e utilizada, contando com uma estrutura de nomes intuitiva e diversas opções de componentes, além das possibilidades de customização.
Caso você não tenha uma identidade visual e layout definidos para seu projeto, apenas com as configurações padrão do MudBlazor já será possível obter um resultado consistente e agradável. E se você já tem uma paleta de cores, fontes e tamanhos definidos, vimos que é simples editar o tema da aplicação.
Agora, a partir desta introdução, você já pode instalar o MudBlazor em seus projetos e explorar todo o potencial dessa biblioteca.