Простая, быстрая и производительная библиотека для создания none-block уведомлений для вашего сайта или приложения.
Привет, Хабр!
Прошло много времени с момента написания первой и единственной статьи на Хабре о Notyjs. С 2012 года библиотека расширила свои возможности.
Сегодня она не зависит от jQuery.
import Noty from 'noty' new Noty({ text: 'Some notification text', }).show() // или new Noty({ text: 'Some notification text', animation: { open : 'animated fadeInRight', close: 'animated fadeOutRight' } }).show()
Поддержка из коробки css библиотек animate.css, mojs, bounce.js, velocity и других.
Добавлен дизайн уведомлений.
В версии 3.1 BETA появилась возможность создания Web Push уведомлений и многое другое.
По прежнему имеет 11 мест размещения уведомлений и 5 типов самих уведомлений.
О авторе
Nedim ARABACI Co-founder, CEO WHODIDTHIS.IO
Github: @needim
Опыт использования
Для своего проекта подбирал наиболее простую и интересную реализацию. Тестировал "vue-notifications" и "mini-toastr". Оба не соответствовали ожиданиям.
Продолжил поиски и наткнулся на Notyjs. Надо признаться, это была любовь с первого взгляда.
На проекте был готов дизайн, приятная анимация. Не хватало именно уведомлений на Noty, чтобы создать теплое и отзывчивое восприятие интерфейса.
Vuejs плагин для Notyjs
Кастомизация уведомлений очень простая. А для пользователей Vuejs, предлагаю готовую обертку этой библиотеки Vue-Notice с глобальным доступом из компонентов.
Установка
npm i @<deleted>/vue-notice yarn add @<deleted>/vue-notice
Добавление плагина
import Vue from 'vue' import VueNotice from '@<deleted>/vue-notice' Vue.use(VueNotice) // ИЛИ переопределить стандартные настройки Vue.use(VueNotice, { layout: 'topRight', // position: 'top', 'topLeft', etc. https://ned.im/noty/#/types theme: 'mint', // deffrents themes https://ned.im/noty/#/themes timeout: 5000, // default 5s. Set 0 if need no countdown, can be override for each notice progressBar: true, })
Подключение стилей
// import base styles @import "~@<deleted>/vue-notice/static/main.scss"; // import theme. Change "mint.scss" to another theme if nedded @import "~@<deleted>/vue-notice/static/themes/mint.scss";
Использование
this.$notice.success('success notice') // green this.$notice.error('error notice') // red this.$notice.warning('warning notice') // yellow this.$notice.info('info notice') // blue // при необходимости можно переопределить опции this.$notice.success('Success notice with overrided options', { timeout: 5000, // 5s. Установите 0 если нужно отключить обратный отсчет })
Уверен, кто еще с ней не знаком она во многом придется по вкусу.
Спасибо за внимание.
