Користувацькі атрибути

Версія Esl 1.3 вводить можливість додавати власні кастомні HTML-атрибути до будь-якого елемента.

Ви можете додати кастомні атрибути в розділі “Стиль > Атрибути”. Встановіть “Ім’я” та “Значення”, і ваші атрибути будуть додані до найбільш відповідного вузла елемента. За замовчуванням ваші атрибути додаються до кореневого вузла елемента. Крім вручну введених значень, ви також можете заповнити свої кастомні атрибути динамічними даними.

Тут ви зможете вставити кілька атрибутів (ім’я та значення). Ви також зможете використовувати динамічні дані в полях імені та значення.

Контейнер: Кастомні атрибути

Скажімо, ви хочете додати ARIA роль та мітку до контейнера, який містить кілька зображень, які повинні бути враховані як одне зображення. Ви б додали наступні два атрибути під час редагування вашого контейнера:

  • Ім’я атрибута #1: role
  • Значення атрибута #1: img
  • Ім’я атрибута #2: aria-label
  • Значення атрибута #2: Опис загального зображення

Це призводить до наступного HTML-коду контейнера:

<div id="esl-element-sfglik" class="esl-element-sfglik esl-container" role="img" aria-label="Опис загального зображення">... Елементи контейнера ...</div>

Кастомні атрибути мають пріоритет над атрибутами за замовчуванням. Отже, якщо ви встановите кастомний alt атрибут під час редагування вашого зображення, цей кастомний атрибут буде використовуватися замість атрибута alt за замовчуванням.

Елементи, до яких додано кастомні атрибути, мають наступні специфічні HTML-теги:

Елемент Esl HTML-тег
Навігаційне меню <nav>
Заголовок <h1> або будь-який інший заголовковий тег
Текст <div class=”text-wrapper”>
Кнопка <a> або <span> в залежності від наявності посилання
Зображення <img>
Відео <div class=”esl-video-wrapper”>
Форма <form>

Як додати підказки

Esl постачається з вбудованими (CSS-only) підказками, які можна налаштувати за допомогою власних атрибутів.

Переконайтеся, що ви встановили атрибут “Ім’я” на data-balloon та значення на те, що ви хочете, щоб текст вашої підказки був. Вам також потрібно встановити другий HTML атрибут з іменем data-balloon-pos і задати значення на те, як ви хочете, щоб ваша підказка була розміщена:

  • вгорі | праворуч-вгорі | ліворуч-вгорі
  • праворуч
  • внизу | знизу-вниз | також знизу
  • ліворуч

Для повного списку всіх доступних HTML атрибутів підказок, будь ласка, відвідайте офіційний веб-сайт бібліотеки Balloon.css, яку використовує Esl для своїх підказок: https://kazzkiq.github.io/balloon.css/

Якщо ви плануєте додати підказки на елементі Іконка, будь ласка, оберніть елемент Іконка в елемент Div та встановіть атрибут на елементі Div. Інакше CSS бібліотеки підказок перекриє CSS елемента Іконка і зробить його невидимим на фронтенді.

Ресурси: