HeroUI 3.0 全组件视觉与交互效果大全

互动交流
1

HeroUI 3.0 全组件视觉与交互效果大全

HeroUI 3.0（原 NextUI）不仅仅是一个基础的 UI 库，它在底层全面接入了 Tailwind CSS 4.0 与 Framer Motion。许多开发者可能只用过它的 Button 或 Card，但实际上，它的组件生态已经极其庞大。

本文将毫无遗漏地盘点 HeroUI 3.0 提供的所有组件及其独有的视觉与交互动效。

1. 浮层、弹窗与抽屉 (Overlays & Dialogs)

这部分是体现 HeroUI 动画功底的核心区域。

  • Modal (模态框) & Alert Dialog (警告弹窗)

    • 效果：背景支持极具质感的毛玻璃遮罩 ( backdrop="blur" )。支持从屏幕各个方向弹性滑入、中心缩放弹出。Alert Dialog 专用于破坏性操作，默认带有红色警示效果及焦点锁定。

  • Drawer (抽屉) [进阶组件]

    • 效果：支持从上、下、左、右四个边缘滑入。拖拽时带有物理阻尼感，松手后有丝滑的吸附回弹动画。

  • Popover (气泡卡片) & Tooltip (文字提示)

    • 效果：触发时带有轻微的缩放与位移 (Scale & Translate) 动画，箭头会精准指向目标。

  • Dropdown (下拉菜单)

    • 效果：展开时菜单项呈阶梯状渐显。支持快捷键显示， hover 时有极其平滑的背景色跟随高亮。

  • Toast (全局提示) [新增组件]

    • 效果：屏幕边缘弹出的轻量级通知。连续触发时支持“卡片堆叠” (Stacking) 视觉效果，支持手势滑动消除 (Swipe to dismiss)。

img_v3_0210f_e6a14763-540d-4366-839d-26ec0ac7a81g

2. 数据与内容展示 (Data Display)

  • Card (卡片)

    • 效果：支持点击波纹 (Ripple) 和悬浮阴影扩散。支持内部绝对定位元素的毛玻璃叠加。

  • Accordion (手风琴/折叠面板)

    • 效果：基于内容高度自动计算的无缝折叠/展开过渡动画，彻底解决 CSS 无法完美处理 height: auto 动画的痛点。

  • Table (数据表格)

    • 效果：支持行悬浮高亮、选中状态带有主题色覆盖。表头固定时，滚动带有自然的阴影隔离。

  • Avatar (头像) & Avatar Group (头像组)

    • 效果：头像堆叠时，悬浮某一个头像会将其平滑推至最前层，并伴随轻微放大。

  • Badge (徽标) & Chip (标签)

    • 效果：数值更新时带有弹跳 (Pop) 动画；Chip 被点击关闭时带有平滑的缩放消失效果。

  • Listbox (列表框) & Menu (菜单)

    • 效果：常用于自定义下拉选项的底层组件，支持列表项组 (Section) 划分，选中项带有打勾 (Check) 绘制动画。

  • ScrollShadow (滚动阴影) [特色组件]

    • 效果：当内容溢出容器并发生滚动时，容器的边缘（顶部/底部/左侧/右侧）会自动出现渐变阴影，提示用户还有内容可滚动。滚动到底部时阴影自动平滑消失。

img_v3_0210f_00867464-468f-4228-96bd-eccd28f79b0g

img_v3_0210f_83a49b27-2613-4070-8465-1ea8d01e55ag
img_v3_0210f_83a49b27-2613-4070-8465-1ea8d01e55ag1051×242 29.1 KB

3. 高级表单与输入 (Forms & Inputs)

HeroUI 3.0 在表单输入上的组件丰富度极高。

  • Input (文本框) & Textarea (多行文本)

    • 效果：聚焦 (Focus) 时边框或背景有平滑的颜色过渡，支持内联标签浮动 (Label float) 动画。

  • Input OTP (验证码输入) [特色组件]

    • 效果：专用于 4-6 位验证码。输入时光标自动跳转，带有下划线或独立格子的聚焦高亮动画。

  • Number Field (数字输入框) [新增组件]

    • 效果：自带加减微调按钮 (Stepper)，长按时数值快速滚动。

  • Select (选择框)

    • 效果：结合了 Input 和 Dropdown 的动画，多选时选中的项会以 Chip 形式平滑插入到输入框内部。

  • Autocomplete (自动完成) & ComboBox (组合框) [进阶组件]

    • 效果：在用户输入时，下拉列表会实时过滤并高亮匹配的文字。支持异步加载并显示 Spinner。

