组件导航

组件

瑚琏吸取式聚合组件库 · 博采众长

布局15

容器

Layout

把页面拆成页头、侧栏、内容和页脚四块,侧栏可折叠

AdminLayout

搭出中后台外壳:侧栏导航、顶栏、多页签工作区和可滚动内容区

ScrollArea

给溢出内容换上更细的自定义滚动条,可竖可横

Viewport

按网页、平板、手机三档宽度预览,内部布局随容器宽度重排

Resizable

把区域切成可拖动的分栏,能限制大小也能用键盘微调

AspectRatio

把图片、视频或任意内容锁在固定的宽高比里

FitScreen

把固定尺寸的设计稿等比缩放,铺满任意大小的屏幕

PreviewSandbox

在隔离的沙箱里预览代码或组件,带设备视口、缩放和错误兜底

Masonry

把长短不一的卡片分列排成瀑布流,列数随屏幕宽度变化

Container

给页面内容限定最大宽度并居中,留出左右安全边距

排布

Stack

按一个方向排列子元素,统一控制间距、对齐和换行

Grid

按栅格排列内容,子项可跨列跨行

Spacer

在布局中插入一段纯粹的空白间距

Divider

用一条分隔线把内容切开,线上可以带文字

Separator

画一条横向或竖向的分隔线,带正确的无障碍语义

排版37

文本

Text

统一正文的字号、字重、语义色和截断方式

Heading

输出各级标题,视觉大小与标题层级可以分开设定

Prose

给富文本或 Markdown 内容套上统一的排版样式

Markdown

把 Markdown 字符串渲染成只读的富文本内容

Formula

排版数学公式,分式、矩阵、求和积分都按真正的二维版式呈现

AuroraText

让一层多彩极光渐变在文字内部持续流动

LineShadowText

在标题文字背后错开一层硬边条纹投影

AnimatedShinyText

让一道克制的高光缓缓扫过文字,常用于徽标文案

AnimatedGradientText

让渐变色在文字里持续流动以强调重点

WordRotate

在同一位置轮换展示一组词,带进出场过渡

TypingAnimation

逐字打出文字,末尾跟一个闪烁光标

SparklesText

在文字周围点缀随机闪烁的小星星

SplitText

把文字拆成字或词,滚到视口时逐个错峰浮现

BlurText

让文字从模糊位移中逐词解析清晰

FlipText

鼠标移入时让标题逐字做三维翻面

TextReveal

用一道彩色光带扫过,把文字从透明揭示成实色

DecryptedText

先滚动乱码,再逐位解码成真正的文字

GlitchText

给文字叠上色差错位与切片抖动的故障效果

CircularText

把文字排成一圈并持续自转,悬停可以调速

ScrollReveal

随着段落滚过视口把文字逐词显影

TrueFocus

让句中一个词清晰、其余模糊,焦点框依次移动

ASCIIText

把文字渲染成会波动的 ASCII 字符画

CurvedLoop

让文字沿一条弧线无缝循环滚动,可拖动拨快

FallingText

让词语受重力散落、碰撞堆叠,还能被拖起来抛出

FuzzyText

给标题叠上扫描噪点,悬停时抖动更明显

ScrambledText

指针靠近时字符先翻滚乱码再收敛回原文

ScrollFloat

随着滚动进度把标题逐字从下方拔起

ScrollVelocity

让多行文字按页面滚动的速度反向跑动

Shuffle

先把字符洗成乱码,再按顺序锁定成原文

TextCursor

沿指针轨迹落下一串字形,随后浮动淡出

TextPressure

让字形的字重、宽度和倾斜随鼠标远近变化

VariableProximity

按指针与每个字的距离插值可变字体的各条轴

代码

Code

给行内代码片段套上等宽皮肤,可选语义色调

CodeBlock

展示多行代码,带语言标签和一键复制

Snippet

展示一行命令,带提示符和一键复制

CodeDiff

