FlickerAlerts

LinkedIn

Documentação de Uso

FlickerAlerts é uma biblioteca simples para criar alertas animados de sucesso, erro, aviso e informações. Eles podem ser exibidos automaticamente ou ser fechados manualmente pelo usuário.

Importação

Esses links são essenciais para o funcionamento adequado dos estilos do Bootstrap e dos ícones do Font Awesome.

"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"

Instalação

Instale via npm:

npm install flicker-alerts

Uso

Após a instalação, a biblioteca será importada no seu código. Você não precisará mais incluir o arquivo script diretamente no HTML. Em vez disso, use a função showAlert em seus componentes.

Uso no Angular

Com o FlickerAlerts instalado, importe-o no seu componente Angular e utilize-o conforme mostrado abaixo:

 
          import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
  
          export class AppComponent {
            showAlert() {
              FlickerAlerts.showAlert({
                type: 'success', // Opções: 'success', 'info', 'warning', 'danger' 
                title: 'Título',
                message: 'Mensagem personalizada',
                position: 'top-right'  
  
                 // Opções: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center', 'bottom-center'
              });
            }
          }
        

Caso o estilo da biblioteca não esteja sendo aplicado corretamente, adicione o caminho do CSS no arquivo angular.json: "styles": ["node_modules/flicker-alerts/style.css"]

Uso no React

Com o FlickerAlerts instalado, você pode usá-lo no seu componente React assim:

          import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
  
          const showAlert = () => {
            FlickerAlerts.showAlert({
              type: 'success', // Opções: 'success', 'info', 'warning', 'danger' 
              title: 'Título',
              message: 'Mensagem personalizada',
              position: 'top-right'  
  
               // Opções: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center', 'bottom-center'
            });
          };
        

Caso o estilo da biblioteca não esteja sendo aplicado corretamente, basta importar o CSS diretamente no arquivo principal, como index.js ou App.js: import 'flicker-alerts/style.css';

Modais

Aqui estão as instruções para usar modais com FlickerAlerts.

Uso no Angular

          import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
        
          export class AppComponent {
            showModal() {
              FlickerModals.showModal({
                type: 'warning', // Tipos: 'warning', 'delete' 
                title: 'Título do Modal',
                message: 'Mensagem personalizada para o modal.',
                onConfirm: () => { console.log('Confirmado!'); },
                onCancel: () => { console.log('Cancelado!'); }
              });
            }
          }
        

Uso no React

Com o FlickerAlerts instalado, você pode usá-lo no seu componente React assim:

          import FlickerAlerts, { FlickerModals } from 'flicker-alerts';
        
          const showModal = () => {
            FlickerModals.showModal({
              type: 'delete', // Tipos: 'warning', 'delete' 
              title: 'Título do Modal',
              message: 'Mensagem personalizada para o modal.',
              onConfirm: () => { console.log('Deletado com sucesso!'); },
              onCancel: () => { console.log('Cancelado!'); }
            });
          };
        

Caso o estilo da biblioteca não esteja sendo aplicado corretamente, adicione o caminho do CSS no arquivo angular.json ou index.js para React: import 'flicker-alerts/style.css';