Кнопка

Создавайте красивые кнопки, применяйте разные стили.

Применение

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

Модификаторы цвета

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

Пример	Класс	Описание
	`.uk-button-primary`	Акцентирует внимание, чаще используется для обозначения основного действия.
	`.uk-button-success`	Указывает на успешное или положительное действие.
	`.uk-button-danger`	Указывает на опасное или предупреждающее действие.
Ссылка	`.uk-button-link`	Позволяет преобразовать кнопку в ссылку по стилю, при этом сохраняя весь функционал элемента

Разметка

<button class="uk-button uk-button-danger" type="button">Danger кнопка</button>

Модификаторы размера

Добавьте к кнопке класс .uk-button-mini, .uk-button-small или .uk-button-large, чтобы сделать её больше или меньше.

Пример

Разметка

<button class="uk-button uk-button-large" type="button">Большая кнопка</button>

Кнопка на всю рабочую ширину

Добавьте к кнопке класс .uk-width-1-1 из компонента Grid и кнопка займет всю доступную ширину на 100%.

Пример

Разметка

<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-атрибут data-uk-button.

Пример

Разметка

<button class="uk-button uk-button-primary" type="button" data-uk-button>Кнопка</button>

Checkbox buttons

Переключайтесь между группой кнопок, по типу флажка ^*checkbox, оборачивая их в элемент <div> с data-атрибутом data-uk-button-checkbox. Это также может быть применено к группе кнопок.

Пример

Разметка

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

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

Radio buttons

Переключайтесь между группой кнопок, по типу радиокнопки ^*radio, div, оборачивая их в элемент <div> с data-атрибутом data-uk-button-radio. Это также может быть применено к группе кнопок.

Пример

Разметка

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

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

Кнопка с Dropdown

Кнопка может быть использована для вызова выпадающего меню из компонента Dropdown. Добавьте класс .uk-button-dropdown и атрибут data-uk-dropdown к элементу <div>, который содержит кнопку и сам выпадающий список.

Пример

Разметка

<!-- Это контейнер, включающий JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- Это кнопка переключения Dropdown -->
    <button class="uk-button">Dropdown</button>

    <!--  Это 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>

Группа кнопок с Dropdown

Используйте группы кнопок, чтобы разделить кнопки на стандартные действия слева и выпадающий переключатель справа. Оберните элемент <div> вокруг кнопки и раскрывающегося списка ^dropdown и добавьте атрибут data-uk-dropdown="{mode:'click'}" . Выпадающий список также может быть применен к кнопке в группе кнопок.

Пример

Разметка

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

    <!-- Это кнопка -->
    <button class="uk-button">Кнопка</button>

    <!-- Это контейнер, включающий JavaScript -->
    <div data-uk-dropdown="{mode:'click'}">

        <!-- Это кнопка переключения Dropdown -->
        <a href="" class="uk-button">...</a>

        <!-- Это 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>