toastify js Скачать - toastify js -исходный код скачать

toastify js

Другой исходный код

1.12.0

Скачать

Поджарить

Toastify - это легкая библиотека уведомлений о тосте ванили JS.

Демо

кликните сюда

Функции

Несколько сложенных уведомлений
Настраиваемый
Без блокировки потока выполнения

Параметры настройки

Уведомление текст
Продолжительность
Тост фоновый цвет
Закрыть значок дисплей
Показать положение
Офсетная позиция

Установка

Toastify теперь поддерживает установку через NPM

Запустите приведенную ниже команду, чтобы добавить Toastify-JS в ваш существующий или новый проект.

npm install --save toastify-js

или

yarn add toastify-js -S

Импорт Toastify-JS в ваш модуль, чтобы начать его использовать.

import Toastify from 'toastify-js'

Вы можете использовать CSS по умолчанию из Toastify, как ниже, а затем переопределить его или выбрать написать свой собственный CSS.

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

Добавление Toastifyjs на HTML -страницу с использованием традиционного метода

Чтобы начать использование Toastify , добавьте следующий CSS на вашу страницу.

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

И сценарий внизу страницы

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

Файлы доставляются через службу CDN, предоставленную JSDeliver

Документация

 Toastify ({
  Текст: «Это тост»,
  Продолжительность: 3000,
  назначение: "https://github.com/apvarun/toastify-js",
  Newwindow: True,
  Закрыть: правда,
  гравитация: "top", // `top 'или` bottom'
  Положение: "слева", // `` ``, `center 'или" справа "
  Stoponfocus: True, // предотвращает увольнение тоста на Hover
  Стиль: {фон: «Линейный градиент (справа, #00B09B, #96C93D)»,
  },
  OnClick: function () {} // обратный вызов после клика}). showtoast ();

Сообщения тостов будут сосредоточены на устройствах с шириной экрана менее 360px.

Смотрите изменение

Добавить собственные уроки

Если вы хотите использовать пользовательские классы на тосте для настройки (например, информация или предупреждение), вы можете сделать это следующим образом:

 Toastify ({
  Текст: «Это тост»,
  ClassName: «Информация»,
  Стиль: {фон: «Линейный градиент (справа, #00B09B, #96C93D)»,
  }}). Showtoast ();

Несколько классов также могут быть назначены в качестве строки с пробелами между именами классов.

Добавьте немного смещения

Если вы хотите добавить смещение в тост, вы можете сделать это следующим образом:

 Toastify ({
  Текст: «Это тост с смещением»,
  Offset: {x: 50, // горизонтальная ось - может быть число или строка, указывающая единство. Например: '2em'y: 10 // Вертикальная ось - может быть число или строка, указывающая единство. например: '2em'
  },}). showtoast ();

Тост будет протолкнуть на 50 пикселей справа по оси x и 10px сверху по оси Y.

Примечание:

Если position равна left , оно будет толкать слева. Если gravity будет равна bottom , она будет оттолкнут снизу.

API

Вариант ключа	тип	Использование	По умолчанию
текст	нить	Сообщение, которое будет отображаться в тосте	"Всем привет!"
узел	Element_node	Предоставьте узел, который будет установлен внутри тоста. `node` имеет более высокую приоритет над `text`
продолжительность	число	Продолжительность, для которой должен отображаться тост. -1 для постоянных тостов	3000
селектор	строка \| Element_node	Теневой корт	Селектор CSS или узел элемента, на который следует добавлять тост
место назначения	Url строка	URL, к которому должен проходить браузер на щелчке тоста
NewWindow	логический	Решает, следует ли открывать `destination` в новом окне или нет	ЛОЖЬ
закрывать	логический	Чтобы показать близкую иконку или нет	ЛОЖЬ
гравитация	"верх" или "внизу"	Чтобы показать тост сверху или снизу	"вершина"
позиция	"слева" или "справа"	Чтобы показать тост слева или вправо	"верно"
фоновая кожура	CSS -фоновое значение	Чтобы быть устаревшим, вместо этого используйте опцию `style.background` . Устанавливает цвет фона тоста
аватар	Url строка	Изображение/значок, который будет показан перед текстом
классное имя	нить	Возможность предоставить пользовательское имя класса для дальнейшей настройки
Stoponfocus	логический	Чтобы остановить таймер при паривании над тостом (только в случае установки продолжительности)	истинный
перезвонить	Функция	Вызывается, когда тост уволен
Onclick	Функция	Вызывается, когда нажимается тост
компенсировать	Объект	Возможность добавить некоторое смещение к оси
Escapemarkup	логический	Переключить поведение по умолчанию сэкономить HTML.	истинный
стиль	объект	Используйте свойства стиля HTML DOM, чтобы добавить любой стиль непосредственно к тостам
ариалив	нить	Объявите о Toaste to Screen Readers, см. Https://developer.mozilla.org/en-us/docs/web/accessibility/aria/aria_live_regions для вариантов	"вежливый"
Старый	логический	Установите заказ, в котором тосты сложены на странице	истинный

Униженные свойства: backgroundColor - вместо этого используйте опцию style.background

Поддержка браузеров

Т.е. / Edge	Firefox	Хром	Сафари	Опера
IE10, IE11, Edge	Последние 10 версий	Последние 10 версий	Последние 10 версий	Последние 10 версий

Участники

Астокер	Caiomoura1994	rndevfx	1ess	D4rn0k	Danielkaiser80
Skjnldsv	ЧЕЛОВЕК	Крисграхам	Вашиви	Feixuruins	Гэвинхонгри
Haydster7	Хоакинвойсик	Juliushaertl	Mort3za	SANDIP124	Тадаз
T12ung	Victorfeijo	Fiatjaf	Пруссо-Корм