Компонент Кнопка Button
Создавайте красивые кнопки, которые могут быть разных стилей и размеров. Создать из кнопки выпадающий список, добавить в проект кнопки различной ширины.
Компонент Кнопка позволяет создать из кнопки выпадающий список, добавить в ваш проект кнопки различного стиля и ширины. Простое создание группы кнопок с Dropdown, кнопки с выпадающим навигационным списком меню.
Создание кнопок
Чтобы использовать в своём проекте компонент Кнопка,
необходимо добавить класс .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" type="button"></button>
<button class="uk-button uk-button-default" type="menu" disabled></button>
uk-margin
из компонента Внешний отступ к их родительскому элементу.
Модификатор «Стиль»
В UIkit 3 доступно несколько модификаторов для стиля кнопок. Просто добавьте один из следующих классов, чтобы применить другой вид.
Класс | Описание |
---|---|
.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">Текст</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>
-
-
<form class="uk-width-medium@m uk-position-relative" action=""> <legend class="uk-legend uk-text-center">Кнопка сброса в форме</legend> <div class="uk-margin"> <input class="uk-input" name="Имя" type="text" placeholder="Имя" required> </div> <div class="uk-margin"> <input class="uk-input" name="E-mail" type="email" placeholder="E-mail" required> </div> <div class="uk-margin uk-button-group"> <button type="submit" class="uk-button uk-button-primary uk-disabled">Отправить</button> <button type="reset" class="uk-button uk-button-default" uk-tooltip="title: Очистить; pos: bottom"><span uk-icon="trash"></span></button> </div> </form>
Выпадающее меню
Выпадающий список из кнопки
Обычная кнопка может быть использована для вызова выпадающего меню навигации из компонента Выпадающий список : 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>
Группа кнопок и Dropdown
Группа кнопок и выпадающие списки Dropdown
Используйте группы кнопок, чтобы расположить кнопки в стандартном виде: основная кнопка слева и выпадающий переключатель справа.
Оберните переключающую кнопку и раскрывающийся список внутри элемента <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; 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="Переключить выпадающий список"> <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="#">Активный пункт</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>