Пользовательские интерфейсы играют решающую роль в создании приятного пользовательского опыта, и одним из популярных элементов, который добавляет интерфейсу как функциональность, так и эстетическую привлекательность, является плавающая кнопка действия (FAB). Хотя традиционно FAB имеют круглую форму, наблюдается растущая тенденция к использованию закругленных прямоугольных FAB. В этой статье мы рассмотрим различные методы создания закругленных прямоугольных FAB с примерами кода, отвечающие потребностям разработчиков интерфейса и дизайнеров пользовательского интерфейса.

Метод 1: свойство CSS Border Radius
Один из самых простых способов получить закругленные углы для прямоугольного FAB — использовать свойство CSS border-radius. Вот пример:

.button {
  border-radius: 8px;
}

Этот фрагмент CSS устанавливает для свойства border-radiusзначение 8px, в результате чего получается прямоугольная кнопка с закругленными углами.

Метод 2: свойство CSS Clip-path
Другой подход к созданию закругленных прямоугольных FAB — использование свойства clip-path. Это свойство позволяет вам определить область отсечения для элемента. Вот пример:

.button {
  clip-path: inset(0 16px 0 0 round 8px);
}

Свойству clip-pathприсвоено значение inset(0 16px 0 0 round 8px), где 16pxопределяет величину отступа слева, а 8pxпредставляет собой радиус закругленных углов.

Метод 3: фоновое изображение SVG
Если вы предпочитаете использовать SVG для фона FAB, вы можете создать закругленную прямоугольную форму в разметке SVG. Вот пример:

<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40">
    <rect x="0" y="0" rx="8" ry="8" width="120" height="40"/>
  </svg>
  Button
</button>

В этом примере элемент <rect>в разметке SVG определяет прямоугольник с закругленными углами, где атрибуты rxи ryзадают горизонтальную и вертикальные радиусы соответственно.

Метод 4: манипулирование JavaScript
Для более динамичного управления формой FAB вы можете использовать JavaScript для управления свойствами CSS кнопки. Вот пример использования jQuery:

$('.button').css('border-radius', '8px');

В этом фрагменте кода используется jQuery для выбора класса .buttonи установки свойства CSS border-radiusв значение 8px.

Благодаря этим методам теперь у вас есть несколько подходов к созданию закругленных прямоугольных плавающих кнопок действий. Предпочитаете ли вы использовать свойства CSS, такие как border-radiusили clip-path, фон SVG или манипуляции с JavaScript, вы можете легко настроить форму своих FAB в соответствии с потребностями дизайна пользовательского интерфейса. Поэкспериментируйте с этими техниками и раскройте свой творческий потенциал!