Кнопка

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

Использование

Для установки этого компонента, добавить .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-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>