Arrow компонент

Arrow — это вспомогательный компонент в библиотеке Radix UI, который используется для создания стрелки, визуально связывающей всплывающие элементы с их триггером. Обычно применяется вместе с компонентами Tooltip, Popover, Dropdown Menu, Hover Card и другими, где нужно указать направление появления контента относительно элемента управления.

Основные свойства Arrow

Arrow в Radix UI имеет минимальный набор свойств, но их правильная настройка позволяет добиться точной и красивой визуализации:

  • offset — задаёт смещение стрелки относительно края триггера. Позволяет контролировать расстояние стрелки от края всплывающего элемента.

    <Arrow offset={10} />

    Значение offset указывается в пикселях и по умолчанию равно 0.

  • width и height — задают размеры стрелки. По умолчанию используется квадратная форма 10x10 пикселей.

    <Arrow width={12} height={8} />

  • asChild — позволяет использовать кастомный элемент вместо стандартного <div> для стрелки. Это особенно полезно при интеграции со сторонними компонентами или SVG.

Подключение Arrow к всплывающим компонентам

Arrow сам по себе не отображается отдельно. Его нужно помещать внутри Content компонента, например, у Tooltip или Popover:

import * as Tooltip from '@radix-ui/react-tooltip';
import { styled } from '@stitches/react';

const StyledArrow = styled(Tooltip.Arrow, {
  fill: 'black',
});

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger>Наведи на меня</Tooltip.Trigger>
    <Tooltip.Content side="top">
      Текст подсказки
      <StyledArrow />
    </Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>

В этом примере:

  • Tooltip.Content отвечает за контейнер всплывающего окна.
  • Tooltip.Arrow создаёт стрелку, указывающую на Tooltip.Trigger.
  • StyledArrow используется для стилизации стрелки, задавая её цвет через fill.

Стороны появления стрелки

Arrow автоматически ориентируется в зависимости от свойства side у родительского компонента Content:

  • top — стрелка будет смотреть вниз, указывая на элемент снизу.
  • bottom — стрелка смотрит вверх.
  • left — стрелка смотрит вправо.
  • right — стрелка смотрит влево.

Также есть возможность задать align, чтобы контролировать горизонтальное или вертикальное позиционирование стрелки относительно родителя:

  • start — смещает стрелку к началу элемента.
  • center — по умолчанию стрелка выравнивается по центру.
  • end — смещает стрелку к концу элемента.
<Tooltip.Content side="top" align="start">
  Подсказка с выравниванием
  <Tooltip.Arrow offset={5} />
</Tooltip.Content>

Стилизация Arrow

Arrow в Radix UI — это SVG, и его стилизация отличается от обычного CSS-элемента:

  • Цвет стрелки задаётся через свойство fill.
  • Размеры через width и height.
  • Дополнительно можно использовать transform и rotate, если нужен необычный угол наклона или визуальный эффект.

Пример с кастомной стилизацией:

import { keyframes, styled } from '@stitches/react';
import * as Popover from '@radix-ui/react-popover';

const pulse = keyframes({
  '0%': { transform: 'scale(1)' },
  '50%': { transform: 'scale(1.2)' },
  '100%': { transform: 'scale(1)' },
});

const AnimatedArrow = styled(Popover.Arrow, {
  fill: '#ff6347',
  animation: `${pulse} 1s infinite`,
});

Комбинирование с другими компонентами

Arrow особенно полезен при использовании с компонентами DropdownMenu, Popover и HoverCard, где требуется точная визуальная связь между триггером и всплывающим контентом. Основные моменты:

  1. Content всегда оборачивает Arrow.
  2. Свойства side и align Content автоматически передаются Arrow.
  3. С помощью offset можно избежать пересечения стрелки с рамками и тенями всплывающего окна.
  4. Можно создавать кастомные стрелки через asChild для SVG или других элементов.

Практическое использование

Для Popover с кастомной стрелкой и динамическим смещением:

import * as Popover from '@radix-ui/react-popover';

<Popover.Root>
  <Popover.Trigger>Открыть меню</Popover.Trigger>
  <Popover.Content side="right" align="center">
    Контент меню
    <Popover.Arrow offset={12} />
  </Popover.Content>
</Popover.Root>

Здесь стрелка автоматически размещается с правой стороны, смещена на 12 пикселей, выровнена по центру. При изменении позиции Content стрелка поворачивается и перемещается автоматически.

Заключение по Arrow

Arrow в Radix UI — это простой, но мощный инструмент для создания визуальных подсказок и указателей на триггерные элементы. Его гибкость в сочетании с Content позволяет:

  • Точно контролировать направление и позицию стрелки.
  • Создавать кастомные стили и анимации.
  • Легко интегрировать в любые всплывающие компоненты библиотеки.

Правильное использование Arrow повышает UX, делая интерфейс более наглядным и интуитивным.

Оглавление