🥇 Notificações personalizadas no LAB

Uma pergunta frequente que surge internamente ao usar nossa Ponte Angular Lungo é como mostrar uma notificação.

Lungo fornece uma API de notificação , mas existem alguns problemas em usá-la quando se trata de um projeto baseado em LAB. Lungo.Notification.confirm()vem com dois botões – cada um é uma <a>tag e, como eles têm um hrefvalor de #, o roteamento angular será ativado se você estiver usando rotas não HTML 5. Além disso, Lungo.Notification.html()permite que você especifique seu próprio HTML personalizado para exibição. Mas isso não tem o escopo Angular, então pronto para usar você não pode usar o que está acostumado.

Portanto, temos duas solicitações de recursos principais: fazer as notificações funcionarem.

Até que escrevamos um serviço de notificação dentro do LAB, veja como fazer algumas notificações ala Lungo:

<div id="overlay" class="notification">
  <div class="window show">
    <strong>I'm an overlay</strong>
    <button id="hide">Go away, overlay</button>
  </div>
</div>

Nosso JavaScript pode ser semelhante a:

Lungo.dom('#overlay').hide();

Lungo.dom('#calendarButton').tap(function() {
    Lungo.dom('#overlay').show();
});

Lungo.dom('#hide').tap(function() {
    Lungo.dom('#overlay').hide();
});

Com a sobreposição no HTML sendo usada com um controlador Angular, você obtém o poder do Angular com o estilo do Lungo.

Esse é um método rápido e sujo; Tenho 100% de certeza de que há uma maneira melhor de fazer isso sem usar o hide(), no entanto, a intenção é demonstrar a possibilidade de fazer isso, não exatamente como 🙂

Mais Informações

Você pode verificar as classes CSS de notificação do Lungo relevantes

Existe um JsFiddle que criei para ser uma demonstração simples disso.

Finalmente, se você deseja acompanhar o progresso no LAB, há o problema das notificações padrão e o problema das notificações HTML personalizadas .

Related Posts