Vue 交互动效组件

从按钮、输入到页面过渡,为日常界面添加清晰的状态变化。浏览 Vue 示例,安装需要的组件,再使用项目里的样式与数据完成组合。

近期加入

全部交互动效

Animated Alert

用紧凑消息行呈现反馈,可加入操作并允许关闭。

Animated Collapsible

将触发器与可展开区域连接,展开时保持周围布局连续。

Aspect Ratio

为媒体预留指定宽高比例,并在比例变化时平滑调整。

Arc Picker

通过手势或键盘让弧形标签列表穿过固定选择点。

Sortable List

使用指针或键盘重排列表,并提供撤销操作。

Image Viewer

从缩略图打开画廊图片,在大图中切换、缩放或平移。

Date Range Picker

在行内或浮动日历中选择日期区间的起点与终点。

Card

组合标题、正文、操作和页脚形成卡片,也可加入选择状态。

Color Picker

使用二维颜色区域、通道输入、预设与吸管编辑颜色。

Animated Color Selector

用移动选择轮廓与原生单选行为选择命名色块。

Animated Breadcrumb

展示层级中的当前位置,在空间有限时折叠中间链接。

Table of Contents

通过锚点链接浏览文章章节,目录指示器随阅读位置更新。

Tilt Card

让卡片朝指针方向倾斜,并在表面移动高光。

Button

使用具有按压反馈的操作表面,并可选磁吸、状态和金属质感变体。

Animated CTA Buttons

通过展开箭头、持续按压或滑动手势确认操作。

Expandable Control

展开紧凑控件以显示标签或尾部操作,保持原位置联系。

Adaptive Stepper

调整有边界的数值,不可用操作让出的空间由数值接替。

Marquee

连续重复水平或垂直内容带,并可在悬停时暂停。

Tabs

通过移动指示器和可访问的标签控件切换对应面板。

Switch

通过移动滑块切换二元设置,并可添加说明标签。

Input

在同一输入框中编辑文字,并可配置标签、图标与校验反馈。

Select

从浮动列表选择选项,面板可从触发器连续展开。

Combobox

通过输入框筛选分组选项,键盘焦点保持在输入区域。

Multi Select

在可搜索控件中选择多个选项,并管理生成的标签。

Checkbox

通过动态勾选标记表示选中、未选中和半选状态。

Radio Group

从带标签、支持键盘导航的选项组中选择一个值。

Bottom Sheet

从底部打开面板,并通过拖动在吸附位置之间移动。

Pull to Refresh

将向下拖动转换为有意触发的异步刷新,并显示进度。

Shared Layout Background

在注册选项之间移动同一个背景表面,表示当前选择。

Bounce Sidebar

在纵向列表中导航,活动标记沿弧线在行间移动。

Animated Sidebar

组合嵌套导航,支持展开、仅图标和移动抽屉等呈现方式。

File Tree

通过展开分支和键盘选择浏览嵌套文件与文件夹。

Preview Rail

在紧凑导航轨道中预览目标,焦点项目附近的刻度随之展开。

Dock

将紧凑导航操作分组,由指示器跟随当前活动项目。

Tooltip

在悬停或聚焦时显示简短说明,不挤动周围内容。

Animated Context Menu

在指针位置打开菜单,并可组合复选项、单选项和子菜单。

Popover

将浮动表面连接到触发器,支持常规过渡与连续变形过渡。

Morphing Modal

让对话框内容与高度一起变化,同时保持外层表面连续。

Center Morph Modal

围绕中心向各方向展开模态框,关闭时回到同一点。

Text Animation

揭示、闪烁、解码或替换文字,同时保持稳定的无障碍读值。

Number Animation

通过计数、滚动或保持数位位置的方式呈现数值变化。

Animated Badge

将紧凑状态标签与图标组合,并可加入脉冲反馈。

Action Swap

使用模糊、滚动或错开过渡替换简短操作文字与图标。

Animated Toast Stack

在堆叠区域管理临时通知,支持操作与手势关闭。

Theme Toggle

通过圆形、矩形或百叶窗过渡揭示新的页面主题。

Bouncy Accordion

在单项展开的分组中打开内容区,布局通过弹簧连续移动。

Drawer

从视口左右一侧呈现对话框,并管理焦点与背景滚动。

Scroll Animation

将滚动与进度、视差、内容出现效果及主动定位连接。

Range Slider

通过拖动手势或键盘步进,在轨道上调整数值。

Wheel Picker

从旋转滚轮中选择数值,支持惯性与行吸附。

Table

使用虚拟滚动、选择、排序与可调整列浏览和编辑数据行。

Shader Background

通过 Vue 适配器调用 Paper Design Shader 运行时呈现动态背景。

Cylinder Carousel

将画廊项目排列在凹面或凸面圆柱上,并通过拖动控制。

Loader

为结果尚未返回的操作选择紧凑动态指示器。