Biblioteca de tostadas interactivas para móviles-toastedjs

Vista prévia

Descripción

toastedjs es un responsive, interactivo, Touch-Enabled notificación del Toast biblioteca para el escritorio y el móvil.

Main features:

• Inspirado en material Design.
• Soporta < a href = "https://google.github.io/material-design-icons/" target = "_ blank" rel = "noopener" > iconos de materiales .
• Dispositivo táctil compatible basado en < a href = "https://hammerjs.github.io/" target = "_ blank" rel = "noopener" > Hammer. js .
• Animaciones fluidas basadas en < a href = "http:/animejs.com/" target = "_ blank" rel = "noopener" > anime. js .
• 6 posiciones: ' arriba a la derecha ', ' superior-centro ', ' superior izquierda ', ' abajo a la derecha ', ' abajo-centro ', ' abajo a la izquierda '.
• Acciones personalizadas en los mensajes del sistema.
• 5 temas incorporados: vivo, material, Bootstrap, Colombo, Venecia y Bulma.
• 4 tipos de notificación: ' default ', ' Success ', ' info ', ' error '.

¿Cómo funciona?

Instalar, importar & incluir el toastedjs en su proyecto.

# NPM
$ npm install toastedjs --save

// ES 6
import Toasted from 'toastedjs'
import 'toastedjs/dist/toastedjs.min.css'

<!-- Browser -->
<link href="dist/toasted.min.css" rel="stylesheet">
<script src="dist/toasted.js"></script>

Crea un nuevo objeto tostado.

const toasted = new Toasted()

Mostrar una notificación del sistema predeterminada en la página.

toasted.show('A simple toast message')

Agregue un icono a la notificación del sistema.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">

const toasted = new Toasted({



icon : 'check'
})

Si desea anexar el icono al final del mensaje del sistema.

const toasted = new Toasted({



icon : {




name : 'check',




color : '#fafafa',




after : true



}
})

Agregue una acción personalizada al mensaje del sistema.

const toasted = new Toasted({



action : {




text : 'Action',




href : '#',




icon : 'check',




class : 'custom-class'




onClick : (e, toasted) => {





toasted.delete()




}



}
})

Más opciones de configuración con valores predeterminados.

const toasted = new Toasted({




// toast position



// 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left'



position: "top-right",




// toast duration



duration: null,




// check if the fullWidth is enabled



fullWidth: false,




// check if the toast needs to be fitted in the screen (no margin gap between screen)



fitToScreen: null,




// class name to be added on the toast



className: null,




// class name to be added on the toast container



containerClass: null,




// normal type will allow the basic color



// 'success', 'info', 'error'



type: "default",




// normal type will allow the basic color



// alive, material, bootstrap, colombo, venice, and bulma



theme: "material",




// normal type will allow the basic color



color:
null,




// get icon color



iconColor: null,




// complete call back of the toast



onComplete: null,

})

API methods.

// shows the toast message
toasted.show(message, options)

// shows a success toast message
toasted.success(message, options)

// shows an error toast message
toasted.error(message, options)

// shows an info toast message
toasted.info(message, options)

// clears the toast message
toasted.clear()

// Registers your own toast
toasted.register(name, message[string,function(payload)], options)

// Creates a new group of toasts
toasted.group(options)