Компонент Маркер : 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>
Документация
Компоненты