按钮／Button

# 按钮／Button

<p class="uk-text-lead">轻松创建外观精美的按钮，它们具有不同的样式。</p>

## Usage-用法

要使用此组件，请将 `.uk-button` class 和 `.uk-button-default` 等修饰符添加到 `<a>` 或 `<button>` 元素。将 `disabled` 属性添加到 `<button>` 元素可以禁用按钮。

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

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

**注意** 如果在一行中显示多个按钮，当它们堆叠在较小的视口上时，可以为它们添加上边距。只需将 [Margin 组件](margin.md) 中的 `uk-margin` 属性添加到其父元素。

***

## Style modifiers-样式修饰

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

| Class                  | 描述                                    |
|:-----------------------|:-----------------------------------------------|
| `.uk-button-default`   | 默认按钮样式。                          |
| `.uk-button-primary`   | 表示主要动作按钮。                  |
| `.uk-button-secondary` | 表示重要的动作按钮。                 |
| `.uk-button-danger`    | 表示危险或负面行为按钮。      |
| `.uk-button-text`      | 应用排版样式内文字按钮。     |
| `.uk-button-link`      | 应用将按钮元素做成普通链接样式一样。 |

```html
<button class="uk-button uk-button-primary"></button>
```

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

***

## Size modifiers-尺寸修改器

将 `.uk-button-small` 或 `.uk-button-large` class 添加到按钮以使其变小或变大。


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

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

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

***

## Width modifiers-宽度修改器

从 [Width组件](width.md) 中添加 `.uk-width-1-1` class，可以使该按钮占据整个宽度。

### 例子

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

***

## Group-按钮组

要创建按钮组，请将 `.uk-button-group` class 添加到按钮外层的 `<div>` 元素中就可以了。不需要更多的标记。

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

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

***

## Button with dropdowns-带下拉菜单的按钮

可以使用按钮来触发 [Dropdown菜单组件](dropdown.md)的下拉菜单。

```html
<!-- A button toggling a dropdown -->
<button class="uk-button uk-button-default" type="button"></button>
<div uk-dropdown></div>
```

```example
<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>` 元素内，然后从 [Utility组件](utility.md#inline) 中添加 `.uk-inline` class 就可以了。

```html
<!-- 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; boundary: ! .uk-button-group; boundary-align: true;"></div>

    </div>
</div>
```

```example

<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"><span uk-icon="icon:  triangle-down"></span></button>
        <div uk-dropdown="mode: click; boundary: ! .uk-button-group; boundary-align: true;">
            <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>
```