按行展示代码增删,可单栏也可左右双栏对照

Kbd

展示键位或快捷键,做成键帽的样子

表单70

按钮

Button

触发操作的按钮,提供实心、浅色、描边、幽灵和危险等变体

ShimmerButton

让一道微光沿按钮边缘游走,突出主行动号召

InteractiveHoverButton

悬停时圆点扩成整块底色,并推出一个箭头

RainbowButton

给按钮镶一圈持续流动的彩虹光边

PulsatingButton

用一圈向外扩散的光环让按钮持续引起注意

RippleButton

在点击落点扩散一圈水波纹,给出触感反馈

ButtonGroup

把相关按钮连成一体或分组排列,做成分段控件

SocialButton

提供带品牌标识的第三方登录按钮,含加载态

基础录入

Input

收单行文本输入,可加前后缀和错误态

Textarea

收多行文本输入,高度随内容自增

CellEditor

在表格单元格里就地编辑,静止时看起来和纯文本一样

Select

从下拉浮层里选一个或多个值,超出的已选项折成计数

Checkbox

切换一个独立的布尔值,支持半选态

CheckboxGroup

让一组复选框共同维护一个值数组

Radio

从一组互斥选项里选一个,支持方向键操作

Switch

用一个开关切换二元设置,语义是改完即刻生效

Toggle

让单个按钮在按下与未按下之间切换

Segmented

在紧凑的分段控件里选一项,滑块跟着移动

Slider

沿轨道拖出一个数值或一段区间,支持键盘步进

NumberField

编辑数字,带上下限、步进按钮和键盘步进

ElasticSlider

拖到两端会像橡皮筋一样拉伸的音量滑块

高级录入

MathTextarea

带公式模板与实时预览的 LaTeX 输入框,产出仍是含 $…$ 的普通字符串

QuestionEditor

一道数学题的结构化编辑:七型切换、题图、选项、填空、分步给分、实时预览

QuestionAnswer

学生答一道题:按题型给对的控件、选项缺失明说、多空全填才可交、答完显示正误与解析

MathField

MathLive 驱动的公式输入框:所见即所得地敲出 LaTeX,可注入公式输入框与作答卡,另给 CAS 等价判分

SecretField

掩码显示密钥,可一键显形和复制原值

PasswordGenerator

生成随机密码或密码短语,实时给出强度评级

Combobox

边输入边过滤候选项,可用触发按钮也可内联输入

RemoteSelect

从远端接口搜索选项,带防抖、分页和初值回显

Listbox

用键盘可漫游的列表做单选、多选或纯动作项

Mentions

输入触发符后弹出候选,把提及插进文本

InputOTP

分格输入验证码,自动跳格并支持整段粘贴

Rating

用星级打分,可换图标并带悬停预览

Upload

点击或拖拽选文件,带校验、进度和文件列表

RegionSelect

在图上拖框选区,回传原图的像素坐标

ImageCropper

让用户拖动缩放图片,按固定比例裁出成品

ScopeMatrix

编辑允许与禁止两份范围清单,并给出最终生效范围

Transfer

在待选和已选两个列表之间搬运条目

Cascader

沿逐级展开的选项列选出一条路径

TreeSelect

从可搜索的树里选一个或多个节点

RegionCascader

逐级选出中国的省、市、区,内置行政区划数据

CountrySelect

搜索并选择国家和地区,带旗帜与区号

MarkdownEditor

所见即所得地编辑内容,值进出都是 Markdown

RichTextEditor

所见即所得地编辑内容,值进出都是 HTML

CodeEditor

编辑代码,带行号、语法着色和成套键盘操作

IssueReporter

按模板收集信息,拼出 issue 正文和预填链接

ColorPicker

拖取饱和度与色相选颜色,可输出 HEX、RGB 或 HSL

ColorField

用色块和十六进制输入框编辑一个颜色

ColorSwatchPicker

