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 ... | | baseStyles | {} | Добавление базовых стилей, которые могут переобределить бызовые стили по умолчанию, например { borderRadius: 8px } | | 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 |

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