toastify js - toastify js

toastify js

Outro código-fonte

1.12.0

Baixar

Bestificar

Tostify é uma biblioteca leve e de notificação de torradas de baunilha.

Demonstração

Clique aqui

Características

Várias notificações empilhadas
Personalizável
Nenhum bloqueio do tópico de execução

Opções de personalização

Texto de notificação
Duração
Torrada cor de fundo
Exibição de ícone feche
Posição de exibição
Posição de deslocamento

Instalação

Testificar agora suporta a instalação via NPM

Execute o comando abaixo para adicionar o Testify-JS ao seu projeto existente ou novo.

npm install --save toastify-js

ou

yarn add toastify-js -S

Importar Toastify-Js para o seu módulo para começar a usá-lo.

import Toastify from 'toastify-js'

Você pode usar o CSS padrão do testado como abaixo e posteriormente substituí -lo ou optar por escrever seu próprio CSS.

import "toastify-js/src/toastify.css"

Adicionando toastifyJs à página HTML usando o método tradicional

Para começar a usar o Toastify , adicione o seguinte CSS à sua página.

 <link rel = "Stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

E o script na parte inferior da página

 <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/toastify-js"> </script>

Os arquivos são entregues através do serviço CDN fornecido pelo JSDeliver

Documentação

 Bestificar ({
  texto: "Este é um brinde",
  Duração: 3000,
  Destino: "https://github.com/apvarun/toastify-js",
  newwindow: verdadeiro,
  perto: verdade,
  Gravity: "Top", // `top` ou` Bottom`
  Posição: "Esquerda", // `esquerda`,` Center` ou `Right`
  Stoponfocus: True, // evita a denúncia de torradas em pairar
  Estilo: {Background: "Linear-gradiente (à direita, #00B09b, #96C93D)",
  },
  OnClick: function () {} // retorno de chamada após clique}). showtoast ();

As mensagens de torrada serão centradas em dispositivos com largura da tela menor que 360px.

Veja o Changelog

Adicionar aulas personalizadas próprias

Se você deseja usar aulas personalizadas na torrada para personalizar (como informações ou aviso, por exemplo), você pode fazer isso da seguinte maneira:

 Bestificar ({
  texto: "Este é um brinde",
  ClassName: "Info",
  Estilo: {Background: "Linear-gradiente (à direita, #00B09b, #96C93D)",
  }}). ShowToast ();

Várias classes também podem ser atribuídas como uma string, com espaços entre nomes de classe.

Adicione um pouco de deslocamento

Se você deseja adicionar deslocamento à torrada, pode fazer isso da seguinte forma:

 Bestificar ({
  texto: "Esta é uma torrada com deslocamento",
  deslocamento: {x: 50, // eixo horizontal - pode ser um número ou uma string indicando unidade. Por exemplo: '2em'y: 10 // eixo vertical - pode ser um número ou uma string indicando unidade. por exemplo: '2em'
  },}). ShowToast ();

A torrada será empurrada 50px da direita no eixo x e 10px de cima no eixo Y.

Observação:

Se position for igual à left , ela será empurrada da esquerda. Se gravity for igual ao bottom , ela será empurrada de baixo.

API

Tecla de opção	tipo	Uso	Padrões
texto	corda	Mensagem a ser exibida na torrada	"Olá!"
nó	Element_Node	Forneça um nó a ser montado dentro da torrada. `node` tem maior precedência sobre `text`
duração	número	Duração para a qual a torrada deve ser exibida. -1 para torrada permanente	3000
Seletor	string \| Element_Node	Shadowroot	Seletor CSS ou nó de elemento no qual a torrada deve ser adicionada
destino	String de URL	URL para o qual o navegador deve ser navegado com o clique da torrada
newwindow	booleano	Decide se o `destination` deve ser aberto em uma nova janela ou não	falso
fechar	booleano	Para mostrar o ícone próximo ou não	falso
gravidade	"Top" ou "Bottom"	Para mostrar a torrada de cima ou de baixo	"principal"
posição	"Esquerda" ou "Right"	Para mostrar a torrada à esquerda ou direita	"certo"
BackgroundColor	CSS Valor de fundo	Para ser descontinuado, use `style.background` Opção. Define a cor de fundo da torrada
Avatar	String de URL	Imagem/ícone a ser mostrado antes do texto
ClassName	corda	Capacidade de fornecer nome de classe personalizado para maior personalização
Stoponfocus	booleano	Para parar o timer quando pairou sobre a torrada (apenas se a duração for definida)	verdadeiro
ligar de volta	Função	Invocado quando a torrada é demitida
ONCLICK	Função	Chamado quando a torrada é clicada
desvio	Objeto	Capacidade de adicionar algum deslocamento ao eixo
EscapeMarkup	booleano	Alternar o comportamento padrão de escapar da marcação HTML	verdadeiro
estilo	objeto	Use as propriedades do estilo html dom para adicionar qualquer estilo diretamente à torrada
arialivo	corda	Anuncie o brinde aos leitores de tela, consulte https://developer.mozilla.org/en-us/docs/web/accessibility/aria/aria_live_regions para opções	"educado"
Oldestfirst	booleano	Defina a ordem em que as torradas são empilhadas na página	verdadeiro

Propriedades depreciadas: backgroundColor - Use style.background Option

Suporte aos navegadores

Ou seja, Edge	Firefox	Cromo	Safári	Ópera
IE10, ie11, Edge	Últimas 10 versões	Últimas 10 versões	Últimas 10 versões	Últimas 10 versões

Colaboradores

Astoker	CaiMoura1994	rndevfx	1Ess	D4RN0K	Danielkaiser80
skjnldsv	Chasedanda	Chrisgraham	Wachiwi	Feixuruins	Gavinhungry
Haydster7	Joaquinwojcik	Juliushaertl	Mort3za	Sandip124	Tadaz
T12ung	Victorfeijo	Fiatjaf	Prousseau-Korem