从一组预设色块里挑一个颜色,方向键可达

Choicebox

用带标题和描述的卡片做单选或多选

EmojiPicker

按分类浏览或关键词搜索表情,带最近使用

VoiceRecord

提供按住说话或点击开始的录音按钮,带波形与处理态

IconPicker

分类浏览并搜索图标,图标集由使用方注入

InspectorPanel

按字段描述派生属性面板,编辑元素的样式与几何

日期时间

Calendar

常驻的日历面板,可在日、月、年三层之间下钻

DatePicker

点开日历浮层选一个日期,可限制可选范围

DateTimePicker

在一个浮层里同时选好日期和时间

DateRangePicker

用双月日历选出起止日期,带快捷区间

TimePicker

从时、分、秒三列浮层里选一个时间

TimeField

用键盘直接编辑时、分、秒各段,不弹浮层

表单框架

Form

组织具名字段,统一收集提交和字段级错误

ModalForm / DrawerForm

把带校验的表单装进弹窗或抽屉,管好提交与关闭

ProForm

内联表单编排,自动配好提交与重置底栏

StepsForm

把长表单拆成多步,逐步校验并保留已填内容

LoginForm

现成的登录表单,含字段校验、记住我和品牌插槽

AuthPanel

搭出分屏登录页的品牌一侧,含渐变底、标语和卖点

ClickCaptcha

让用户按顺序点选图片位置完成人机验证

Label

单独的表单标签,皮肤与 Field 保持一致

Field

把标签、控件、帮助文字和错误串成一个无障碍字段

SearchForm

拼出列表页顶部的查询条件区,可折叠可重置

数据展示94

集合

QuestionCard

完整展示一道题:题干、选项、小问、配图和出处

Table

渲染语义化表格,支持排序、整行点击和空态

Book3D

把封面做成有厚度的立体书,悬停时转正

ProTable

在数据列表外配齐查询条件、工具栏、行选择和分页,拼出完整列表页

PricingTable

把多个方案按属性逐行对照,可高亮推荐列

JsonViewer

折叠查看 JSON,带语法着色、复制和层级控制

EditableTable

在表格里直接编辑整行,带校验、取消和增删行

List

排列结构化列表项,带元信息、操作区、空态和分页

Descriptions

在详情页里成组展示只读的键值对字段

RowActions

收拢表格行的操作,超出数量自动收进溢出菜单

Tree

展示可展开的层级节点,支持选择和键盘操作

Card

把相关内容装进带页头、正文和页脚的卡片

Carousel

轮播多张幻灯片,带箭头、圆点、自动播放和拖拽

Video

播放本地或 HLS 视频,带自定义控件、章节和续播

BentoGrid

用跨行跨列的卡片拼出错落有致的功能墙

Image

加载图片并处理淡入、失败回退和悬停放大

MagicCard

让卡片跟随鼠标透出一片径向高光

AnimatedList

让列表项在进入视口时逐个淡入上移

Marquee

让内容沿一个方向无缝滚动,悬停可暂停

Sortable

用鼠标或键盘拖动条目改变顺序,可整项拖也可用手柄

Kanban

把卡片在多个状态列之间拖动流转

Flow

编排节点和连线,可拖节点、连桩、平移和缩放

DesignCanvas

在无限画布上自由摆放元素,可框选、拖动和缩放

ComponentPicker

浏览组件库,带分类树、模糊搜索和详情预览

Sankey

用带宽度的流向图展示各阶段之间的分配与去向

Funnel

按各阶段数量画漏斗,并标出级间转化率

Treemap

按数值把矩形铺满,一眼看出谁占大头

EventStream

把高频机器事件排成连续时间线,用语义色标出异常

QueueLane

按优先级泳道展示队列积压,道头给出深度与等待

DocumentSheet

把单据排在 A4 纸面上,带页眉页脚和打印支持

Gantt

把任务排到时间轴上,展示分组、进度和今天的位置

