跳至主要内容

文档

标记

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

用法

要应用此组件，请将 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 角色、状态和属性。

国际化

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

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