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
为结果尚未返回的操作选择紧凑动态指示器。