标记／Marker

在图像上方创建一个标记图标。

用法

要应用此组件，请将 uk-marker 属性添加到任何元素。 可以使用 Position 组件 标记放置在图像的顶部。 还可以添加Utility 组件 中的 .uk-transform-center class，将标记居中到其左上角。

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

注意 添加 .uk-light 或 .uk-dark class，可以对元素效果进行优化，使其在深色或浅色图像上具有更好的可见性。

  • <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>

上一篇： Margin

下一篇： Modal

marker.md

# 标记／Marker

<p id="toptext" class="uk-text-lead">在图像上方创建一个标记图标。</p>

## Usage-用法

要应用此组件，请将 `uk-marker` 属性添加到任何元素。 可以使用 [Position 组件](position.md) 标记放置在图像的顶部。 还可以添加[Utility 组件](utility.md#transform) 中的 `.uk-transform-center` class，将标记居中到其左上角。

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

**注意** 添加 `.uk-light` 或 `.uk-dark` class，可以对元素效果进行优化，使其在深色或浅色图像上具有更好的可见性。

```example
<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>
```