Arrow и настройка

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

Структура компонента Arrow

Radix UI реализует Arrow как отдельный дочерний компонент, который следует размещать внутри родительского элемента, например, Popover или Tooltip. Основные свойства компонента:

  • offset – определяет расстояние стрелки от края родительского элемента. Может быть задан числом (пиксели) или функцией для динамического расчета.
  • width и height – задают размеры стрелки.
  • asChild – позволяет использовать кастомный элемент вместо стандартного.

Пример базовой структуры:

import * as Tooltip from '@radix-ui/react-tooltip';

<Tooltip.Root>
  <Tooltip.Trigger>Наведи на меня</Tooltip.Trigger>
  <Tooltip.Content side="top" align="center">
    Подсказка с стрелкой
    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip.Root>

В данном примере стрелка автоматически располагается по центру верхнего края подсказки, указывая на триггер.

Настройка позиции стрелки

Radix UI поддерживает позиционирование стрелки через свойства родительского компонента (side, align) и дополнительные стили.

  • side – определяет сторону, на которой появляется контент относительно триггера: "top", "bottom", "left", "right".
  • align – выравнивание стрелки по выбранной стороне: "start", "center", "end".
  • offset – позволяет контролировать отступ контента от стрелки, чтобы обеспечить визуальный баланс.

Пример:

<Tooltip.Content side="bottom" align="start" sideOffset={10}>
  Подсказка с настраиваемой стрелкой
  <Tooltip.Arrow offset={5} />
</Tooltip.Content>

Здесь стрелка отстоит от края на 5 пикселей, а контент смещён вниз на 10 пикселей.

Кастомизация внешнего вида стрелки

Стрелка в Radix UI — это фактически элемент <div> с CSS-трансформацией, которая формирует треугольник. Настройка внешнего вида возможна через стили или классы:

<Tooltip.Arrow
  style={{
    fill: 'white',
    stroke: 'black',
    strokeWidth: 1,
    width: 12,
    height: 6,
  }}
/>
  • fill – задает цвет заливки стрелки.
  • stroke – задает цвет контура.
  • strokeWidth – толщину линии контура.
  • width / height – размеры стрелки, изменяют пропорции треугольника.

Использование с анимациями и библиотеками стилей

Radix UI Arrow интегрируется с CSS-анимациями или сторонними библиотеками стилей. Например, можно добавить плавное появление стрелки при наведении с помощью keyframes:

@keyframes fadeInArrow {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.arrow-animated {
  animation: fadeInArrow 0.3s ease-out forwards;
}
<Tooltip.Arrow className="arrow-animated" />

Это позволяет создавать современный и отзывчивый интерфейс, сохраняя все преимущества Radix UI по управлению позиционированием.

Продвинутые возможности

  • asChild: стрелка может быть заменена кастомным элементом, что позволяет создавать уникальные формы.
  • dynamic offset: свойство offset может быть функцией, возвращающей разные значения в зависимости от положения контента, что важно для адаптивных интерфейсов.
  • CSS-переменные Radix: Radix автоматически предоставляет CSS-переменные, позволяющие стилизовать стрелку без лишних оберток, например: --radix-tooltip-arrow-height и --radix-tooltip-arrow-width.
<Tooltip.Arrow
  style={{
    '--radix-tooltip-arrow-height': '10px',
    '--radix-tooltip-arrow-width': '20px',
    backgroundColor: 'red',
  }}
/>

Взаимодействие с контентом и позиционированием

Arrow синхронизируется с поведением родительского компонента. При динамическом изменении позиции контента (например, при ограничении места на экране), стрелка корректно подстраивается, сохраняя направление и выравнивание. Важно учитывать, что для сложных сценариев позиционирования лучше использовать свойства collisionPadding и avoidCollisions, которые предоставляет родительский компонент.

Хотите, я могу подготовить отдельный подробный блок с практическими примерами всех сторон стрелки и их комбинаций с выравниванием, чтобы статья стала максимально наглядной и полезной для учебника?

Оглавление