跳至主要内容

文档

关闭

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

用法

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