Scheduler

在月、周、日和资源视图里排事件,可拖拽建单改期

Danmaku

把观众弹幕分轨飘过画面,互不重叠

LiveChat

展示直播公屏消息流,带礼物、进场、置顶和自动滚动

LivePlayer

直播画面外壳,带在线人数、清晰度切换和互动叠层

LogViewer

按级别着色展示日志行,新行自动贴底

FileTree

浏览文件和目录,带展开、选中和改动状态标记

Heatmap

把矩阵数值映射成色阶网格,可看图例也可下钻

CodeReviewThread

展示代码评审线程,带严重度、建议改动和解决状态

VirtualList

只渲染可见行,让上万条列表也能流畅滚动

InfiniteScroll

滚到接近底部时自动加载下一批内容

ContributionGraph

把每日活动量画成日历格子墙,附深浅图例

LogoLoop

让一排 logo 无缝循环滚动,悬停可减速暂停

BounceCards

让一叠卡片弹跳着扇形铺开,悬停时互相让位

CardSwap

让堆叠的卡片轮流从最前落到队尾

ChromaGrid

卡片墙整体压暗,只有指针光圈里透出全彩

CircularGallery

让图片沿圆弧排开,可拖动惯性浏览

DomeGallery

把图片贴在三维半球内壁,拖动旋转、点击放大

FlyingPosters

让一列海报随滚动或拖拽翻折着飞过

InfiniteMenu

把菜单项分布在可拖动旋转的球面上,正对镜头者为当前项

MagicBento

便当式卡片网格,带指针聚光、边框呼吸和可选倾斜

ScrollStack

随着滚动把卡片逐张钉住并层层堆叠

ProfileCard

会随指针倾斜的全息名片卡,无头像时落首字母

TiltedCard

让图片卡朝指针倾斜,可带说明气泡

PixelCard

悬停时用像素颗粒从中心生长着揭开卡片

DecayCard

让图片卡随鼠标速度湍流溶解并视差倾斜

ReflectiveCard

金属质感的卡片,有斜向高光扫过和磨砂噪点

Folder

点击展开三维文件夹,扇形铺出里面的纸张

信息标记

Sparkline

在一行里画出极简趋势,不带坐标轴和网格

ImageViewer

全屏查看图片,可缩放、平移、翻页和看缩略图

LiveProductCard

展示直播带货商品,含价格、库存和抢购入口

DiffStat

用绿红格子条概括增删行数,并标出文件状态

ScoreRing

用彩色环形仪表盘展示分值和对应等级

ScoreScale

用整条按档着色的横带展示分值落在哪一档

Badge

在内容一角叠加计数或小红点,计数可封顶

Dot

一个状态圆点,可带语义色、呼吸动效和无障碍名

StatusDot

用圆点加文字表示服务在线、降级、离线还是维护

Chip

紧凑的标记令牌,可带圆点也可移除

FilterChip

回显一条已应用的筛选条件,可点开重选也可移除

Coupon

展示优惠券的面额、门槛、有效期和领取状态

Tag

给内容打上语义状态标签,可带图标和关闭按钮

Annotation

用荧光笔、手绘箭头和手写旁注就地讲解行内内容

Avatar

展示用户头像,加载失败时回退到备用内容

AvatarCircles

把多个头像叠成一排,末尾带溢出计数

User

把头像、姓名和描述组合成一行用户信息

QRCode

生成跟随主题配色的二维码,可加中心 logo 并导出

Comment

展示可嵌套的评论回复,带缩进和操作区

RelativeTime

把时间戳显示成「3 分钟前」这类相对时间并自动刷新

GitCommit

展示一次提交的分支、短哈希、说明和作者

DeployStatus

表示部署处在排队、构建、上线、失败还是取消

ShieldBadge

生成左标签右数值的仓库徽章,可点击可分组

AwardBadge

用桂冠徽记展示名次或荣誉称号,徽记可替换

