Компонент Маркер

Создайте «Маркер», иконку-значок, который может отображаться поверх изображений. Указатель (всплывающая подсказка) при наведении на маркер. Руководство. Примеры.

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="images/light.webp" 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="images/dark.webp" 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="images/photo.webp" width="900" height="450" alt="Демо" loading="lazy">
        </div>
    </div>
</div>

Доступность

Компонент «Маркер» автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.

  • Маркер имеет свойство aria-label, а если используется элемент <a>, то и роль button.

Интернационализация

Компонент «Маркер» использует следующие строки перевода:
Ключ По умолчанию Описание
label Open aria-label атрибут.

Подробнее о переводе компонентов.