跳至主要內容

文件

標記

建立一個可以顯示在圖片上方的標記圖示。

用法

要套用此元件，請將 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 屬性。