FlowingMenu

flowing-menu

竖排菜单在指针进出时揭幕，透出循环滚动的文字或图片

用法

基础用法

竖排菜单项，指针从最近的上/下边缘滑入时一块跑马灯（文字 + 图片）从同侧揭幕铺满整行，离开时退回。需放在定高容器内。

tsx

<div className="h-80 overflow-hidden rounded-xl border">
  <FlowingMenu
    items={[
      { link: "#", text: "Discover", image: "/a.jpg" },
      { link: "#", text: "Build", image: "/b.jpg" },
      { link: "#", text: "Ship", image: "/c.jpg" },
    ]}
  />
</div>

纯文字（无图片）

item 不传 image 时跑马灯只跑文字，用一截小横杠分隔，不渲染图片块。

tsx

<FlowingMenu
  items={[
    { link: "#", text: "首页" },
    { link: "#", text: "产品" },
    { link: "#", text: "关于" },
  ]}
/>

速度与份数

speed 越大跑马灯越慢；repeat 控制单项内重复份数，撑满并保证无缝循环（最小 2）。

tsx

<FlowingMenu items={items} speed={30} repeat={6} />

何时用

需要一组竖排大字菜单项、悬停某项时从指针进入方向揭出一条文字/图片跑马灯的壁纸级炫技导航时用，适合作品集/品牌站的全屏目录。它是「逐项揭幕跑马灯」风格；要全屏铺开胶囊用 BubbleMenu，要展开成卡片用 CardNav，要规范多级导航用 NavigationMenu/NavMenu。

导入

import { FlowingMenu } from "@hulianui/ui"

Props

名称	类型	默认	说明
items *	`FlowingMenuItem[]`	-	菜单项列表
speed	`number`	`18`	跑马灯走完一整屏的秒数，越大越慢
repeat	`number`	`4`	单个文字块里重复的份数（撑满并保证无缝循环）

还继承 ComponentPropsWithoutRef<"nav">（除 children），可透传 className/style 等。

FlowingMenuItem

名称	类型	默认	说明
link *	`string`	-	跳转链接
text *	`string`	-	文案，同时作主标题与揭幕跑马灯文字
image	`string`	-	跑马灯里循环穿插的图片地址。留空则只跑文字，不渲染图片块

禁忌 / 坑

根 nav 需放在有明确高度且 overflow-hidden 的容器里，逐项揭幕才有纵向空间且跑马灯不溢出。
reduced-motion 下跑马灯/揭幕动效降级。
暂无其他已知坑。

Playground

跑马灯秒数重复份数

<div className="h-80 overflow-hidden rounded-xl border border-border">
  <FlowingMenu
    items={[
      { link: "#", text: "Discover", image: "/a.jpg" },
      { link: "#", text: "Build", image: "/b.jpg" },
    ]}
    speed={18}
    repeat={4}
  />
</div>

用法

基础用法

竖排菜单项，指针从最近的上/下边缘滑入时一块跑马灯（文字 + 图片）从同侧揭幕铺满整行，离开时退回。需放在定高容器内。

tsx

<div className="h-80 overflow-hidden rounded-xl border">
  <FlowingMenu
    items={[
      { link: "#", text: "Discover", image: "/a.jpg" },
      { link: "#", text: "Build", image: "/b.jpg" },
      { link: "#", text: "Ship", image: "/c.jpg" },
    ]}
  />
</div>

纯文字（无图片）

item 不传 image 时跑马灯只跑文字，用一截小横杠分隔，不渲染图片块。

tsx

<FlowingMenu
  items={[
    { link: "#", text: "首页" },
    { link: "#", text: "产品" },
    { link: "#", text: "关于" },
  ]}
/>

速度与份数

speed 越大跑马灯越慢；repeat 控制单项内重复份数，撑满并保证无缝循环（最小 2）。

tsx

<FlowingMenu items={items} speed={30} repeat={6} />

何时用

Props

名称	类型	默认	说明
items *	`FlowingMenuItem[]`	-	菜单项列表
speed	`number`	`18`	跑马灯走完一整屏的秒数，越大越慢
repeat	`number`	`4`	单个文字块里重复的份数（撑满并保证无缝循环）

还继承 ComponentPropsWithoutRef<"nav">（除 children），可透传 className/style 等。

FlowingMenuItem

名称	类型	默认	说明
link *	`string`	-	跳转链接
text *	`string`	-	文案，同时作主标题与揭幕跑马灯文字
image	`string`	-	跑马灯里循环穿插的图片地址。留空则只跑文字，不渲染图片块

Playground

跑马灯秒数重复份数

<div className="h-80 overflow-hidden rounded-xl border border-border">
  <FlowingMenu
    items={[
      { link: "#", text: "Discover", image: "/a.jpg" },
      { link: "#", text: "Build", image: "/b.jpg" },
    ]}
    speed={18}
    repeat={4}
  />
</div>

FlowingMenu

用法

基础用法

纯文字（无图片）

速度与份数

何时用

导入

Props

禁忌 / 坑

相关

Playground

FlowingMenu

用法

基础用法

纯文字（无图片）

速度与份数

何时用

导入

Props

禁忌 / 坑

相关

Playground