Маркеры

Создает значок маркера, который может отображаться поверх изображений.

С помощью компонента Маркер вы можете создать значок, который может отображаться поверх изображений. Отличным вариантом использования являются всплывающие окна с визуальными элементами. Как насчет того, чтобы добавить к фотографиям интерактивные ярлыки? Используйте существующий компонент Позиции, чтобы разместить маркеры там, где вы хотите.

Использование компонента

Чтобы начать пользоваться компонентом, добавьте атрибут uk-marker к любому элементу. Можно пользоваться компонентом Позиция, чтобы размещать ваши маркеры в различных местах. Добавьте класс .uk-transform-center из компонента Утилиты центрировать сам маркер в его верхнем левом углу.

<a href="" uk-marker></a>

Внимание Добавьте классы .uk-light или .uk-dark, чтобы улучшить видимость на темных или светлых изображениях.

  • <div class="uk-child-width-1-2" uk-grid>
    <div>
        <div class="uk-inline uk-dark">
            <img src="images/light.jpg" alt="">
            <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
            <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" 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="images/dark.jpg" alt="">
            <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
            <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
            <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>
        </div>
    </div>
</div>