底层原语
Arrow
用于浮层指向触发元素的 SVG 箭头组件
箭头（Arrow）用于在 Tooltip、Popover、HoverCard 等浮层组件中绘制指向触发元素的箭头。它本身是一个 SVG 基础组件，不包含定位逻辑，通常配合浮层内容的定位结果一起使用。
import { Arrow, type ArrowProps } from '@skyroc/web-ui';架构说明
Arrow 直接从 @radix-ui/react-arrow 导出，项目没有额外封装样式、尺寸或行为。
- 组件职责：渲染一个可自定义尺寸、填充色和描边色的 SVG 箭头。
- 样式职责：通过
className、fill、stroke或 CSS 控制视觉表现。 - 定位职责：由使用它的浮层组件负责，Arrow 不自行计算方向或位置。
何时使用
- 浮层需要明确指向触发元素时。
- 需要复用 Radix Arrow 的 SVG 结构，同时使用项目主题色控制
fill/stroke时。 - 自定义 Tooltip、Popover、Dropdown 等浮层内容，并希望箭头和浮层背景保持一致时。
基础用法
通过 width 和 height 控制箭头尺寸，通过 className 设置填充色和描边色。
Preview
Code
Loading...
尺寸与颜色
Arrow 不提供项目级 size 属性，尺寸由 SVG 的 width 和 height 决定。
| 属性 | 说明 | 示例 |
|---|---|---|
width | SVG 宽度 | 24 |
height | SVG 高度 | 12 |
className | 控制填充色、描边色等样式 | fill-popover stroke-border |
fill | 直接设置 SVG 填充色 | "currentColor" |
stroke | 直接设置 SVG 描边色 | "currentColor" |
API
Arrow
通用属性参考：基于 Radix UI Arrow，支持 SVG 元素的所有属性，并额外支持 asChild。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| asChild | 将渲染委托给子元素，合并 props 和行为 | boolean | false |
| children | 子节点；通常不需要传入 | ReactNode | - |
| className | SVG 的 class，用于控制 fill、stroke、尺寸等样式 | string | - |
| width | SVG 宽度 | number | string | - |
| height | SVG 高度 | number | string | - |
| fill | SVG 填充色 | string | - |
| stroke | SVG 描边色 | string | - |
| viewBox | SVG 视口 | string | - |
| style | 行内样式 | CSSProperties | - |
| ref | 指向底层 SVG 元素的 ref | Ref<SVGSVGElement> | - |
类型
ArrowProps
Arrow 组件属性，完全来自 Radix Arrow。
| 字段 | 类型 | 说明 |
|---|---|---|
| ...PrimitiveSvgProps | PrimitiveSvgProps | 继承 Radix Primitive svg 的全部属性。 |
PrimitiveSvgProps
Radix Primitive svg 属性。
| 字段 | 类型 | 说明 |
|---|---|---|
| ...React.ComponentPropsWithoutRef<typeof Primitive.svg> | React.ComponentPropsWithoutRef<typeof Primitive.svg> | 继承 Primitive.svg 的无 ref 属性。 |
Primitive.svg
Radix Primitive 中的 svg 元素封装。
| 字段 | 类型 | 说明 |
|---|---|---|
| props | PrimitivePropsWithRef<"svg"> | SVG 元素属性，并额外支持 asChild。 |
| ref | Ref<SVGSVGElement> | 转发到底层 SVG 元素的 ref。 |
PrimitivePropsWithRef<E>
Radix Primitive 通用属性类型。
| 字段 | 类型 | 说明 |
|---|---|---|
| ...React.ComponentPropsWithRef<E> | React.ComponentPropsWithRef<E> | 继承指定元素的原生属性和 ref。 |
| asChild | boolean | 将渲染委托给子元素。 |
React.ComponentPropsWithRef<"svg">
React SVG 元素属性集合。
| 字段 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | SVG 子节点。 |
| className | string | SVG class。 |
| fill | string | SVG 填充色。 |
| height | number | string | SVG 高度。 |
| onClick | MouseEventHandler<SVGSVGElement> | 点击事件。 |
| ref | Ref<SVGSVGElement> | SVG 元素 ref。 |
| stroke | string | SVG 描边色。 |
| style | CSSProperties | 行内样式。 |
| viewBox | string | SVG 视口。 |
| width | number | string | SVG 宽度。 |
| ...SVGAttributes<SVGSVGElement> | SVGAttributes<SVGSVGElement> | 支持其余标准 SVG 属性与事件。 |