Кнопки

Легко и быстро создавайте красивые кнопки с различными стилями.

Как использовать кнопки в UIkit 3

Добавьте класс .uk-button и модификатор .uk-button-default к элементам <a> или <button> для активации стиля кнопки по умолчанию. Чтобы добавить кнопке неактивное состояние, используйте атрибут disabled.

<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="#">Ссылка</a>
    <button class="uk-button uk-button-default">Кнопка</button>
    <button class="uk-button uk-button-default" disabled>Неактивная кнопка</button>
</p>

Внимание Если вы используете несколько кнопок подряд, добавьте к ним верхний отступ, чтобы они корректно отображались при переносе строки. Для этого задайте атрибут uk-margin из компонента Margin к их родительскому элементу.

Модификаторы стилей

Имеется несколько модификаторов стилей. Добавьте один из следующих классов, чтобы применить другой стиль кнопки.

Класс Описание
.uk-button-default Стандартный стиль кнопки.
.uk-button-primary Используется для стандартных действий.
.uk-button-secondary Используется для важных кнопок.
.uk-button-danger Кнопка для блоков с ошибками.
.uk-button-text Задает кнопке стиль встроенного элемента.
.uk-button-link Элемент <button> будет выглядеть как <a>. 
<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">Маленькая кнопка</button>
    <button class="uk-button uk-button-primary uk-button-small">Маленькая кнопка</button>
    <button class="uk-button uk-button-secondary uk-button-small">Маленькая кнопка</button>
</p>

<p uk-margin>
    <button class="uk-button uk-button-default uk-button-large">Большая кнопка</button>
    <button class="uk-button uk-button-primary uk-button-large">Большая кнопка</button>
    <button class="uk-button uk-button-secondary uk-button-large">Большая кнопка</button>
</p>

Модификаторы ширины

Добавьте класс .uk-width-1-1 из компонента Ширина чтобы задать кнопке 100% ширины.

Пример

  • <button class="uk-button uk-button-default uk-width-1-1 uk-margin-small-bottom">Кнопка</button>
<button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom">Кнопка</button>
<button class="uk-button uk-button-secondary uk-width-1-1">Кнопка</button>

Группы кнопок

Чтобы создать группу кнопок, добавьте класс .uk-button-group к элементу родительскому <div>. И все! Никакой дополнительной разметки не требуется.

<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 class="uk-button uk-button-secondary">Кнопка</button>
        <button class="uk-button uk-button-secondary">Кнопка</button>
    </div>
</div>

<div class="uk-margin-small">
    <div class="uk-button-group">
        <button class="uk-button uk-button-primary">Кнопка</button>
        <button class="uk-button uk-button-primary">Кнопка</button>
        <button class="uk-button uk-button-primary">Кнопка</button>
    </div>
</div>

<div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-danger">Кнопка</button>
        <button class="uk-button uk-button-danger">Кнопка</button>
        <button class="uk-button uk-button-danger">Кнопка</button>
    </div>
</div>

Кнопки совместно с выпадающими элементами

Разумеется, любая кнопка может быть использована для вызова выпадающик объектов. Рассмотрим пример совместной работы кнопки и компонента Dropdown.

<!-- 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">Наведите</button>
    <div uk-dropdown>
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Активная ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li class="uk-nav-header">Заголовок</li>
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Ссылка</a></li>
        </ul>
    </div>
</div>

Группы кнопок совместно с выпадающими элементами

Используйте группы кнопок, чтобы разделить кнопки на стандартное поведение слева и кнопку-переключатель справа. Заверните вашу кнопку и выпадающий блок в <div> с классом .uk-inline из компонента Утилиты.

<!-- Группа кнопок с выпадающим меню -->
<div class="uk-button-group">
    <button class="uk-button uk-button-default"></button>
    <div class="uk-inline">

        <!-- Кнопка-переключатель -->
        <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>

  • 
<div class="uk-button-group">
    <button class="uk-button uk-button-default">Кнопка</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="#">Активная ссылка</a></li>
                <li><a href="#">Ссылка</a></li>
                <li class="uk-nav-header">Заголовок</li>
                <li><a href="#">Ссылка</a></li>
                <li><a href="#">Ссылка</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Ссылка</a></li>
            </ul>
        </div>
    </div>
</div>