Skip to main content

Como destacar informações importantes, como alertas, sucessos, erros no corpo de um Formulário? Adicione avisos coloridos no Formulário.

A imagem abaxio exemplifica 4 formas de colocar avisos coloridos:

image.png

Introdução

Este guia explica como adicionar avisos coloridos (amarelo, azul, verde e vermelho) em um formulário usando HTML e classes CSS. Os avisos são úteis para destacar informações importantes, como alertas, sucessos, erros e informações.

Passo a Passo

1. Na customização do Form, crie um componente cshtml

Crie um componente cshtml para definir os avisos coloridos. Você pode nomear o arquivo como AvisosColoridos.

2. Adicionar o Código dos Avisos

No componente cshtml AvisosColoridos, adicione o seguinte código:

<div class="alert alert-alt alert-warning" role="alert">
    <i class="icon md-lamp icon-alert-warning"></i>
    <div class="alert-text">
        Essa versão de um aviso de warning
    </div>
</div>

<div class="alert alert-alt alert-primary" role="alert">
    <i class="icon md-lamp icon-alert-primary"></i>
    <div class="alert-text">
        Essa versão de um aviso de informação
    </div>
</div>

<div class="alert alert-alt alert-success" role="alert">
    <i class="icon md-lamp icon-alert-success"></i>
    <div class="alert-text">
        Essa versão de um aviso de sucesso
    </div>
</div>

<div class="alert alert-alt alert-danger" role="alert">
    <i class="icon md-lamp icon-alert-danger"></i>
    <div class="alert-text">
        Essa versão de um aviso de erro
    </div>
</div>

3. Adicione o novo campo AvisosColoridos ao Form

image.png

4. Arraste o componente cshtml para dentro do form onde você gostaria que as msgs aparecessem.

image.png

5. Personalização

Você pode personalizar o texto e os ícones dos avisos conforme necessário. As css classes que mudam as cores de cada msg são  (alert-warning, alert-primary, alert-success, alert-danger) 

Conclusão

Seguindo esses passos, você pode facilmente adicionar avisos coloridos em seus formulários para melhorar a experiência do usuário e destacar informações importantes. 

Back to top