Компонент Кнопка : Button

Создавайте красивые кнопки, которые могут быть разных стилей и размеров.

Компонент Кнопка позволяет создать из кнопки выпадающий список, добавить в ваш проект кнопки различного стиля и ширины.

Создание кнопок

Чтобы использовать в своём проекте компонент Кнопка, необходимо добавить класс .uk-button в элемент <a> или <button> и дополнительно добавить модификатор, такой, как .uk-button-default.

Чтобы применить кнопке отключенное состояние, добавьте к элементу <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 из компонента Внешний отступ к их родительскому элементу.

Модификатор «Стиль»

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

Класс Описание
.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">Текст</button>
        <button class="uk-button uk-button-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 из компонента Ширина элементов, и кнопка займет всю доступную ширину.

Пример

  • <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>

Создание группы кнопок

Чтобы создать группу кнопок, добавьте к элементу <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 class="uk-button uk-button-secondary">Кнопка</button>
            <button class="uk-button uk-button-secondary">Кнопка 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">Кнопка 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">Кнопка Danger</button>
        </div>
    </div>

Выпадающий список из кнопки

Обычная кнопка может быть использована для вызова выпадающего меню навигации из компонента Выпадающий список : Dropdown.

<!-- Кнопка переключения выпадающего списка 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="#">Активный пункт</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>

Группа кнопок и выпадающие списки Dropdowns

Используйте группы кнопок, чтобы расположить кнопки в стандартном виде: основная кнопка слева и выпадающий переключатель справа. Оберните переключающую кнопку и раскрывающийся список внутри элемента <div> и добавьте класс .uk-inline из компонента вспомогательных классов Utility.

<!-- Группа кнопок с выпадающим меню Dropdown -->
<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">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="#">Активный пункт</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>
Документация
Компоненты