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

Текст сообщения — центральный элемент уведомления в библиотеке iziToast. Он отвечает за информативность и читаемость уведомления. Библиотека предоставляет гибкие возможности для управления содержимым текста, его форматированием и стилями.

Простая установка текста

Для отображения текста используется ключ message в объекте конфигурации:

iziToast.show({
    title: 'Информация',
    message: 'Это уведомление с простым текстом.'
});
  • title — заголовок уведомления.
  • message — основной текст уведомления. Может содержать любую строку.

Поддержка HTML в тексте

iziToast позволяет вставлять HTML-теги в текст для более сложного форматирования:

iziToast.show({
    title: 'HTML-сообщение',
    message: '<b>Жирный текст</b> и <i>курсив</i>'
});

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

Длинные сообщения и перенос строк

Для удобного отображения длинных текстов можно использовать переносы строк через \n:

iziToast.show({
    title: 'Многострочное сообщение',
    message: 'Первая строка\nВторая строка\nТретья строка'
});

Библиотека автоматически корректно обрабатывает переносы, делая текст читаемым.

Настройка стилей текста

Текст уведомления можно стилизовать через CSS и встроенные опции:

iziToast.show({
    title: 'Стили текста',
    message: 'Красный текст с увеличенным размером',
    messageColor: '#ff0000',
    messageSize: '16px',
    messageLineHeight: 1.5
});
  • messageColor — цвет текста.
  • messageSize — размер шрифта.
  • messageLineHeight — высота строки, удобна для многострочного текста.

Динамический текст

Сообщение может формироваться динамически на основе данных:

const userName = 'Иван';
iziToast.show({
    title: 'Приветствие',
    message: `Добро пожаловать, ${userName}!`
});

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

Ограничение длины и обрезка текста

Для уведомлений с ограниченной областью можно задать максимальную ширину и автоматически обрезать текст:

iziToast.show({
    title: 'Длинный текст',
    message: 'Очень длинное уведомление, которое не помещается полностью',
    maxWidth: 400,
    timeout: 5000
});

Если текст превышает ширину, библиотека корректно переносит его на следующую строку. При необходимости можно добавить CSS-правила для обрезки через text-overflow: ellipsis.

Анимация и появление текста

В сочетании с опциями появления уведомления, текст можно анимировать:

iziToast.show({
    title: 'Анимация текста',
    message: 'Текст появится вместе с уведомлением',
    animateInside: true
});

Опция animateInside позволяет анимировать отдельные элементы уведомления, включая текст, независимо от основной анимации появления.

Комбинация с кнопками и интерактивными элементами

Текст может быть дополнен кнопками, ссылками и интерактивными элементами:

iziToast.show({
    title: 'Взаимодействие',
    message: 'Нажмите кнопку для действия',
    buttons: [
        ['<button>ОК</button>', function (instance, toast) {
            console.log('Нажата кнопка ОК');
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ]
});

Текст уведомления при этом остается читаемым и не теряет форматирование.

Резюме по работе с текстом

  • message — обязательный ключ для текста уведомления.
  • HTML можно использовать, но с осторожностью.
  • Переносы строк и стили делают текст читаемым и визуально приятным.
  • Динамический текст и шаблонные строки повышают гибкость уведомлений.
  • Комбинация с кнопками и интерактивными элементами расширяет возможности уведомления.

Текст сообщения в iziToast — не просто информация, это инструмент управления вниманием пользователя и акцентирования ключевых деталей уведомления. Его правильная настройка обеспечивает максимальную эффективность уведомлений.

Оглавление