常用组件
瑚琏吸取式聚合组件库 · 博采众长
把页面拆成页头、侧栏、内容和页脚四块,侧栏可折叠
搭出中后台外壳:侧栏导航、顶栏、多页签工作区和可滚动内容区
给溢出内容换上更细的自定义滚动条,可竖可横
按网页、平板、手机三档宽度预览,内部布局随容器宽度重排
把区域切成可拖动的分栏,能限制大小也能用键盘微调
把图片、视频或任意内容锁在固定的宽高比里
把固定尺寸的设计稿等比缩放,铺满任意大小的屏幕
在隔离的沙箱里预览代码或组件,带设备视口、缩放和错误兜底
把长短不一的卡片分列排成瀑布流,列数随屏幕宽度变化
给页面内容限定最大宽度并居中,留出左右安全边距
按一个方向排列子元素,统一控制间距、对齐和换行
按栅格排列内容,子项可跨列跨行
在布局中插入一段纯粹的空白间距
用一条分隔线把内容切开,线上可以带文字
画一条横向或竖向的分隔线,带正确的无障碍语义
统一正文的字号、字重、语义色和截断方式
输出各级标题,视觉大小与标题层级可以分开设定
给富文本或 Markdown 内容套上统一的排版样式
把 Markdown 字符串渲染成只读的富文本内容
排版数学公式,分式、矩阵、求和积分都按真正的二维版式呈现
让一层多彩极光渐变在文字内部持续流动
在标题文字背后错开一层硬边条纹投影
让一道克制的高光缓缓扫过文字,常用于徽标文案
让渐变色在文字里持续流动以强调重点
在同一位置轮换展示一组词,带进出场过渡
逐字打出文字,末尾跟一个闪烁光标
在文字周围点缀随机闪烁的小星星
把文字拆成字或词,滚到视口时逐个错峰浮现
让文字从模糊位移中逐词解析清晰
鼠标移入时让标题逐字做三维翻面
用一道彩色光带扫过,把文字从透明揭示成实色
先滚动乱码,再逐位解码成真正的文字
给文字叠上色差错位与切片抖动的故障效果
把文字排成一圈并持续自转,悬停可以调速
随着段落滚过视口把文字逐词显影
让句中一个词清晰、其余模糊,焦点框依次移动
把文字渲染成会波动的 ASCII 字符画
让文字沿一条弧线无缝循环滚动,可拖动拨快
让词语受重力散落、碰撞堆叠,还能被拖起来抛出
给标题叠上扫描噪点,悬停时抖动更明显
指针靠近时字符先翻滚乱码再收敛回原文
随着滚动进度把标题逐字从下方拔起
让多行文字按页面滚动的速度反向跑动
先把字符洗成乱码,再按顺序锁定成原文
沿指针轨迹落下一串字形,随后浮动淡出
让字形的字重、宽度和倾斜随鼠标远近变化
按指针与每个字的距离插值可变字体的各条轴
给行内代码片段套上等宽皮肤,可选语义色调
展示多行代码,带语言标签和一键复制
展示一行命令,带提示符和一键复制
按行展示代码增删,可单栏也可左右双栏对照
展示键位或快捷键,做成键帽的样子
触发操作的按钮,提供实心、浅色、描边、幽灵和危险等变体
让一道微光沿按钮边缘游走,突出主行动号召
悬停时圆点扩成整块底色,并推出一个箭头
给按钮镶一圈持续流动的彩虹光边
用一圈向外扩散的光环让按钮持续引起注意
在点击落点扩散一圈水波纹,给出触感反馈
把相关按钮连成一体或分组排列,做成分段控件
提供带品牌标识的第三方登录按钮,含加载态
收单行文本输入,可加前后缀和错误态
收多行文本输入,高度随内容自增
在表格单元格里就地编辑,静止时看起来和纯文本一样
从下拉浮层里选一个或多个值,超出的已选项折成计数
切换一个独立的布尔值,支持半选态
让一组复选框共同维护一个值数组
从一组互斥选项里选一个,支持方向键操作
用一个开关切换二元设置,语义是改完即刻生效
让单个按钮在按下与未按下之间切换
在紧凑的分段控件里选一项,滑块跟着移动
沿轨道拖出一个数值或一段区间,支持键盘步进
编辑数字,带上下限、步进按钮和键盘步进
拖到两端会像橡皮筋一样拉伸的音量滑块
带公式模板与实时预览的 LaTeX 输入框,产出仍是含 $…$ 的普通字符串
一道数学题的结构化编辑:七型切换、题图、选项、填空、分步给分、实时预览
学生答一道题:按题型给对的控件、选项缺失明说、多空全填才可交、答完显示正误与解析
MathLive 驱动的公式输入框:所见即所得地敲出 LaTeX,可注入公式输入框与作答卡,另给 CAS 等价判分
掩码显示密钥,可一键显形和复制原值
生成随机密码或密码短语,实时给出强度评级
边输入边过滤候选项,可用触发按钮也可内联输入
从远端接口搜索选项,带防抖、分页和初值回显
用键盘可漫游的列表做单选、多选或纯动作项
输入触发符后弹出候选,把提及插进文本
分格输入验证码,自动跳格并支持整段粘贴
用星级打分,可换图标并带悬停预览
点击或拖拽选文件,带校验、进度和文件列表
在图上拖框选区,回传原图的像素坐标
让用户拖动缩放图片,按固定比例裁出成品
编辑允许与禁止两份范围清单,并给出最终生效范围
在待选和已选两个列表之间搬运条目
沿逐级展开的选项列选出一条路径
从可搜索的树里选一个或多个节点
逐级选出中国的省、市、区,内置行政区划数据
搜索并选择国家和地区,带旗帜与区号
所见即所得地编辑内容,值进出都是 Markdown
所见即所得地编辑内容,值进出都是 HTML
编辑代码,带行号、语法着色和成套键盘操作
按模板收集信息,拼出 issue 正文和预填链接
拖取饱和度与色相选颜色,可输出 HEX、RGB 或 HSL
用色块和十六进制输入框编辑一个颜色
从一组预设色块里挑一个颜色,方向键可达
用带标题和描述的卡片做单选或多选
按分类浏览或关键词搜索表情,带最近使用
提供按住说话或点击开始的录音按钮,带波形与处理态
分类浏览并搜索图标,图标集由使用方注入
按字段描述派生属性面板,编辑元素的样式与几何
常驻的日历面板,可在日、月、年三层之间下钻
点开日历浮层选一个日期,可限制可选范围
在一个浮层里同时选好日期和时间
用双月日历选出起止日期,带快捷区间
从时、分、秒三列浮层里选一个时间
用键盘直接编辑时、分、秒各段,不弹浮层
组织具名字段,统一收集提交和字段级错误
把带校验的表单装进弹窗或抽屉,管好提交与关闭
内联表单编排,自动配好提交与重置底栏
把长表单拆成多步,逐步校验并保留已填内容
现成的登录表单,含字段校验、记住我和品牌插槽
搭出分屏登录页的品牌一侧,含渐变底、标语和卖点
让用户按顺序点选图片位置完成人机验证
单独的表单标签,皮肤与 Field 保持一致
把标签、控件、帮助文字和错误串成一个无障碍字段
拼出列表页顶部的查询条件区,可折叠可重置
完整展示一道题:题干、选项、小问、配图和出处
渲染语义化表格,支持排序、整行点击和空态
把封面做成有厚度的立体书,悬停时转正
在数据列表外配齐查询条件、工具栏、行选择和分页,拼出完整列表页
把多个方案按属性逐行对照,可高亮推荐列
折叠查看 JSON,带语法着色、复制和层级控制
在表格里直接编辑整行,带校验、取消和增删行
排列结构化列表项,带元信息、操作区、空态和分页
在详情页里成组展示只读的键值对字段
收拢表格行的操作,超出数量自动收进溢出菜单
展示可展开的层级节点,支持选择和键盘操作
把相关内容装进带页头、正文和页脚的卡片
轮播多张幻灯片,带箭头、圆点、自动播放和拖拽
播放本地或 HLS 视频,带自定义控件、章节和续播
用跨行跨列的卡片拼出错落有致的功能墙
加载图片并处理淡入、失败回退和悬停放大
让卡片跟随鼠标透出一片径向高光
让列表项在进入视口时逐个淡入上移
让内容沿一个方向无缝滚动,悬停可暂停
用鼠标或键盘拖动条目改变顺序,可整项拖也可用手柄
把卡片在多个状态列之间拖动流转
编排节点和连线,可拖节点、连桩、平移和缩放
在无限画布上自由摆放元素,可框选、拖动和缩放
浏览组件库,带分类树、模糊搜索和详情预览
用带宽度的流向图展示各阶段之间的分配与去向
按各阶段数量画漏斗,并标出级间转化率
按数值把矩形铺满,一眼看出谁占大头
把高频机器事件排成连续时间线,用语义色标出异常
按优先级泳道展示队列积压,道头给出深度与等待
把单据排在 A4 纸面上,带页眉页脚和打印支持
把任务排到时间轴上,展示分组、进度和今天的位置
在月、周、日和资源视图里排事件,可拖拽建单改期
把观众弹幕分轨飘过画面,互不重叠
展示直播公屏消息流,带礼物、进场、置顶和自动滚动
直播画面外壳,带在线人数、清晰度切换和互动叠层
按级别着色展示日志行,新行自动贴底
浏览文件和目录,带展开、选中和改动状态标记
把矩阵数值映射成色阶网格,可看图例也可下钻
展示代码评审线程,带严重度、建议改动和解决状态
只渲染可见行,让上万条列表也能流畅滚动
滚到接近底部时自动加载下一批内容
把每日活动量画成日历格子墙,附深浅图例
让一排 logo 无缝循环滚动,悬停可减速暂停
让一叠卡片弹跳着扇形铺开,悬停时互相让位
让堆叠的卡片轮流从最前落到队尾
卡片墙整体压暗,只有指针光圈里透出全彩
让图片沿圆弧排开,可拖动惯性浏览
把图片贴在三维半球内壁,拖动旋转、点击放大
让一列海报随滚动或拖拽翻折着飞过
把菜单项分布在可拖动旋转的球面上,正对镜头者为当前项
便当式卡片网格,带指针聚光、边框呼吸和可选倾斜
随着滚动把卡片逐张钉住并层层堆叠
会随指针倾斜的全息名片卡,无头像时落首字母
让图片卡朝指针倾斜,可带说明气泡
悬停时用像素颗粒从中心生长着揭开卡片
让图片卡随鼠标速度湍流溶解并视差倾斜
金属质感的卡片,有斜向高光扫过和磨砂噪点
点击展开三维文件夹,扇形铺出里面的纸张
在一行里画出极简趋势,不带坐标轴和网格
全屏查看图片,可缩放、平移、翻页和看缩略图
展示直播带货商品,含价格、库存和抢购入口
用绿红格子条概括增删行数,并标出文件状态
用彩色环形仪表盘展示分值和对应等级
用整条按档着色的横带展示分值落在哪一档
在内容一角叠加计数或小红点,计数可封顶
一个状态圆点,可带语义色、呼吸动效和无障碍名
用圆点加文字表示服务在线、降级、离线还是维护
紧凑的标记令牌,可带圆点也可移除
回显一条已应用的筛选条件,可点开重选也可移除
展示优惠券的面额、门槛、有效期和领取状态
给内容打上语义状态标签,可带图标和关闭按钮
用荧光笔、手绘箭头和手写旁注就地讲解行内内容
展示用户头像,加载失败时回退到备用内容
把多个头像叠成一排,末尾带溢出计数
把头像、姓名和描述组合成一行用户信息
生成跟随主题配色的二维码,可加中心 logo 并导出
展示可嵌套的评论回复,带缩进和操作区
把时间戳显示成「3 分钟前」这类相对时间并自动刷新
展示一次提交的分支、短哈希、说明和作者
表示部署处在排队、构建、上线、失败还是取消
生成左标签右数值的仓库徽章,可点击可分组
用桂冠徽记展示名次或荣誉称号,徽记可替换
展示银行卡卡面,自动识别品牌并可打码
给自绘的图形配一组带色块的图例条目
展示一个关键指标的数值、标签和升降趋势
格式化统计数值,可带前后缀、滚动入场或倒计时
提供面积图、柱图、折线、饼图等常用图表,配色跟随主题
用语义化的量条表示某个值在已知范围里的占比
把事件按时间排成一条线,节点样式可自定义
数字进入视口后滚动跳转到目标值
在点阵世界地图上标点、画飞线并支持下钻
说明当前没有内容,带图标、说明和后续操作
用占位骨架预留内容位置,等待数据到达
给页面铺上防篡改的水印,支持高清屏
搭出响应式顶部导航,含品牌、链接和移动端菜单
在页脚展示 ICP 备案与公安备案信息并链到官网
展示品牌徽章、站名和副标题,可收起成纯徽章
打开可搜索的应用图标网格,按分类归组
提供可折叠的应用侧栏外壳,移动端自动变抽屉
渲染多级侧边导航,可内联展开也可收成图标
用共享浮层承载导航触发器、链接和大面板
用下拉菜单收纳操作项,支持分组和危险项
把常驻的应用菜单排成一条键盘可达的菜单栏
一排会随鼠标靠近放大的图标快捷入口
从气泡按钮展开一屏错落排布的胶囊导航
让胶囊顶栏展开,露出逐张错峰浮现的导航卡
竖排菜单在指针进出时揭幕,透出循环滚动的文字或图片
切换导航项时让指示药丸像液体一样滑过去并迸出粒子
胶囊形导航,悬停时底色涨满、文字反相
从侧边滑出分层导航面板,条目依次错峰入场
把打开过的页面排成一条页签,支持固定、调序和批量关闭
在多个内容面板之间切换,指示条可下划线可实心
展示当前页面在层级中的位置,并标出当前页
在分好页的数据间跳转,页码过多时折叠成省略号
在长文里跟踪当前标题并平滑跳转到各节
滚过一定距离后把内容固定在屏幕上,不让布局跳动
滚动超过一定高度后浮出按钮,点它平滑回到顶部
只标当前进度的极简横向步骤条,一条线走到底
分步流程的完整步骤条,可横可竖、能派生状态也能点击跳转
组合返回、面包屑、标题、标签和操作区做出页头
用快捷键唤起面板,搜索并执行分好组的命令
在右键落点弹出上下文操作菜单,可标危险项
把一组操作控件排成工具栏,焦点可键盘漫游
折叠展开多段内容,可单开也可多开
折叠或展开一块内容,带高度过渡
带样式的链接,外链自动加图标和安全属性
用一圈圆形揭示动画切换明暗主题
在模态浮层里承载内容,并锁住键盘焦点
用函数调用直接弹出确认、成功、警告等对话框
对高风险操作要求明确确认,不能随手关掉
从屏幕任意一边滑出抽屉,承载内容或任务
把可交互的内容锚在触发元素旁边
悬停时在旁边浮出一句简短说明,带指向箭头
悬停后浮出富内容卡片,移开延时关闭
悬停链接时预览目标的封面、标题和摘要
点击封面缩略图,在模态浮层里播放视频
在页面或同源 iframe 里悬停高亮、点击选中元素并回传路径
在页面里常驻一条信息、成功、警告或危险提示
说清一个动作为什么被规则挡下,并给出放行入口
在长文里插入提示、注意或经验类的说明块
在容器顶部通栏播报公告,可带操作和关闭
用命令式调用弹出会自动消失的轻提示
在屏幕角落堆叠通知卡片,可带图标和操作
展示服务通知卡片,含来源抬头、字段和底部入口
展示操作结果或错误页,含图标、说明和后续操作
展示直播礼物流,同一礼物自动合并成连击
从底部喷射一串上浮又淡出的点赞表情
在操作按钮旁就地确认一次危险动作
给内容区盖上加载遮罩,可延迟出现避免闪烁
一个独立的加载旋转圈,带状态语义
展示确定或不确定的进度,可线形可环形
带用户走一遍功能引导,高亮目标并逐步说明
纵向堆叠对话消息,新内容自动贴底
展示一条对话消息,含角色、头像、时间和操作
输入并发送提示词,支持停止、换行和输入法保护
用三个跳动的点表示对方正在输入
折叠展示智能体的思考过程,可以看到耗时
展示一次工具调用的参数、进度和结果
列出智能体的执行计划,逐条标出进行和完成
展示智能体各信息域的收集进度和内容摘要
在对话里承载生成的文档或代码,可展开收起
请用户确认智能体提出的操作,或要求修正
列出历史会话,可切换、删除和新建
汇总一次任务运行的状态、步骤、进度和耗时
展示流式增长的文本,末尾跟一个闪烁光标
给出可点击的起始提问或追问建议
给一条消息配上复制、重试和点赞点踩
在正文里内联标注一条来源,可点开原文
铺一层跟随主题配色的点阵背景,点距可调
铺一层线条网格作为区块背景,可换成虚线
用轻量的斜条纹给区块打底,颜色跟随文字色
在内容后面打一片跟随主题的径向辉光
让透视网格向观众持续推进,营造复古氛围
从一个原点向外扩散一圈圈同心光环
让一阵流星带着拖尾斜斜划过内容背景
让多层极光渐变缓缓流过背景,并向中心聚焦
一片会被鼠标推开的粒子星尘,颜色随主题走
让网格里的方块随机明灭,透出技术感
用噪声驱动的多彩波浪带铺满背景
铺一层丝绸般连续流动的光泽背景
随鼠标变化的虹彩光泽,像看一层油膜反光
一束随鼠标摆动的发光丝线在背景里流动
展示一颗会随悬停增亮旋转的发光能量球
液态金属般的反光背景,鼠标划过泛起涟漪
铺一层像素旋涡般混色的油彩背景
一坑会掉落碰撞、被指针推开的彩色小球
流动的体积光柱,带噪声起伏和胶片颗粒
一束束有机彩色光带,会随指针弯折走向
暗色帷幕缓缓流动,带扫描线和颗粒质感
把动态噪声波纹量化成复古的有序抖动像素
一片会被指针推挤鼓胀、并泛起辉光的点阵
画一只瞳孔跟随指针的翻腾火焰之眼
出故障的终端字符雨,带撕裂、扫描线和涟漪
铁磁流体般的金属峰脊,会被指针按出凹陷
缓缓漂浮的正弦线束,会随指针弯曲
多层视差星河,带闪烁的星点和纵深感
把多色渐变切成竖条百叶,并跟随指针打光
三色扭曲渐变叠上胶片颗粒,做出粗粝质感
让网格随指针拖拽液态扭曲,松手弹性回弹
让倾斜网格的相邻行随鼠标反向弹性移动
铺一片透视网格,让发光扫描线不断向纵深推进
从消失点冲面而来的跃迁光带隧道
一片不断翻字变色的终端字符矩阵
让多色光束在隧道里坠落,可被指针牵引
不断闪烁的噪声电弧与极光柱
一根上下双色渐变、内部持续翻涌的体积光柱
从指定原点射出会脉动的体积光束,可跟随指针
多彩波纹线阵,会在指针处局部隆起
一片会被指针搅动翻涌的液态色域
把翻涌的噪声量化成方块、圆点等像素形状
带景深的像素雪场,可选方块、圆点或雪花
随指针扰动流动的等离子光场
让两条等离子丝带交织流动并混出主题色
让棱镜把光折射成彩虹般的体积光束
从中心放射可弯曲、可梳理的光谱射线
画一台带同心环、辐条和旋转扫描臂的雷达
让发光网格被同心波和指针涟漪推挤起伏
让几何形无限滚动,悬停时填充并留下淡出的拖尾
从屏幕一角扇出两道来回摆动的光束
柔和的双层噪声极光,随指针做视差移动
让一道光束沿着元素边框循环绕圈
让一道渐变流光沿元素边框来回游走
悬停时让一道斜向反光扫过内容表面
在指针处圆形放大下方的任意内容
在两个元素之间画一条流动的连接光束
让子元素沿圆形轨道匀速环绕中心
在内容一侧做出层层递进的方向性模糊
让卡片内部跟随指针透出一圈聚光
让任意内容进入视口时位移淡入,子项可依次错峰
指针靠近时把漂浮粒子吸进环绕轨道,离开再放回
让一串弹性液滴融成水银跟着指针跑
在点击处迸出一圈短线火花后散去
用一横一纵的准星线跟随指针移动
让元素边缘跳动着放电般的辉光描边
让一团幽灵烟雾拖着惯性跟随指针
沿容器某一边叠出逐层加深的贴边模糊
沿指针快速移动的轨迹甩出一串淡出的图片
让体积激光束自上而下穿过雾气倾泻
画出跟随指针、循环扩张的同心光环
让内容在一定半径内被指针吸引跟随,离开平滑归位
让一整片细线段实时转向指针所在的方向
让一组黏液球游走,靠近时融合、离开时分开
液态金属漆面,带折射色散和成段的金属条纹
让子项沿椭圆、星形等预设或自定义轨道环绕流转
指针划过点亮背后的像素格,随后逐格淡灭
用一幕随机散开的像素幕布在两组内容之间切换
让一束飘带弹性追随指针划出轨迹
让一块模糊的几何高光带阻尼跟随指针
指针移动和点击时溅出彩色流体并消散
让两道光带沿边缘来回扫过,把按钮框亮
让贴纸的边角翘起,可拖动并跟随指针反光
用会自动吸附到目标元素的准星替代鼠标指针
一片会随指针靠近而倾斜的立方体阵列
让任意内容随指针、陀螺仪或指定角度做三维倾斜
让卡片边框和外圈光晕随指针靠近亮起
把图标动作摆在玻璃拟态方块上,悬停时抬升旋转
做出会折射背景、边缘带色散的玻璃面
一枚可拖动的挂绳工牌,松手后摆动回位
用三维舞台展示模型,可拖动旋转、自动巡游
让一枚玻璃透镜在流动的渐变底上折射滑过
用 Safari 风格的浏览器窗口包住截图
用 Chrome 风格的浏览器窗口包住截图,带标签页
在终端窗口里逐行揭示命令和输出
用带灵动岛的手机外壳把内容包成展示图
用带打孔摄像头的安卓手机外壳包住内容
用平板外壳把内容包成设备展示图,可选机型
用智能手表外壳包住紧凑内容做展示
移动端底部导航栏,带角标并避开底部安全区
在页面上方浮一个主操作按钮,可展开子动作
从屏幕底部滑出一组适合触屏的操作项
用一到多列滚轮选值,松手吸附到居中项
横向滑动列表项,露出后面的操作按钮
顶部下拉触发刷新,松手后保持到请求结束
给指定边加上设备安全区内距,避开刘海和横条