0.1.4 • Published 10 months ago

b-toast v0.1.4

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

b-toast

Uma biblioteca de toasts para Vue 2

O b-toast é uma biblioteca de toasts simples e personalizáveis para Vue 2. Ele fornece um componente Vue fácil de usar para exibir notificações no estilo toast em seu aplicativo.

npm.io

Recursos

  • Exibe notificações de estilo toast de forma simples e elegante.
  • Personalizável para atender às necessidades do seu aplicativo.
  • Suporte a tipos de toasts: sucesso, erro, aviso, informativo, etc.
  • Fácil integração com projetos Vue 2 existentes.

NPM

https://www.npmjs.com/package/b-toast

Demonstração

Precisa de exemplos: demonstração

Instalação

$ npm install b-toast

Uso

Registro do plugin

Registre o componente b-toast globalmente em seu aplicativo Vue:

import Vue from "vue";
import bToast from "b-toast";
// Importe o css do Toast
import "b-toast/dist/bToast.css";

const options = {
  // Você pode setar as opções padrões aqui
};

Vue.use(bToast, options);

Em seguida, você pode usar o componente b-toast em qualquer lugar em seu aplicativo:

this.$btoast("Olá sou um toast!");

// Ou com opções
const id = this.$btoast("Conteúdo do toast", {
  isDark: true,
});
// Ao invocar o toast, é retornado um ID único que
// pode ser usado para removê-lo da tela, se necessário.

//Removendo todos os toasts
this.$btoast.clear();

//Removendo um dos toasts (por id)
this.$btoast.dismiss(id);

Também é possivel utilizar pela instância do Vue:

this.$btoast("Olá sou um toast!");

// Ou com opções
const id = Vue.prototype.$btoast("Conteúdo do toast", {
  type: "error",
});
// Ao invocar o toast, é retornado um ID único que
// pode ser usado para removê-lo da tela, se necessário.

//Removendo todos os toasts
Vue.prototype.$btoast.clear();

//Removendo um dos toasts (por id)
Vue.prototype.$btoast.dismiss(id);

this.$btoast(conteudo,?props)

this.$btoast.clear()

this.$toast.dismiss(id)

Vue.prototype.$btoast(conteudo,?props)

Vue.prototype.$btoast.clear()

Vue.prototype.$btoast.dismiss(id)

Props

Aqui estão as propriedades disponíveis para o componente b-toast:

AtributoTipoInicialDescrição
contentString--Define o conteúdo no toast. (requerido)
typeStringsuccessOefine o tipo de toast. Pode ser success, error, warning, info, ou qualquer outro tipo personalizado.
durationNumber3000Define a duração em milissegundos que o toast ficará visível antes de ser fechado automaticamente. Padrão: 5000 (5 segundos).
isDarkBooleanfalseDefine o tema padrão do toast. Padrão: false.

Design Baseado em Pine UI

O design deste projeto de toasts, b-toast, foi desenvolvido com base no Pine UI, um design system moderno e flexível para design de front-end. O Pine UI fornece um conjunto abrangente de componentes e estilos consistentes que ajudaram a moldar a aparência e a experiência do b-toast.

Para obter mais informações sobre o Pine UI, você pode visitar o Pine UI e explorar os recursos e a documentação fornecidos.

Licença

Este projeto está licenciado sob a MIT License.

0.1.0

10 months ago

0.1.2

10 months ago

0.1.1

10 months ago

0.1.4

10 months ago

0.1.3

10 months ago

0.0.13

1 year ago

0.0.12

1 year ago

0.0.11

1 year ago

0.0.10

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago

0.0.0

1 year ago