Кнопка
Легко создать прекрасно выглядящие кнопки, которые бывают разных стилей.
Использование
Для установки этого компонента, добавить .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
атрибут из Утилита компонент для их родительского элемента.
Цвет модификаторы
Есть несколько цветовых модификаторов доступен. Просто добавьте один из следующих классов, чтобы применить другой вид.
Пример | Класс | Описание |
---|---|---|
.uk-button-primary |
Подчеркивает, чтобы определить первичное действие в набор кнопок. | |
.uk-button-success |
Указывает на успешное или позитивных действий. | |
.uk-button-danger |
Указывает на опасные или негативные действия. | |
Link | .uk-button-link |
Deemphasizes выглядеть ссылка при сохранении поведение кнопки. |
Модификаторы размера
Добавить .uk-button-mini
, .uk-button-small
или .uk-button-large
класс для кнопки, чтобы сделать её меньше или больше.
Полная Ширина кнопки
Добавить .uk-width-1-1
класс Грид компонент и кнопка будет занимать всю ширину.
Пример
Разметки
<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-uk-button
.
Пример
Разметки
<button class="uk-button uk-button-primary" type="button" data-uk-button>Button</button>
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
элемент, использующий 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>
Кнопка с выпадающим меню
Кнопка может использоваться, чтобы вызвать выпадающее меню Выпадающий компонент. Просто добавьте .uk-button-dropdown
class и data-uk-dropdown
атрибут <div>
элемент, содержащий кнопки и выпадающего себя.
Пример
Разметки
<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>
<!-- This is the button toggling the dropdown -->
<button class="uk-button">...</button>
<!-- This is the 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>
элемент вокруг кнопки и раскрывающийся список и добавить в data-uk-dropdown="{mode:'click'}"
атрибут. Конечно, выпадающим может также быть применен к кнопке в группе кнопок.
Пример
Разметки
<div class="uk-button-group">
<!-- This is a button -->
<button class="uk-button">...</button>
<!-- This is the container enabling the JavaScript -->
<div data-uk-dropdown="{mode:'click'}">
<!-- This is the button toggling the dropdown -->
<a href="" class="uk-button">...</a>
<!-- This is the 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>