メインコンテンツにスキップ

ドキュメント

マーカー

画像の上に表示できるマーカーアイコンを作成します。

使用方法

このコンポーネントを適用するには、任意の要素に 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 属性。