Pull to refresh

Notyjs — шикарная javascript библиотека для создания уведомлений. А также готовый плагин для Vuejs

Reading time 2 min
Views 16K

image


Простая, быстрая и производительная библиотека для создания 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, чтобы создать теплое и отзывчивое восприятие интерфейса.


image


Vuejs плагин для Notyjs


Кастомизация уведомлений очень простая. А для пользователей Vuejs, предлагаю готовую обертку этой библиотеки Vue-Notice с глобальным доступом из компонентов.


Установка


npm i @marcius-studio/vue-notice
yarn add @marcius-studio/vue-notice

Добавление плагина


import Vue from 'vue'
import VueNotice from '@marcius-studio/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 "~@marcius-studio/vue-notice/static/main.scss"; 

// import theme. Change "mint.scss" to another theme if nedded
@import "~@marcius-studio/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 если нужно отключить обратный отсчет
})

Уверен, кто еще с ней не знаком она во многом придется по вкусу.


Спасибо за внимание.

Tags:
Hubs:
+15
Comments 13
Comments Comments 13

Articles