img_v3_0210f_53092be9-04d0-44c7-a864-dab0ea486dbg

4. 日期与颜色选择器 (Date & Color Pickers)

这是 HeroUI 基于 React Aria 提供的极其强大的高级组件域。

  • Calendar (日历) & Range Calendar (区间日历)

    • 效果：切换月份时，日期面板带有左右滑动的过渡动画。选择区间时，中间的日期会有连贯的背景色填充效果。

  • DatePicker (日期输入) & DateRangePicker

    • 效果：输入框内的年、月、日被分割为独立的可聚焦块 (Segments)，键盘上下键可滚动数值。点击弹出 Calendar 面板。

  • TimeField (时间输入)

    • 效果：与 DatePicker 类似，专用于时、分、秒、AM/PM 的独立分块控制。

  • ColorPicker (颜色选择器全家桶) [特色组件]

    • 包含 ColorArea (调色板区域)、 ColorSlider (色相/透明度滑块)、 ColorSwatch (色块预览)。

    • 效果：拖拽游标时，外围会实时预览颜色；支持自由组合构建类似 Photoshop 的高级拾色器界面。

img_v3_0210f_881bb98d-a2f1-4eac-98b0-67a162b2fbbg

5. 选择控制与滑块 (Controls & Selections)

  • Switch (开关)

    • 效果：不仅是滑块的物理平移，滑块内部的图标（如日月切换）也会带有旋转和缩放的进出场动画。

  • Checkbox (复选) & Radio (单选)

    • 效果：Checkbox 选中时有真实的路径绘制 (Path drawing) 动画；Radio 选中时中心圆点带有弹性放大效果。

  • Slider (范围滑块)

    • 效果：拖拽时上方弹出的 Tooltip 数值会紧紧跟随鼠标；滑过刻度线 (Marks) 时有轻微的视觉吸附感。

img_v3_0210f_996bb27f-5cfb-49a7-a5ff-22cf10f9e6ag

6. 导航与反馈 (Navigation & Feedback)

  • Navbar (导航栏)

    • 效果：内置向下滚动隐藏、向上滚动显现的交互，自带毛玻璃属性。

  • Tabs (选项卡)

    • 效果：切换 Tab 时，背景指示器不会生硬跳转，而是计算两者的距离与宽度差，进行平滑的变形滑动 (Morphing & Sliding)。

  • Breadcrumbs (面包屑)

    • 效果：支持自定义分隔符，过长时自动将中间层级收缩为一个 ... 的下拉菜单。

  • Pagination (分页)

    • 效果：点击页码时，高亮背景块会在旧页码和新页码之间滑动。

  • Progress (进度条) & Circular Progress (环形进度)

    • 效果：支持 indeterminate (不确定) 状态下的流光/旋转动画，以及 determinate 状态下平滑的宽度/弧度填充。

  • Meter (计量器) [新增组件]

    • 效果：类似进度条，但用于展示当前值在某个范围内的比例（如存储空间、健康度），支持根据不同阈值（低/中/高）改变颜色。

  • Spinner (加载圈) & Skeleton (骨架屏)

    • 基础的反馈组件，Skeleton 带有细腻的波浪/呼吸渐变闪烁。

img_v3_0210f_0010012d-0770-4c48-83f8-bb2d16a7c0bg

7. 辅助元素 (Utilities)

  • Kbd (键盘按键提示)

    • 视觉：模拟实体键盘按键的 3D 阴影视觉，常用于提示快捷键（如 Ctrl + K ）。

  • Link (链接)

    • 视觉：支持悬浮时出现下划线，支持结合外部路由组件使用。

  • Divider (分割线) & Spacer (间距)

    • 基础的排版辅助组件。

img_v3_0210f_07eca02d-a80a-4f12-bb38-d90ca47cbe6g

1 个赞
2
1 个赞