Jelly UI — 软Web组件
来源：互联网 2026-07-23 08:16:02JellyUI是一个无外部依赖的Web组件库，基于软体物理原理打造真实形状控件，支持深色模式、从右到左布局及WCAGAA标准。组件涵盖主题、行动、反馈、表面、导航和叠加层，包括胶囊按钮、果冻复选框、波纹输入框、智能下拉菜单、可拖动开关、弹跳进度条、呼吸加载占位符、模态对话框等，开箱即用。
Jelly UI 是一个不依赖任何外部框架的 Web 组件库，专门为打造具有柔软触感的产品界面而设计。它的核心在于那些遵循软体物理原理的真实形状控件，并且天生支持深色模式、从右到左的布局，以及内置了符合 WCAG AA 标准的颜色标记，开箱即用，省心不少。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
整个组件库围绕几个核心主题展开，先从最基础的「主题」说起。
<果冻主题>
一个主题提供程序，可以将 Jelly 设计令牌的作用范围限定在其子组件树内。你可以强制它显示亮色或暗色模式，也可以让它跟随操作系统的设置，或者干脆重新着色强调色，灵活性非常高。
接下来是「行动」类组件，也就是用户最常交互的那些 UI 元素。
<果冻按钮>
经典的胶囊形软体按钮，内部封装了一个真正的原生
<果冻图标按钮>
更紧凑的方形或圆形按钮，大小刚好容纳一个图标。通过其标签属性为屏幕阅读器提供命名，视觉上简洁，功能上却毫不含糊。
<果冻复选框>
一个与表单紧密相关的软体复选框，支持选中和混合（不确定）状态。它被绘制成一个柔软的果冻方块，在切换选中状态时会带有弹跳的动画效果，非常生动。
<果冻输入>
单行文本输入框，在柔软的果冻表面上呈现。获得焦点时，它会微微抬起，并环绕着一层薄膜；每次击键，输入框表面都会在光标位置产生波纹，仿佛真的在果冻上写字。
<果冻标签>
通过 for 属性与任何控件关联的表单标签。点击它即可聚焦到对应的控件，其文本内容也会成为该控件的无障碍名称，是构建可访问表单的基础。
<果冻-otp>
一次性密码输入组件，每个数字一个独立的输入框。它完整支持打字、退格键、方向键和粘贴操作，让输入验证码的体验流畅又自然。
<果冻收音机>
果冻风格的单选按钮。在同一个 name 下共享名称的多个单选按钮会自动形成一个组，并具备流动的 Tab 键索引和方向感知的箭头键导航，键盘操作毫无压力。
<果冻无线电组>
一个带有标签的容器，专门用来包裹和管理一组果冻单选按钮。它负责包含图例、控制流式布局，并确保选中状态能够正确传播。
<果冻范围>
双拇指范围滑块，用于选择低/高值区间。它拥有两个角色为“滑块”的旋钮，分别控制焦点和 ARIA 信息。拖动时，果冻质感的拇指会有挤压变形的效果，手感反馈极其真实。
<果冻状分段>
胶囊轨道内包含一组互斥的选项。一个果冻药丸可以在各个段之间滑动、倾斜甚至伸展，视觉上完美模拟了物理选中的过程。
<果冻选择>
基于 ARIA 组合框/列表框模式的下拉菜单。它的触发器和选项面板都是柔软的果冻表面，并且选项面板会在字段下方展开——当视口底部空间不足时，它会智能地向上翻转，避免遮挡。
<果冻滑块>
单值范围滑块，其高亮部分的拇指是一个柔软的果冻体。它由隐藏的原生范围输入支持，保证了语义化结构和表单提交的兼容性。
<果冻开关>
可拖动的开关组件。一个胶囊轨道，其拇指像水滴一样伸展，颜色在关闭和打开状态之间交叉淡入淡出，切换过程流畅而优雅。
<果冻文本区域>
果冻表面上的多行文本输入框，可以在最小和最大高度之间自动增长。输入时，表面的薄膜会跟随文字移动，并在光标位置产生波纹，仿佛在果冻上书写。
用户操作的反馈同样重要，这部分归为「反馈」类组件。
<果冻警报>
果冻表面上的标注横幅，提供四种不同的色调，并带有一个可选的关闭按钮，用于显示各种类型的提示信息。
<果冻徽章>
一个小巧的果冻徽章、标签或状态药丸。每当其文本内容发生变化时，它都会有一个弹跳的动画效果，用来吸引用户注意。
<果冻进度>
带有果冻填充物的进度条。前进时，填充物的前缘会呈波浪形摆动；在不确定模式下，一个斑点会从墙壁一端弹跳到另一端，看起来非常活泼。
<果冻骨架>
一个轻柔呼吸的加载占位符，它模拟了柔软的果冻摆动效果，而不是常见的闪烁，让等待过程变得不那么枯燥。
<果冻旋转器>
加载指示器，带有果冻的灵魂。它可以是一个在三个点之间滑动的粘糊糊的斑点，也可以是一个不断变形和旋转的活体斑点，充满动感。
<果冻烤面包机>
气泡式的吐司通知，从内联端弹出并逐渐消失。通常通过 jellyToast() 这个辅助函数来驱动，调用非常方便。
组件的「表面」决定了信息的承载和布局方式。
<果冻手风琴>
对多个
<果冻卡>
果冻表面的容器。添加挤压效果后，它会像软垫一样被压入，并可以充当按钮，给用户带来独特的按压手感。
<果冻片>
小果冻胶囊，可以作为静态标签、可切换过滤器或可移动标签，用途非常灵活。
<果冻可折叠>
弹性可展开的折叠面板。点击标题按钮即可打开或关闭面板，用于节省页面空间。
<果冻分隔器>
一条细线分隔线，支持水平、垂直或带标签三种形式，用于清晰地区分内容区域。
<果冻-kbd>
果冻键盘按键。你可以用鼠标戳它，或者将它绑定到一个真实的按键上，这样只要按住该键，它就会呈现被按下的状态，细节做得非常到位。
在「导航」层面，Jelly UI 也提供了相应的组件。
<果冻面包屑>
由轻量级 DOM 子级构建的面包屑路径，最后一项表示当前页面，帮助用户了解当前位置。
<果冻分页>
由果冻按钮构建的页面导航，带有窗口化的页码列表，并支持方向感知的箭头键导航。
<果冻可调整大小>
可调整大小的面板网格。你可以拖动果冻风格的分隔线，或者通过键盘来调整各面板的大小。
<果冻标签>
选项卡式视图，拥有一个可滑动的果冻药丸选项卡栏，具备真正的选项卡语义，切换时面板会有弹跳的动画效果。
最后是「叠加层」组件，用于处理需要浮于主内容之上的界面元素。
<果冻对话框>
模态对话框，打开时伴随着果冻弹跳的动画效果，并锁定页面的滚动。关闭时，焦点会智能返回到打开它的元素，交互逻辑非常完整。
<果冻抽屉>
浮动滑入的页面，具有弹性过冲效果，可以从内联末端、内联起点或底部滑入，适合用于侧边栏或底部菜单。
<果冻菜单>
下拉操作菜单，支持移动焦点、预输入键盘搜索，并允许使用声明性的轻量级 DOM 项目来构建，灵活且易于定制。
<果冻爆米花>
点击触发的浮动面板，非模态。它锚定在触发器上，通过按 Escape 键或点击外部区域来关闭，非常适合用于弹出式提示或工具菜单。
<果冻工具提示>
轻量级的工具提示，在鼠标悬停或键盘焦点时，将主题气泡锚定在其触发器上，提供简洁的说明信息。
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
相关攻略
更多
热游推荐
更多-
- DreamStudio
- Android/ | AI绘图
- 2026-06-30
-
-
- Playground AI
- Android/ | AI绘图
- 2026-06-30
-
- Adobe Firefly
- Android/ | AI绘图
- 2026-06-30
-
-
-
- Leonardo AI
- Android/ | AI绘图
- 2026-06-30
-
- Stable Diffusion
- Android/ | AI绘图
- 2026-06-30