CreditCard

展示银行卡卡面,自动识别品牌并可打码

统计度量

Legend

给自绘的图形配一组带色块的图例条目

Stat

展示一个关键指标的数值、标签和升降趋势

Statistic

格式化统计数值,可带前后缀、滚动入场或倒计时

Chart

提供面积图、柱图、折线、饼图等常用图表,配色跟随主题

Meter

用语义化的量条表示某个值在已知范围里的占比

Timeline

把事件按时间排成一条线,节点样式可自定义

NumberTicker

数字进入视口后滚动跳转到目标值

WorldMap

在点阵世界地图上标点、画飞线并支持下钻

占位

Empty

说明当前没有内容,带图标、说明和后续操作

Skeleton

用占位骨架预留内容位置,等待数据到达

Watermark

给页面铺上防篡改的水印,支持高清屏

反馈25

浮层

Dialog

在模态浮层里承载内容,并锁住键盘焦点

Modal

用函数调用直接弹出确认、成功、警告等对话框

AlertDialog

对高风险操作要求明确确认,不能随手关掉

Drawer

从屏幕任意一边滑出抽屉,承载内容或任务

Popover

把可交互的内容锚在触发元素旁边

Tooltip

悬停时在旁边浮出一句简短说明,带指向箭头

HoverCard

悬停后浮出富内容卡片,移开延时关闭

Glimpse

悬停链接时预览目标的封面、标题和摘要

HeroVideoDialog

点击封面缩略图,在模态浮层里播放视频

ElementSelectionOverlay

在页面或同源 iframe 里悬停高亮、点击选中元素并回传路径

提示

Alert

在页面里常驻一条信息、成功、警告或危险提示

InterceptCard

说清一个动作为什么被规则挡下,并给出放行入口

Callout

在长文里插入提示、注意或经验类的说明块

Banner

在容器顶部通栏播报公告,可带操作和关闭

Toast

用命令式调用弹出会自动消失的轻提示

Notification

在屏幕角落堆叠通知卡片,可带图标和操作

ServiceMessage

展示服务通知卡片,含来源抬头、字段和底部入口

Result

展示操作结果或错误页,含图标、说明和后续操作

GiftFeed

展示直播礼物流,同一礼物自动合并成连击

FloatingReactions

从底部喷射一串上浮又淡出的点赞表情

Popconfirm

在操作按钮旁就地确认一次危险动作

加载与进度

Spin

给内容区盖上加载遮罩,可延迟出现避免闪烁

Spinner

一个独立的加载旋转圈,带状态语义

Progress

展示确定或不确定的进度,可线形可环形

引导

Tour

带用户走一遍功能引导,高亮目标并逐步说明

AI 智能体16

对话

Conversation

纵向堆叠对话消息,新内容自动贴底

ChatMessage

展示一条对话消息,含角色、头像、时间和操作

PromptInput

输入并发送提示词,支持停止、换行和输入法保护

TypingDots

用三个跳动的点表示对方正在输入

推理与工具

ThinkingBlock

折叠展示智能体的思考过程,可以看到耗时

ToolCall

展示一次工具调用的参数、进度和结果

AgentPlan

列出智能体的执行计划,逐条标出进行和完成

Dossier

展示智能体各信息域的收集进度和内容摘要

Artifact

在对话里承载生成的文档或代码,可展开收起

ConfirmCard

请用户确认智能体提出的操作,或要求修正

ThreadList

列出历史会话,可切换、删除和新建

TaskRunner

汇总一次任务运行的状态、步骤、进度和耗时

辅助

StreamingText

展示流式增长的文本,末尾跟一个闪烁光标

PromptSuggestions

给出可点击的起始提问或追问建议

MessageActions

给一条消息配上复制、重试和点赞点踩

Citation

在正文里内联标注一条来源,可点开原文

装饰92

背景

DotPattern

铺一层跟随主题配色的点阵背景,点距可调

GridPattern

铺一层线条网格作为区块背景,可换成虚线

StripedPattern

用轻量的斜条纹给区块打底,颜色跟随文字色

Spotlight

在内容后面打一片跟随主题的径向辉光

RetroGrid

让透视网格向观众持续推进,营造复古氛围

Ripple

从一个原点向外扩散一圈圈同心光环

Meteors

让一阵流星带着拖尾斜斜划过内容背景

Aurora

让多层极光渐变缓缓流过背景,并向中心聚焦

Particles

一片会被鼠标推开的粒子星尘,颜色随主题走

FlickeringGrid

让网格里的方块随机明灭,透出技术感

WavyBackground

用噪声驱动的多彩波浪带铺满背景

Silk

铺一层丝绸般连续流动的光泽背景

Iridescence

随鼠标变化的虹彩光泽,像看一层油膜反光

Threads

一束随鼠标摆动的发光丝线在背景里流动

Orb

展示一颗会随悬停增亮旋转的发光能量球

LiquidChrome

液态金属般的反光背景,鼠标划过泛起涟漪

Balatro

铺一层像素旋涡般混色的油彩背景

Ballpit

一坑会掉落碰撞、被指针推开的彩色小球

Beams

流动的体积光柱,带噪声起伏和胶片颗粒

ColorBends

一束束有机彩色光带,会随指针弯折走向

DarkVeil

暗色帷幕缓缓流动,带扫描线和颗粒质感

Dither

把动态噪声波纹量化成复古的有序抖动像素

DotField

一片会被指针推挤鼓胀、并泛起辉光的点阵

EvilEye

画一只瞳孔跟随指针的翻腾火焰之眼

FaultyTerminal

出故障的终端字符雨,带撕裂、扫描线和涟漪

Ferrofluid

铁磁流体般的金属峰脊,会被指针按出凹陷

FloatingLines

缓缓漂浮的正弦线束,会随指针弯曲

Galaxy

多层视差星河,带闪烁的星点和纵深感

GradientBlinds

把多色渐变切成竖条百叶,并跟随指针打光

Grainient

三色扭曲渐变叠上胶片颗粒,做出粗粝质感

GridDistortion

让网格随指针拖拽液态扭曲,松手弹性回弹

GridMotion

让倾斜网格的相邻行随鼠标反向弹性移动

GridScan

铺一片透视网格,让发光扫描线不断向纵深推进

Hyperspeed

从消失点冲面而来的跃迁光带隧道

LetterGlitch

一片不断翻字变色的终端字符矩阵

Lightfall

让多色光束在隧道里坠落,可被指针牵引

Lightning

不断闪烁的噪声电弧与极光柱

LightPillar

一根上下双色渐变、内部持续翻涌的体积光柱

LightRays

从指定原点射出会脉动的体积光束,可跟随指针

LineWaves

多彩波纹线阵,会在指针处局部隆起

LiquidEther

一片会被指针搅动翻涌的液态色域

PixelBlast

把翻涌的噪声量化成方块、圆点等像素形状

PixelSnow

带景深的像素雪场,可选方块、圆点或雪花

Plasma

随指针扰动流动的等离子光场

PlasmaWave

让两条等离子丝带交织流动并混出主题色

Prism

让棱镜把光折射成彩虹般的体积光束

PrismaticBurst

从中心放射可弯曲、可梳理的光谱射线

Radar

画一台带同心环、辐条和旋转扫描臂的雷达

RippleGrid

让发光网格被同心波和指针涟漪推挤起伏

ShapeGrid

让几何形无限滚动,悬停时填充并留下淡出的拖尾

SideRays

从屏幕一角扇出两道来回摆动的光束

SoftAurora

柔和的双层噪声极光,随指针做视差移动

覆盖特效

BorderBeam

让一道光束沿着元素边框循环绕圈

ShineBorder

让一道渐变流光沿元素边框来回游走

