Alertas

Os Alertas são usados para enviar um feedback contextual de sucesso, erro, warning ou apenas uma notificação de novas features no sistema.

Sucesso! Você conseguiu, parabéns!

Atenção: Você tem informações importantes para ler.

Cuidado: Cheque duas vezes. Você pode ter esquecido alguma informação.

Vish! Algo muito ruim aconteceu e você vai precisar refazer tudo. Clique aqui.

1
2
3
4
<div class="ls-alert-success"><strong>Sucesso!</strong> Você conseguiu, parabéns!</div>
<div class="ls-alert-info"><strong>Atenção:</strong> Você tem informações importantes para ler.</div>
<div class="ls-alert-warning"><strong>Cuidado:</strong> Cheque duas vezes. Você pode ter esquecido alguma informação.</div>
<div class="ls-alert-danger"><strong>Vish!</strong> Algo muito ruim aconteceu e você vai precisar refazer tudo. <a href="#">Clique aqui.</a></div>

Fechando alertas

Basicamente, se você tiver boxes de notificações, alertas ou qualquer outro tipo de elemento e gostaria de dar a opção do usuário remover da tela, você vai usar essa função.

Atenção

Nós não tratamos cookies ou qualquer solução back-end que previna o reaparecimento do elemento removido se o usuário der refresh na página. Você vai precisar fazer sua própria solução caso queira que o elemento não reapareça quando a página for atualizada.

Seletor	Descrição
.ls-dismissable	É o elemento que será dispensado.
data-ls-module="dismiss"	É o nosso trigger. É ele que ativa o script. Precisa estar no elemento que irá ser clicado para remover o `.ls-dismissable`, por exemplo um link, botão etc...
data-target="#target-id"	Necessário quando o elemento que será o trigger não for filho direto de `.ls-dismissable`, que é o elemento que será removido. Ele aceita IDs ou CLASSES.

Acessibilidade

Via javascript é adicionada a ARIA role="alert"

Veja primeiro o exemplo abaixo: ao clicar no X do lado direito, o alerta é fechado.

× Olá! Este é um alerta que pode ser dispensado.

1
2
3
4
<div class="ls-alert-warning ls-dismissable">
  <span data-ls-module="dismiss" class="ls-dismiss">&times;</span>
  <strong>Olá!</strong> Este é um alerta que pode ser dispensado.
</div>

A classe ls-dismissable avisa nosso script que ele será removido pelo elemento com a classe ls-dismiss e com o atributo data-ls-module="dismiss". Perceba que nesse formato o elemento .ls-dismiss é filho direto do elemento que será removido.

Tamanhos dos alertas

O Locaweb Style tem algumas classes funcionais para nos ajudar a aumentar o espaçamento dos elementos. Basta usar uma das classes abaixo para aumentar o tamanho dos alertas:

Nome	Descrição
.ls-xs-space	Coloca um padding de 5px na caixa
.ls-sm-space	Coloca um padding de 10px na caixa
.ls-md-space	Coloca um padding de 20px na caixa
.ls-lg-space	Coloca um padding de 40px na caixa

Sucesso! Você conseguiu, parabéns! Entre aqui.

Atenção: Você tem informações importantes para ler.

1
2
<div class="ls-alert-success ls-md-space"><strong>Sucesso!</strong> Você conseguiu, parabéns! <strong><a href="#">Entre aqui</a></strong>.</div>
<div class="ls-alert-info ls-sm-space"><strong>Atenção:</strong> Você tem informações importantes para ler.</div>

Fixando alertas

Para fixar alertas, tanto em cima quanto em baixo, basta utilizar as classes .ls-alert-fixed-top (em cima) ou .ls-alert-fixed-bottom (em baixo).

Veja um exemplo no painel