Vue 组件
为你的下一个界面找到合适的组件。按用途浏览、体验示例,再将源码带入项目。
基础操作5
表单与选择16
Arc Picker
通过手势或键盘让弧形标签列表穿过固定选择点。
1 个示例Date Range Picker
在行内或浮动日历中选择日期区间的起点与终点。
1 个示例Color Picker
使用二维颜色区域、通道输入、预设与吸管编辑颜色。
1 个示例Animated Color Selector
用移动选择轮廓与原生单选行为选择命名色块。
1 个示例Switch
通过移动滑块切换二元设置,并可添加说明标签。
1 个示例Input
在同一输入框中编辑文字,并可配置标签、图标与校验反馈。
1 个示例Select
从浮动列表选择选项,面板可从触发器连续展开。
2 个示例Combobox
通过输入框筛选分组选项,键盘焦点保持在输入区域。
1 个示例Multi Select
在可搜索控件中选择多个选项,并管理生成的标签。
1 个示例Checkbox
通过动态勾选标记表示选中、未选中和半选状态。
2 个示例Radio Group
从带标签、支持键盘导航的选项组中选择一个值。
2 个示例Range Slider
通过拖动手势或键盘步进,在轨道上调整数值。
6 个示例Wheel Picker
从旋转滚轮中选择数值,支持惯性与行吸附。
1 个示例File Upload
在队列或附件工作区管理文件、预览、进度与重试操作。
2 个示例OTP Input
通过分组输入框键入或粘贴固定长度验证码,并获取完成反馈。
1 个示例Sign Up Form
逐步填写注册字段,并获得本地校验与明确提交状态。
1 个示例布局与展示15
Timeline
沿可拖动轨道浏览日期事件,当前事件保持在焦点位置。
1 个示例Aspect Ratio
为媒体预留指定宽高比例,并在比例变化时平滑调整。
1 个示例Card
组合标题、正文、操作和页脚形成卡片,也可加入选择状态。
1 个示例Sortable List
使用指针或键盘重排列表,并提供撤销操作。
1 个示例File Tree
通过展开分支和键盘选择浏览嵌套文件与文件夹。
1 个示例Preview Rail
在紧凑导航轨道中预览目标,焦点项目附近的刻度随之展开。
1 个示例Cylinder Carousel
将画廊项目排列在凹面或凸面圆柱上,并通过拖动控制。
1 个示例Infinite Masonry
将不同高度项目排列为多列,并在可见范围推进时请求更多内容。
1 个示例Project Folder
扇形展开文档预览,并将选中文件夹展开为聚焦表面。
1 个示例Card Folder
通过协调的打开动作,从折叠口袋中展示一组卡片。
1 个示例Fixtures
浏览淘汰赛轮次或径向赛程,并查看队伍与比赛元数据。
2 个示例Swipeable List
通过指针或键盘输入,展示列表行左右两侧的操作。
1 个示例Animated Collapsible
将触发器与可展开区域连接,展开时保持周围布局连续。
1 个示例Bouncy Accordion
在单项展开的分组中打开内容区,布局通过弹簧连续移动。
1 个示例Table
使用虚拟滚动、选择、排序与可调整列浏览和编辑数据行。
3 个示例反馈9
Animated Alert
用紧凑消息行呈现反馈,可加入操作并允许关闭。
1 个示例Pull to Refresh
将向下拖动转换为有意触发的异步刷新,并显示进度。
1 个示例Number Animation
通过计数、滚动或保持数位位置的方式呈现数值变化。
3 个示例Animated Badge
将紧凑状态标签与图标组合,并可加入脉冲反馈。
1 个示例Animated Toast Stack
在堆叠区域管理临时通知,支持操作与手势关闭。
1 个示例Loader
为结果尚未返回的操作选择紧凑动态指示器。
1 个示例Notification Stack
将紧凑通知堆叠展开为可以逐条阅读的条目。
1 个示例Feedback Widget
将反馈触发器展开为表单,包含发送、成功和重试状态。
1 个示例404 / Not Found
通过动态视觉呈现缺失目标,并提供返回有效内容的路径。
5 个示例浮层7
动效与装饰7
Tilt Card
让卡片朝指针方向倾斜,并在表面移动高光。
1 个示例Marquee
连续重复水平或垂直内容带,并可在悬停时暂停。
1 个示例Shared Layout Background
在注册选项之间移动同一个背景表面,表示当前选择。
1 个示例Text Animation
揭示、闪烁、解码或替换文字,同时保持稳定的无障碍读值。
5 个示例Theme Toggle
通过圆形、矩形或百叶窗过渡揭示新的页面主题。
1 个示例Scroll Animation
将滚动与进度、视差、内容出现效果及主动定位连接。
5 个示例Shader Background
通过 Vue 适配器调用 Paper Design Shader 运行时呈现动态背景。
1 个示例业务组合5
AI18
Voice Orb
呈现运动球形场,其表面响应活动强度或音频输入。
1 个示例Message Bubble
呈现紧凑会话气泡,并可组合头像、元数据与操作控件。
3 个示例Message
使用内容、附件、来源与操作部件组合会话条目。
1 个示例Message Scroller
在新消息加入时跟随内容,同时允许读者离开并返回最新位置。
1 个示例Prompt Input
通过自适应高度文本框、附件与键盘操作编写并提交提示词。
1 个示例Todo List
展示带展开详情和明确任务状态的工作条目序列。
1 个示例Code Block
呈现带高亮的代码,并支持行控件、文件标签与复制操作。
1 个示例Approval Card
在助手继续工作前,引导用户完成一个或多个决策步骤。
2 个示例File Diff
通过对齐行号与可展开上下文检查新增及删除内容。
1 个示例Tool Result
在同一表面呈现工具调用状态、摘要与可展开结果。
2 个示例Streaming Response
组合持续变化的助手回复,包括文字、附件、引用和操作。
1 个示例Image Generation
展示图像创建状态,预览输出并提供结果操作。
1 个示例Tool Approval
为待执行工具操作展示说明,并请求明确决策。
1 个示例Citations
将行内引用标记与可检查的来源条目和链接连接。
1 个示例Agent Activity
将持续变化的助手活动组织为可展开步骤与完成摘要。
6 个示例Agent Loading States
通过进度、推理和微光显示传达助手工作仍在进行。
3 个示例AI Sidebar
在可搜索树中组织助手资源,支持选择与移动操作。
1 个示例Chat App
将导航、会话内容和提示输入区组合为助手工作空间。
1 个示例图表14
Sankey Chart
通过连接节点与按权重分配的带状路径追踪阶段间流向。
1 个示例Treemap
用面积随数值变化的嵌套矩形比较层级数据。
1 个示例Candlestick Chart
借助指针或键盘十字线检查开高低收与成交量数据。
1 个示例Donut Chart
通过圆环、可选择图例和中心数值比较整体中的各部分。
1 个示例Volume Profile
通过横向双向条形图比较各价格区间的成交量。
1 个示例Status Bar
在按比例分段的条形图中汇总各命名状态的数量。
1 个示例Composition Chart
使用归一化柱形或堆叠面积比较不同分类的组成贡献。
1 个示例Funnel Chart
跟踪连续阶段,并检查相邻步骤之间的转化与流失。
1 个示例Liquidity Heatmap
通过可选择强度带的网格检查时间与价格维度的流动性。
1 个示例Bump Chart
跟踪序列排名随时间的变化,并固定某条序列以便检查。
1 个示例Order Book
在订单簿中检查买卖档位、累计深度与价格选择。
1 个示例Heat Calendar
在紧凑日历网格中展示每日活动,检查时可读取精确数值。
1 个示例Returns Calendar
通过日历、月份汇总和可选日期内容比较每日正负收益。
1 个示例Price Target Fan
使用从共同起点延伸的目标路径比较价格预测。
1 个示例