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

button-group

В SIMAI Framework с помощью модификаторов можно создавать группу кнопок

Описание

Cгруппируйте серию кнопок вместе в одну линию, создав таким образом групповую кнопку. С помощью нашего плагина кнопок, можно добавить стиль поведения переключателей или галочек (checkbox).

Пример

<div class="inline-flex relative" role="group" aria-label="Basic example">
    <button type="button" class="bg-error border-error color-on-surface-inverse hover:bg-opacity-7 transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-left-1/3 border-transparent select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">
        Левая
    </button>
    <button type="button" class="bg-error border-error color-on-surface-inverse hover:bg-opacity-7 transition relative inline-block weight-4 center wrap-none text-middle border-1 border-transparent select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">
        По середине
    </button>
    <button type="button" class="bg-error border-error color-on-surface-inverse hover:bg-opacity-7 transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-right-1/3 border-transparent select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">
        Правая
    </button>
</div>

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

<div class="flex flex-wrap content-start" role="toolbar" aria-label="Toolbar with button groups">
    <div class="inline-flex relative m-right-1/2" role="group" aria-label="First group">
        <button type="button" class="bg-error border-error color-on-surface-inverse hover:bg-opacity-7 transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-left-1/3 border-transparent select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">
            1
        </button>
        <button type="button" class="bg-error border-error color-on-surface-inverse hover:bg-opacity-7 transition relative inline-block weight-4 center wrap-none text-middle border-1 border-transparent select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">
            2
        </button>
        <button type="button" class="bg-error border-error color-on-surface-inverse hover:bg-opacity-7 transition relative inline-block weight-4 center wrap-none text-middle border-1 border-transparent select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">
            3
        </button>
        <button type="button" class="bg-error border-error color-on-surface-inverse hover:bg-opacity-7 transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-right-1/3 border-transparent select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">
            4
        </button>
    </div>
    <div class="inline-flex relative m-right-1/2" role="group" aria-label="Second group">
        <button type="button" class="bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-opacity-7 transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-left-1/3 border-transparent select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">
            5
        </button>
        <button type="button" class="bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-opacity-7 transition relative inline-block weight-4 center wrap-none text-middle border-1 border-transparent select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">
            6
        </button>
        <button type="button" class="bg-surface-inverse border-surface-inverse color-on-surface-inverse hover:bg-opacity-7 transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-right-1/3 border-transparent select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">
            7
        </button>
    </div>
    <div class="inline-flex relative" role="group" aria-label="Third group">
        <button type="button" class="r-2 bg-tertiary border-tertiary color-on-surface-inverse hover:bg-opacity-7 transition relative inline-block weight-4 center wrap-none text-middle border-1 border-transparent select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">
            8
        </button>
    </div>
</div>

Смешивайте группы формы ввода с группами кнопок на вашей панели инструментов. Аналогично приведенному выше примеру, вам понадобятся некоторые утилиты, чтобы правильно расставить промежутки между группами.

<div class="flex flex-wrap content-start m-bottom-1" role="toolbar" aria-label="Toolbar with button groups">
    <div class="inline-flex relative m-right-1/2" role="group" aria-label="First group">
        <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-left-1/3 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">1</button>
        <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-top-1 border-right-1 border-bottom-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">2</button>
        <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-top-1 border-right-1 border-bottom-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">3</button>
        <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-top-1 border-right-1 border-bottom-1 radius-right-1/3 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">4</button>
    </div>
    <div class="relative flex flex-wrap item-cross-streach w-auto">
        <span class="rr-0 flex items-cross-center p-1/2 t-1 weight-4 center border-1 border-surface-container radius-left-1/3 string-none bg-surface-1" id="btnGroupAddon">@</span>
        <input type="text" class="relative grow shrink basis-auto rl-0 p-right-1/3 p-left-1/3 p-top-1/2 p-bottom-1/2 t-1 block weight-4 string-none color-on-surface bg-surface-0 border-1 border-surface-container appearance-none radius-right-1/3 -ml-px transition" placeholder="Пример группы ввода" aria-describedby="btnGroupAddon">
    </div>
    </div>
    <div class="flex flex-wrap content-main-between" role="toolbar" aria-label="Toolbar with button groups">
    <div class="inline-flex relative m-right-1/2" role="group" aria-label="First group">
        <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-left-1/3 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">1</button>
        <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-top-1 border-right-1 border-bottom-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">2</button>
        <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-top-1 border-right-1 border-bottom-1 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">3</button>
        <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-top-1 border-right-1 border-bottom-1 radius-right-1/3 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">4</button>
    </div>
    <div class="relative flex flex-wrap item-cross-streach w-auto">
        <span class="rr-0 flex items-cross-center p-1/2 t-1 weight-4 center border-1 border-surface-container radius-left-1/3 string-none bg-surface-1" id="btnGroupAddon">@</span>
        <input type="text" class="relative grow shrink basis-auto rl-0 p-right-1/3 p-left-1/3 p-top-1/2 p-bottom-1/2 t-1 block weight-4 string-none color-on-surface bg-surface-0 border-1 border-surface-container appearance-none radius-right-1/3 -ml-px transition" placeholder="Пример группы ввода" aria-describedby="btnGroupAddon">
    </div>
</div>

Изменение размера

<div class="inline-flex relative w-full m-bottom-1/3" role="group" aria-label="Large button group">
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-left-1/3 select-none cursor-pointer p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 text-2 string-1">Левая</button>
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 -ml-px select-none cursor-pointer p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 text-2 string-1">По середине</button>
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 -ml-px radius-right-1/3 select-none cursor-pointer p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 text-2 string-1">Правая</button>
</div>
<div class="inline-flex relative w-full m-bottom-1/3" role="group" aria-label="Large button group">
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-left-1/3 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">Левая</button>
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 -ml-px select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">По середине</button>
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 -ml-px radius-right-1/3 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">Правая</button>
</div>
<div class="inline-flex relative w-full" role="group" aria-label="Large button group">
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-left-1/3 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 1-1/2 string-none">Левая</button>
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 -ml-px select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 1-1/2 string-none">По середине</button>
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 -ml-px radius-right-1/3 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 1-1/2 string-none">Правая</button>
</div>

Вертикальные кнопки

<div class="flex flex-col item-cros-start" role="group" aria-label="Large button group">
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 radius-top-1/3 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">Кнопка</button>
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 -mt-px select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">Кнопка</button>
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 -mt-px select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">Кнопка</button>
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 -mt-px select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">Кнопка</button>
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 -mt-px select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">Кнопка</button>
    <button type="button" class="bg-surface-0 border-surface-inverse color-on-surface hover:c-white hover:bg-surface-inverse transition relative inline-block weight-4 center wrap-none text-middle border-1 -mt-px rb-2 select-none cursor-pointer p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 t-1 string-normal">Кнопка</button>
</div>

Адаптивность

Для установки адаптивности группы кнопок, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью