30 lines
869 B
TypeScript
30 lines
869 B
TypeScript
/** 树形方向箭头（SVG 描边 chevron，替代 ▸/▾ 字符 —— Unicode 小三角在部分字体下糊成圆点，
|
|
* 填充三角又显臃肿）。细长 ">" 造型，open 时旋转 90° 朝下。 */
|
|
export function TreeChevron({
|
|
open,
|
|
size = 10,
|
|
className = "",
|
|
}: {
|
|
/** undefined = 静态朝右（details 折叠组内由浏览器管开合） */
|
|
open?: boolean;
|
|
size?: number;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 12 12"
|
|
width={size}
|
|
height={size}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
className={`shrink-0 ${open === undefined ? "" : `transition-transform duration-150 ${open ? "rotate-90" : ""}`} ${className}`}
|
|
>
|
|
<path d="M4.4 2.6 L8.4 6 L4.4 9.4" />
|
|
</svg>
|
|
);
|
|
}
|