跳到主要内容

文档

Marker

创建一个可以显示在图片上方的标记图标。

用法

要使用该组件，请为任意元素添加 uk-marker 属性。你可以使用 Position 组件 中的类，把标记定位到图片的上方。同时添加 Utility 组件 中的 .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" width="1800" height="1200" 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" width="1800" height="1200" 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>

可访问性

Marker 组件会自动为元素设置合适的 WAI-ARIA 角色、状态和属性。

国际化

Marker 组件使用了以下翻译字符串。了解关于如何翻译组件的更多信息。

Key 默认值 说明
label Open aria-label 属性。