Компонент Маркер Marker
Создайте «Маркер», иконку-значок, который может отображаться поверх изображений. Указатель (всплывающая подсказка) при наведении на маркер. Руководство. Примеры.
Применение
Маркер на изображении
Чтобы использовать компонент Маркер, добавьте к любому элементу атрибут uk-marker
.
Вы можете использовать для маркера абсолютное позиционирование,
чтобы поместить его поверх изображения или карты.
Для правильного расположения маркера на изображении также добавьте класс .uk-transform-center
из компонента полезных дополнений.
<a href="" uk-marker></a>
.uk-light
или .uk-dark
компонента Инверсия для лучшей видимости на темных или светлых изображениях.
Вы можете совместить маркер и всплывающую подсказку из компонента Tooltip.
В примерах с маркером находится всплывающая подсказка и встречается модальное окно.
-
-
<div class="uk-child-width-1-2" uk-grid> <div> <div class="uk-inline uk-dark"> <img src="/demo/img/light.jpg" width="450" height="300" alt="Демо" loading="lazy"> <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-tooltip="title: Приветик!" uk-marker></a> <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#modal-media-image" uk-toggle uk-tooltip="title: Нажми!" uk-marker></a> <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a> </div> </div> <div> <div class="uk-inline uk-light"> <img src="/demo/img/dark.jpg" width="450" height="300" alt="Демо" loading="lazy"> <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-tooltip="title: Красота!" uk-marker></a> <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#modal-media-image" uk-toggle uk-tooltip="title: Нажми!" uk-marker></a> <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a> </div> </div> <!-- Модальное окно --> <div id="modal-media-image" class="uk-flex-top" uk-modal> <div class="uk-modal-dialog uk-margin-auto-vertical"> <button class="uk-modal-close-outside" type="button" uk-close></button> <img src="/demo/img/photo.jpg" width="900" height="450" alt="Демо" loading="lazy"> </div> </div> </div>
Доступность
Компонент «Маркер» автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.
-
Маркер имеет свойство
aria-label
, а если используется элемент<a>
, то и рольbutton
.
Интернационализация
Ключ | По умолчанию | Описание |
---|---|---|
label |
Open |
aria-label атрибут. |
Подробнее о переводе компонентов.