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