Componente de ModalDialogComponent com Bootstrap no Blazor
Componente de modal dialog com Bootstrap no Blazor
Esta breve postagem no blog mostrará como utilizar o Bootstrap para criar um ModalDialogComponent pequeno e reutilizável.
Talvez para começar: O que é uma caixa de diálogo modal?Encontrado aqui
"Uma caixa de diálogo modal é uma caixa de diálogo que aparece no topo do conteúdo principal e move o sistema para um modo especial que requer interação do usuário. Esta caixa de diálogo desativa o conteúdo principal até que o usuário interaja explicitamente com a caixa de diálogo modal."
Isso significa que quando abrimos a caixa de diálogo, apenas os elementos dessa caixa de diálogo devem ser interativos. A boa notícia é que não precisamos cuidar tanto disso, pois o Bootstrap traz todos os utilitários para lidar com esse problema.
Construir o componente
Vamos criar um novo componente em Compartilhado chamado ModalDialog. Queremos receber dois parâmetros: um título de cabeçalho e queremos adicionar conteúdo dinâmico ao nosso diálogo modal. Também precisamos de uma maneira de abrir e fechar a caixa de diálogo:
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
public void Open()
{
}
public void Close()
{
}
}
O que significa abrir e fechar em nosso contexto de diálogo modal? É bem simples: quando abrimos a caixa de diálogo, basicamente tornamos a caixa de diálogo visível e a fechamos, bem, apenas a removemos da tela. Mas a caixa de diálogo em si estará sempre disponível, apenas alternaremos entre seu estado de visibilidade e fazemos isso através do atributo normal de exibição css. Eu também disse que o Bootstrap cuida da maioria dos problemas e também o Bootstrap faz isso via classes css. Portanto, toda vez que abrimos ou fechamos a caixa de diálogo, adicionamos as classes específicas do Bootstrap ou as removemos. E há exatamente duas classes que precisamos
O RenderFragment ChildContent permite que o componente "hospede" outros componentes HTML ou Blazor sem saber explicitamente quais são esses componentes. Se você quiser saber mais, confira a documentação do ASP.NET Core.
O que também precisamos é a capacidade de desativar cliques no "voltar". Então, tudo o que não está em nossa caixa de diálogo modal. Não se preocupe, o Bootstrap também nos cobriu aqui. Eles têm uma classe css chamada modal-backdrop exatamente para isso. Então, com essas informações, podemos construir nosso código por trás:
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
private string modalDisplay = "none;";
private string modalClass = string.Empty;
private bool showBackdrop = false;
public void Open()
{
modalDisplay = "block";
modalClass = "show";
showBackdrop = true;
}
public void Close()
{
modalDisplay = "none";
modalClass = string.Empty;
showBackdrop = false;
}
}
E agora só precisamos da última parte: O código html:
<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">@Title</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @onclick="Close">
</button>
</div>
<div class="modal-body">
@ChildContent
</div>
</div>
</div>
</div>
@if (showBackdrop)
{
<div class="modal-backdrop fade show"></div>
}
A caixa de diálogo modal e como ela é construída é retirada exclusivamente do exemplo do Bootstrap.
??Sim. Nosso componente está pronto!
Uso
Como temos nosso componente, precisamos usá-lo apenas uma vez. E isso é bastante fácil:
<button class="btn btn-primary">Open Dialog</button>
<ModalDialog Title="Hello World">
<p>Here some content</p>
</ModalDialog>
Agora o único problema é: como abrimos a caixa de diálogo? Porque o exemplo mostrado não fará basicamente nada. Portanto, precisamos de uma referência ao nosso diálogo para invocar o método Open dessa instância. E com certeza o Blazor nos oferece a possibilidade de obter uma referência a um elemento através do atributo @ref.
Aqui o exemplo completo:
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
<button class="btn btn-primary" @onclick="() => ModalDialog.Open()">Click me!</button>
<ModalDialog @ref="@ModalDialog" Title="Hello World">
<div class="row">
<h3>Lorem Ipsum</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ultricies sapien. Duis nec nunc erat. Vivamus eget sem tristique, lacinia mi id, cursus eros.</p>
<button class="btn btn-primary" @onclick="() => ModalDialog.Close()">Close</button>
</div>
</ModalDialog>
@code {
private ModalDialog ModalDialog { get; set; }
}
Resultado
Aqui o resultado final:
