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

ドキュメント

閉じる

様々なコンポーネントと組み合わせることができる閉じるアイコンを作成します。

使用方法

このコンポーネントを適用するには、<a>または<button>要素にuk-close属性を追加します。

<button type="button" uk-close></button>

<a href="" uk-close></a>
  • <button type="button" aria-label="Close" uk-close></button>

ラージモディファイア

より大きな閉じるボタンにするには、.uk-close-largeクラスを追加します。

<button class="uk-close-large" type="button" uk-close></button>
  • <button class="uk-close-large" type="button" aria-label="Close" uk-close></button>

アラート内の閉じるボタン

これは、アラートコンポーネントのアラートボックスでこのコンポーネントがどのように使用されるかの例です。

<div uk-alert>
    <button class="uk-alert-close" type="button" uk-close></button>
</div>

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div uk-alert>
    <button class="uk-alert-close" type="button" aria-label="Close" uk-close></button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

ドロップ内の閉じるボタン

これは、ドロップコンポーネントでこのコンポーネントがどのように使用されるかの例です。

<div uk-drop>
    <button class="uk-drop-close" type="button" uk-close></button>
</div>

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Click</button>
    <div uk-drop="mode: click">
        <div class="uk-card uk-card-body uk-card-default">
            <button class="uk-drop-close" type="button" aria-label="Close" uk-close></button>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
    </div>
</div>

モーダル内の閉じるボタン

これは、モーダルコンポーネントでこのコンポーネントがどのように使用されるかの例です。

<div id="modal" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" uk-close></button>
    </div>
</div>
  • モーダルを開く 
  • <a class="uk-button uk-button-default" href="#modal" uk-toggle>Open modal</a>
<div id="modal" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" aria-label="Close" uk-close></button>
        <h2 class="uk-modal-title">Headline</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </p>
    </div>
</div>

アクセシビリティ

閉じるコンポーネントは、適切なWAI-ARIAの役割とプロパティを自動的に設定します。

国際化

閉じるコンポーネントは、以下の翻訳文字列を使用します。コンポーネントの翻訳について詳しく学んでください。

キー デフォルト 説明
閉じる 閉じる aria-label属性。