Close

创建一个可与其他组件组合使用的关闭图标。

用法

要使用该组件，为 <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>

提示框中的关闭按钮

下面的示例展示了该组件如何与来自 Alert 组件的提示框配合使用。

<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>

下拉中的关闭按钮

下面的示例展示了该组件如何与 Drop 组件配合使用。

<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>

模态框中的关闭按钮

下面的示例展示了该组件如何与 Modal 组件配合使用。

<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>

Open modal

<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>

可访问性

Close 组件会自动设置合适的 WAI-ARIA 角色和属性。

关闭图标 带有 aria-label 属性；如果使用的是 <a> 元素，还会带有 button 角色。

国际化

Close 组件使用以下翻译字符串。了解关于翻译组件的更多内容。

键	默认值	描述
`label`	`Close`	`aria-label` 属性。

文档