跳到主要內容

文件

關閉

建立一個可以與不同組件結合使用的關閉圖示。

用法

要應用此組件，請將 uk-close 屬性新增到 <a> 或 <button> 元素。

<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 角色和屬性。

國際化

「關閉」組件使用以下翻譯字串。了解更多關於翻譯組件的資訊。

鍵 預設值 描述
label 關閉 aria-label 屬性。