Толщина кольца

​

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

​

Добавление кольца

Используйте утилиты ring-{width}, чтобы применить сплошную тень блока определенной толщины к элементу. По умолчанию кольца имеют полупрозрачный синий цвет, аналогичный стилю кольца фокусировки по умолчанию во многих системах.

<button class="... ring-offset-2 ring-2">Кнопка A</button>
<button class="... ring-offset-2 ring">Кнопка B</button>
<button class="... ring-offset-2 ring-4">Кнопка C</button>

Кольцевые утилиты красиво сочетаются с обычными утилитами shadow-{size} и могут быть объединены в одном элементе.

Вы также можете управлять цветом, непрозрачностью и смещением колец с помощью утилит ringColor, ringOpacity и ringOffsetWidth.

​

Фокус колец

Утилиты ширины кольца упрощают использование настраиваемых колец фокусировки, добавляя focus: в начало любой утилиты ring-{width} utility.

<button class="... focus:ring-2">Сохранить изменения</button>

Вариант focus включен по умолчанию для утилит ringColor, ringOpacity, ringOffsetWidth и ringOffsetColor также.

​

Внутренние кольца

Используйте утилиту ring-inset, чтобы кольцо отображалось внутри элемента, а не снаружи. Это может быть полезно для элементов на краю экрана, где часть кольца не была бы видна.

<button class="... ring-2 ring-pink-300 ring-inset">
  Сохранить изменения
</button><button class="... ring-2 ring-pink-500 ring-inset">
  Сохранить изменения
</button>

​

Применяя условно

​

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:ring-4, чтобы применять утилиту ring-4 только при hover.

<div class="ring-2 hover:ring-4">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:ring-4, чтобы применить утилиту ring-4 только на экранах среднего размера и выше.

<div class="ring-2 md:ring-4">
  <!-- ... -->
</div>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

​

Использование пользовательских значений

​

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

По умолчанию Tailwind включает в себя несколько утилит общего назначения ring-width. Вы можете настроить эти значения, отредактировав theme.ringWidth или theme.extend.ringWidth в вашем файле tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      ringWidth: {
        '10': '10px',
      }
    }
  }
}

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

​

Произвольные значения

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

<div class="ring-[10px]">
  <!-- ... -->
</div>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.