按钮

轻松创建美观的按钮，它们有不同的样式。

用法

要应用此组件，请将 .uk-button 类添加到 <a> 或 <button> 元素。现在您已创建了一个按钮。将 disabled 属性添加到 <button> 元素以禁用该按钮。

示例

链接 按钮 禁用

标记

<a class="uk-button" href="">...</a>
<button class="uk-button" type="button">...</button>
<button class="uk-button" type="button" disabled>...</button>

注意 如果您在一行中显示多个按钮，您可以在它们在较小的视口上堆叠时为它们添加上边距。只需将 实用工具组件 中的 data-uk-margin 属性添加到它们的父元素即可。

颜色修饰符

有几种颜色修饰符可用。只需添加以下类之一即可应用不同的外观。

大小修饰符

将 .uk-button-mini, .uk-button-small 或 .uk-button-large 类添加到按钮，使其更小或更大。

迷你按钮 迷你按钮

小按钮 小按钮

默认按钮 默认按钮

大按钮 大按钮

全宽按钮

添加 栅格组件 中的 .uk-width-1-1 类，按钮将占据全部宽度。

示例

按钮 按钮

标记

<button class="uk-button uk-width-1-1 uk-margin-small-bottom">...</button>
<button class="uk-button uk-width-1-1">...</button>

按钮组

要创建按钮组，请将 .uk-button-group 类添加到按钮周围的 <div> 元素。就是这样！无需其他标记。

示例

标记

<div class="uk-button-group">
    <a class="uk-button" href="">...</a>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

JavaScript

您可以通过 JavaScript 切换按钮状态。只需添加数据属性 data-uk-button。

示例

标记

<button class="uk-button uk-button-primary" type="button" data-uk-button>Button</button>

复选框按钮

通过将带有数据属性 data-uk-button-checkbox 的 <div> 元素包裹在一组按钮周围，像复选框一样在一组按钮之间切换。这也可以应用于按钮组。

示例

标记

<div data-uk-button-checkbox>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

单选按钮

通过将使用 data-uk-button-radio 的 div 元素包裹在一组按钮周围，像单选按钮一样在一组按钮之间切换。这也可以应用于按钮组。

示例

标记

<div data-uk-button-radio>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</div>

带有下拉菜单的按钮

可以使用按钮从 下拉菜单组件 触发下拉菜单。只需将 .uk-button-dropdown 类和 data-uk-dropdown 属性添加到包含按钮和下拉菜单本身的 <div> 元素即可。

示例

标记

<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- This is the button toggling the dropdown -->
    <button class="uk-button">...</button>

    <!-- This is the dropdown -->
    <div class="uk-dropdown uk-dropdown-small">
        <ul class="uk-nav uk-nav-dropdown">
            <li><a href="">...</a></li>
            <li><a href="">...</a></li>
        </ul>
    </div>

</div>

带有下拉菜单的按钮组

使用按钮组将按钮拆分为左侧的标准操作和右侧的下拉菜单切换。只需将一个 <div> 元素包裹在按钮和下拉菜单周围，并添加 data-uk-dropdown="{mode:'click'}" 属性。当然，下拉菜单也可以应用于按钮组内的按钮。

示例

标记

<div class="uk-button-group">

    <!-- This is a button -->
    <button class="uk-button">...</button>

    <!-- This is the container enabling the JavaScript -->
    <div data-uk-dropdown="{mode:'click'}">

        <!-- This is the button toggling the dropdown -->
        <a href="" class="uk-button">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
                <li><a href="">...</a></li>
            </ul>
        </div>

    </div>
</div>