GlareHover

悬停时让一道斜向反光扫过内容表面

Lens

在指针处圆形放大下方的任意内容

AnimatedBeam

在两个元素之间画一条流动的连接光束

OrbitingCircles

让子元素沿圆形轨道匀速环绕中心

ProgressiveBlur

在内容一侧做出层层递进的方向性模糊

CardSpotlight

让卡片内部跟随指针透出一圈聚光

Reveal

让任意内容进入视口时位移淡入,子项可依次错峰

Antigravity

指针靠近时把漂浮粒子吸进环绕轨道,离开再放回

BlobCursor

让一串弹性液滴融成水银跟着指针跑

ClickSpark

在点击处迸出一圈短线火花后散去

Crosshair

用一横一纵的准星线跟随指针移动

ElectricBorder

让元素边缘跳动着放电般的辉光描边

GhostCursor

让一团幽灵烟雾拖着惯性跟随指针

GradualBlur

沿容器某一边叠出逐层加深的贴边模糊

ImageTrail

沿指针快速移动的轨迹甩出一串淡出的图片

LaserFlow

让体积激光束自上而下穿过雾气倾泻

MagicRings

画出跟随指针、循环扩张的同心光环

Magnet

让内容在一定半径内被指针吸引跟随,离开平滑归位

MagnetLines

让一整片细线段实时转向指针所在的方向

MetaBalls

让一组黏液球游走,靠近时融合、离开时分开

MetallicPaint

液态金属漆面,带折射色散和成段的金属条纹

OrbitImages

让子项沿椭圆、星形等预设或自定义轨道环绕流转

PixelTrail

指针划过点亮背后的像素格,随后逐格淡灭

PixelTransition

用一幕随机散开的像素幕布在两组内容之间切换

Ribbons

让一束飘带弹性追随指针划出轨迹

ShapeBlur

让一块模糊的几何高光带阻尼跟随指针

SplashCursor

指针移动和点击时溅出彩色流体并消散

StarBorder

让两道光带沿边缘来回扫过,把按钮框亮

StickerPeel

让贴纸的边角翘起,可拖动并跟随指针反光

TargetCursor

用会自动吸附到目标元素的准星替代鼠标指针

Cubes

一片会随指针靠近而倾斜的立方体阵列

Tilt

让任意内容随指针、陀螺仪或指定角度做三维倾斜

BorderGlow

让卡片边框和外圈光晕随指针靠近亮起

GlassIcons

把图标动作摆在玻璃拟态方块上,悬停时抬升旋转

GlassSurface

做出会折射背景、边缘带色散的玻璃面

Lanyard

一枚可拖动的挂绳工牌,松手后摆动回位

ModelViewer

用三维舞台展示模型,可拖动旋转、自动巡游

FluidGlass

让一枚玻璃透镜在流动的渐变底上折射滑过

设备外壳7

窗口

Safari

用 Safari 风格的浏览器窗口包住截图

Chrome

用 Chrome 风格的浏览器窗口包住截图,带标签页

Terminal

在终端窗口里逐行揭示命令和输出

设备

iPhone

用带灵动岛的手机外壳把内容包成展示图

Android

用带打孔摄像头的安卓手机外壳包住内容

Tablet

用平板外壳把内容包成设备展示图,可选机型

Watch

用智能手表外壳包住紧凑内容做展示

移动端7

导航

TabBar

移动端底部导航栏,带角标并避开底部安全区

Fab

在页面上方浮一个主操作按钮,可展开子动作

浮层

ActionSheet

从屏幕底部滑出一组适合触屏的操作项

录入

Picker

用一到多列滚轮选值,松手吸附到居中项

手势交互

SwipeAction

横向滑动列表项,露出后面的操作按钮

PullToRefresh

顶部下拉触发刷新,松手后保持到请求结束

布局

SafeArea

给指定边加上设备安全区内距,避开刘海和横条