Компонент Маркер : 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" alt=""> <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" alt=""> <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" alt=""> </div> </div> </div>