@qpokychuk/tailwind-button-plugin

Buttons Plugin for Tailwind CSS

Предоставляет классы для создания кнопок, включая эффекты при наведении, фокусе, клике

Установка

npm install @qpokychuk/tailwind-button-plugin --save-dev

// tailwind.config.js
{    
  plugins: [
    require('@qpokychuk/tailwind-button-plugin'),
  ],
}

Основа использования

Добавьте обязательный класс btn, затем добавьте дополнительные классы для настройки отображения

<button class="btn">text here</button>

Установка цвета кнопки

Управляйте цветом кнопки с помощью утилит btn-{color} (color - цвета вашей темы).

<button class="btn btn-indigo ...">text here</button>
<button class="btn btn-blue ...">text here</button>
<button class="btn btn-red ...">text here</button>

Если вам нужно использовать одноразовое значение color, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство "на лету", используя любое произвольное значение.

<button class="btn btn-[#B33771] ...">text here</button>

Установка варианта кнопки

Управляйте вариантом кнопки с помощью утилит btn-{variant}. Доступны варианты: fill | contur | light | whitebg | text

<button class="btn ...">text here</button>
<button class="btn btn-fill ...">text here</button>
<button class="btn btn-contur ...">text here</button>
<button class="btn btn-light ...">text here</button>
<button class="btn btn-whitebg ...">text here</button>
<button class="btn btn-text ...">text here</button>

Установка размера кнопки

Управляйте размером кнопки с помощью утилит btn-{btnSize}.

<button class="btn btn-xs ...">text here</button>
<button class="btn btn-sm ...">text here</button>
<button class="btn btn-base ...">text here</button> <!-- Вариант по умолчанию -->
<button class="btn btn-lg ...">text here</button>
<button class="btn btn-xl ...">text here</button>
<button class="btn btn-2xl ...">text here</button>

Если вам нужно использовать одноразовое значение btnSize, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство "на лету", используя любое произвольное значение.

<button class="btn btn-[50px] ...">text here</button>

Установка закругления кнопки

Управляйте закруглением кнопки с помощью утилит rounded из tailwind.

<button class="btn ...">text here</button>
<button class="btn rounded ...">text here</button>
<button class="btn rounded-xl ...">text here</button>
<button class="btn rounded-full ...">text here</button>

Установка тени кнопки

Управляйте тенью кнопки с помощью утилит shadow из tailwind.

<button class="btn shadow-md hover:shadow-xl active:shadow-md ...">text here</button>

Target selector

Используйте Target selector чтобы эффекты наведения, фокуса, и клика срабатывали на кнопке при наведении, фокусе, и клике на родительский элемент

<a class="absolute inset-0 flex btn-group">
  <button class="btn m-auto">text here</button>
</a>

<a class="absolute inset-0 flex btn-peer">text here</a>
...
<button class="btn m-auto">icon</button>

Настройка вашей темы

По умолчанию плагин предоставляет размеры кнопок, вы можете их расширить

// tailwind.config.js
{
  theme: {
    btnSize: {
      xs: '28px',
      sm: '32px',
      base: '42px',
      lg: '48px',
      xl: '56px',
      ['2xl']: '64px',
    }
  }
}

Конфигурация

Вы можете настроить плагин с помощью опций Используйте вызов плагина с объектом конфигурации:

// tailwind.config.js
{    
  plugins: [
    require('@qpokychuk/tailwind-button-plugin')({
      className: 'btn',
      disabledOpacity: 0.4,
      colorHoverOffset: 25,
      lightColorOpacity: 0.1,
      lightColorOpacityHover: 0.2,
      transition: '.2s ease',
      withFocusStyles: false,
      targetGroupSelector: '.btn-group',
      targetPeerSelector: '.btn-peer',
      activeStiles: {
        transform: 'translateY(2px)',
      }
    }),
  ],
}

Параметр	Значение по умолчанию	Описание
className	'btn'	Базовый класс для кнопок. Вы можете использовать свой, например 'ui-button', тогда ваши классы будут выглядеть так: ui-button ui-button-indigo ui-button-contur ...
disabledOpacity	0.4	Определяет непрозрачность неактивной кнопки
colorHoverOffset	25	Определяет смещение цвета при наведении, т.е на сколько кнопка потемнеет при наведении. Чтобы кнопка светлела при наведении используйте отрицательное значение
lightColorOpacity	0.1	Определяет непрозрачность для light-цвета кнопки который используется например в light-варианте
lightColorOpacityHover	0.2	Определяет непрозрачность для lightColorOpacity при наведении
transition	'.2s ease'	Определяет значение transition
withFocusStyles	false	Если включено будут добавлены эффекты для состояния фокуса
targetGroupSelector	'.btn-group'	Селектор для передачи состояния от родителя к кнопке
targetPeerSelector	'.btn-peer'	Селектор для передачи состояния от соседа к кнопке
activeStiles	{ transform: 'translateY(2px)' }	Стили для состояния при нажатии в синтаксисе CssInJs

Поддержать автора