跳至主要内容

文档

按钮

轻松创建漂亮美观的按钮，提供不同的样式。

用法

要应用此组件，请在 <a> 或 <button> 元素中添加 .uk-button 类和一个修饰符，例如 .uk-button-default。将 disabled 属性添加到 <button> 元素中以禁用按钮。

<a class="uk-button uk-button-default" href=""></a>

<button class="uk-button uk-button-default"></button>

<button class="uk-button uk-button-default" disabled></button>

  • 链接 

  • <p uk-margin>
    <a class="uk-button uk-button-default" href="#">Link</a>
    <button class="uk-button uk-button-default">Button</button>
    <button class="uk-button uk-button-default" disabled>Disabled</button>
</p>

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

样式修饰符

提供了一些样式修饰符。只需添加以下其中一个类即可应用不同的外观。

类 描述
.uk-button-default 默认按钮样式。
.uk-button-primary 表示主要操作。
.uk-button-secondary 表示重要操作。
.uk-button-danger 表示危险或负面操作。
.uk-button-text 应用排版样式。
.uk-button-link 应用纯链接样式。 
<button class="uk-button uk-button-primary"></button>

  • <p uk-margin>
    <button class="uk-button uk-button-default">Default</button>
    <button class="uk-button uk-button-primary">Primary</button>
    <button class="uk-button uk-button-secondary">Secondary</button>
    <button class="uk-button uk-button-danger">Danger</button>
    <button class="uk-button uk-button-text">Text</button>
    <button class="uk-button uk-button-link">Link</button>
</p>

尺寸修饰符

向按钮添加 .uk-button-small 或 .uk-button-large 类可以将其缩小或放大。

<button class="uk-button uk-button-default uk-button-small"></button>

<button class="uk-button uk-button-default uk-button-large"></button>

  • <p uk-margin>
    <button class="uk-button uk-button-default uk-button-small">Small button</button>
    <button class="uk-button uk-button-primary uk-button-small">Small button</button>
    <button class="uk-button uk-button-secondary uk-button-small">Small button</button>
</p>

<p uk-margin>
    <button class="uk-button uk-button-default uk-button-large">Large button</button>
    <button class="uk-button uk-button-primary uk-button-large">Large button</button>
    <button class="uk-button uk-button-secondary uk-button-large">Large button</button>
</p>

宽度修饰符

从 宽度组件 中添加 .uk-width-1-1 类，按钮将占满整个宽度。

示例

  • <button class="uk-button uk-button-default uk-width-1-1 uk-margin-small-bottom">Button</button>
<button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom">Button</button>
<button class="uk-button uk-button-secondary uk-width-1-1">Button</button>

组

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

<div class="uk-button-group">
    <button class="uk-button uk-button-default"></button>
    <button class="uk-button uk-button-default"></button>
    <button class="uk-button uk-button-default"></button>
</div>
  • <div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-secondary">Button</button>
        <button class="uk-button uk-button-secondary">Button</button>
        <button class="uk-button uk-button-secondary">Button</button>
    </div>
</div>

<div class="uk-margin-small">
    <div class="uk-button-group">
        <button class="uk-button uk-button-primary">Button</button>
        <button class="uk-button uk-button-primary">Button</button>
        <button class="uk-button uk-button-primary">Button</button>
    </div>
</div>

<div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-danger">Button</button>
        <button class="uk-button uk-button-danger">Button</button>
        <button class="uk-button uk-button-danger">Button</button>
    </div>
</div>

带下拉菜单的按钮

按钮可以用于触发 下拉菜单组件 中的下拉菜单。

<!-- A button toggling a dropdown -->
<button class="uk-button uk-button-default" type="button"></button>
<div uk-dropdown></div>
  • <div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Dropdown</button>
    <div uk-dropdown>
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

带有下拉菜单的按钮组

使用按钮组将按钮分成左侧的标准操作和右侧的下拉切换按钮。只需将切换按钮和下拉菜单或下拉菜单包装在一个 <div> 元素中，并添加 工具组件 中的 .uk-inline 类。

<!-- A button group with a dropdown -->
<div class="uk-button-group">
    <button class="uk-button uk-button-default"></button>
    <div class="uk-inline">

        <!-- The button toggling the dropdown -->
        <button class="uk-button uk-button-default" type="button"></button>
        <div uk-dropdown="mode: click; target: !.uk-button-group;"></div>

    </div>
</div>
  • 
<div class="uk-button-group">
    <button class="uk-button uk-button-default">Dropdown</button>
    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button" aria-label="Toggle Dropdown"><span uk-icon="icon:  triangle-down"></span></button>
        <div uk-dropdown="mode: click; target: !.uk-button-group;">
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>
</div>