跳到主要内容

文档

关闭

创建一个可以与不同组件组合的关闭图标。

用法

要应用此组件，请将 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 属性。