Текст сообщений

Библиотека Noty предоставляет гибкий инструмент для отображения уведомлений на веб-странице. Основная цель текстовых сообщений — информирование пользователя о событиях, ошибках, успехах или предупреждениях. Текст сообщений задаётся через параметр text, который может принимать строку HTML или обычный текст. Например:

new Noty({
    text: 'Данные успешно сохранены',
    type: 'success',
    timeout: 3000
}).show();

В этом примере создаётся уведомление типа success с текстом и автоматическим закрытием через 3 секунды.

Форматирование текста

Текст в Noty поддерживает HTML-разметку, что позволяет добавлять:

  • жирный или курсивный текст:
text: '<strong>Успех!</strong> Данные обновлены'
  • ссылки:
text: 'Перейти на <a href="/profile">профиль</a>'
  • списки и другие HTML-элементы:
text: '<ul><li>Первый пункт</li><li>Второй пункт</li></ul>'

Важно помнить, что использование HTML делает уведомление уязвимым для XSS-атак, если текст формируется из пользовательского ввода. В таких случаях следует предварительно экранировать данные.

Типы сообщений

Noty поддерживает несколько типов сообщений, которые визуально различаются и могут влиять на стиль текста:

  • alert — стандартное уведомление без специфического окраса
  • success — сообщение об успешной операции
  • error — сообщение об ошибке
  • warning — предупреждение
  • information — информационное уведомление

Тип задаётся через свойство type:

new Noty({
    text: 'Ошибка при сохранении данных',
    type: 'error',
    timeout: false
}).show();

При этом свойство timeout: false делает уведомление постоянным до закрытия пользователем.

Многострочные и динамические сообщения

Для отображения многострочного текста можно использовать тег <br>:

text: 'Сохранение данных завершено<br>Вы можете продолжить работу'

Для динамических сообщений текст можно формировать через шаблонные строки или функции:

const username = 'Иван';
new Noty({
    text: `Добро пожаловать, ${username}!`,
    type: 'information',
    timeout: 2500
}).show();

Добавление кнопок и интерактивного текста

Noty позволяет добавлять кнопки прямо в уведомление, что расширяет возможности текстовых сообщений:

new Noty({
    text: 'Вы уверены, что хотите удалить файл?',
    type: 'warning',
    buttons: [
        Noty.button('Да', 'btn btn-success', function() {
            console.log('Файл удалён');
        }),
        Noty.button('Нет', 'btn btn-error', function() {
            this.close();
        })
    ]
}).show();

Кнопки могут содержать текстовые лейблы, и через CSS можно менять их внешний вид.

Управление длиной текста

Noty автоматически адаптирует размер уведомления под текст, но при длинных сообщениях можно применять CSS-классы для ограничения ширины или переноса строк:

.noti-text {
    max-width: 300px;
    word-wrap: break-word;
}
new Noty({
    text: '<div class="noti-text">Очень длинное сообщение, которое должно корректно переноситься на несколько строк.</div>',
    type: 'information',
    timeout: 4000
}).show();

Интернационализация текста

Для многоязычных приложений текст сообщений может задаваться динамически в зависимости от языка интерфейса. Это удобно для уведомлений о статусах операций:

const messages = {
    ru: 'Данные успешно сохранены',
    en: 'Data saved successfully'
};

new Noty({
    text: messages['ru'],
    type: 'success',
    timeout: 3000
}).show();

Анимации текста

Noty позволяет интегрировать анимацию появления текста через параметры animation:

new Noty({
    text: 'Загрузка завершена',
    type: 'success',
    animation: {
        open: 'animated bounceInDown',
        close: 'animated bounceOutUp'
    },
    timeout: 2000
}).show();

Это придаёт уведомлению динамичный визуальный эффект при появлении и скрытии.

Вывод нескольких сообщений одновременно

Для вывода нескольких уведомлений с разными текстами можно использовать массивы и циклы:

const messages = ['Первое уведомление', 'Второе уведомление', 'Третье уведомление'];

messages.forEach(msg => {
    new Noty({
        text: msg,
        type: 'information',
        timeout: 2500
    }).show();
});

Каждое уведомление создаётся с собственным текстом, и библиотека автоматически управляет их расположением на странице.

Кастомизация текста через CSS

Текстовые сообщения можно полностью стилизовать через CSS-классы:

.noty_type_success {
    background-color: #28a745;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
}
new Noty({
    text: 'Операция выполнена успешно',
    type: 'success',
    timeout: 3000
}).show();

CSS-классы позволяют создавать уникальные визуальные темы для уведомлений, не меняя логику текста.

Хотите, я подготовлю продолжение с разбором дополнительных возможностей текста: HTML-шаблоны, иконки в сообщениях и динамическое обновление текста уведомлений в Noty?

Оглавление