跳到主要内容

文档

标记

创建一个可以显示在图像顶部的标记图标。

用法

要应用此组件，请将 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" 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>

可访问性

标记组件会自动设置适当的 WAI-ARIA 角色、状态和属性。

国际化

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

键 默认 描述
label 打开 aria-label 属性。