UIkit3.x文档

关闭（Close）

创建一个可以与不同组件搭配使用的关闭图标。

用法

要应用此组件，请将 uk-close 属性添加到 <a> 或 <button> 元素。

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

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

放大

添加 .uk-close-large 创建更大的关闭按钮。

<button class="uk-close-large" type="button" uk-close></button>
  • <button class="uk-close-large" type="button" 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" 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" 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" 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>