Jelly UI 软Web组件库从基础到高级应用

Jelly UI 是一款完全独立于外部框架的 Web 组件库，专为打造拥有柔软触感的用户界面而设计。其核心依托于软体物理原理的真实形状控件，天然支持深色模式、从右到左的布局，并内置符合 WCAG AA 标准的颜色标记，真正做到开箱即用，大幅减少开发工作量。

整个组件库围绕几个核心主题构建，首先从最基础的「主题」开始介绍。

<果冻主题>

一个主题提供程序，能够将 Jelly 设计令牌的作用域限定在其子组件树内。你可以强制它显示亮色或暗色模式，也可以让它跟随操作系统的设置，甚至自由重新着色强调色，灵活性极高，满足不同场景的配色需求。

接下来是「行动」类组件，也就是用户最常交互的那些 UI 元素。

<果冻按钮>

经典的胶囊形软体按钮，内部封装了一个真正的原生 元素，确保键盘和屏幕阅读器都能正常识别和操作，既保证了手感的真实感，又兼顾了无障碍访问性。

<果冻图标按钮>

更紧凑的方形或圆形按钮，大小刚好容纳一个图标。通过其标签属性为屏幕阅读器提供命名，视觉上简洁干净，功能上却毫不含糊，适合用于工具栏或紧凑界面。

<果冻复选框>

一个与表单紧密相关的软体复选框，支持选中和混合（不确定）状态。它被绘制成一个柔软的果冻方块，在切换选中状态时会带有弹跳的动画效果，交互反馈生动而直观。

<果冻输入>

单行文本输入框，在柔软的果冻表面上呈现。获得焦点时，它会微微抬起，并环绕着一层薄膜；每次击键，输入框表面都会在光标位置产生波纹，仿佛真的在果冻上书写，带来沉浸式输入体验。

<果冻标签>

通过 for 属性与任何控件关联的表单标签。点击它即可聚焦到对应的控件，其文本内容也会成为该控件的无障碍名称，是构建可访问表单的基础组件。

<果冻-otp>

一次性密码输入组件，每个数字一个独立的输入框。它完整支持打字、退格键、方向键和粘贴操作，让输入验证码的体验流畅又自然，有效提升用户完成率。

<果冻收音机>

果冻风格的单选按钮。在同一个 name 下共享名称的多个单选按钮会自动形成一个组，并具备流动的 Tab 键索引和方向感知的箭头键导航，键盘操作毫无压力，符合无障碍规范。

<果冻无线电组>

一个带有标签的容器，专门用来包裹和管理一组果冻单选按钮。它负责包含图例、控制流式布局，并确保选中状态能够正确传播，简化表单组的构建。

<果冻范围>

双拇指范围滑块，用于选择低/高值区间。它拥有两个角色为“滑块”的旋钮，分别控制焦点和 ARIA 信息。拖动时，果冻质感的拇指会有挤压变形效果，手感反馈极其真实，适合区间范围选择。

<果冻状分段>

胶囊轨道内包含一组互斥的选项。一个果冻药丸可以在各个段之间滑动、倾斜甚至伸展，视觉上完美模拟了物理选中的过程，让切换选项变得有趣而直观。

<果冻选择>

基于 ARIA 组合框/列表框模式的下拉菜单。它的触发器和选项面板都是柔软的果冻表面，并且选项面板会在字段下方展开——当视口底部空间不足时，它会智能地向上翻转，避免遮挡，适配各种屏幕尺寸。

<果冻滑块>

单值范围滑块，其高亮部分的拇指是一个柔软的果冻体。它由隐藏的原生范围输入支持，保证了语义化结构和表单提交的兼容性，兼具美观与实用。

<果冻开关>

可拖动的开关组件。一个胶囊轨道，其拇指像水滴一样伸展，颜色在关闭和打开状态之间交叉淡入淡出，切换过程流畅而优雅，适合用于设置界面的开关操作。

<果冻文本区域>

果冻表面上的多行文本输入框，可以在最小和最大高度之间自动增长。输入时，表面的薄膜会跟随文字移动，并在光标位置产生波纹，仿佛在果冻上书写，带来连续的书写反馈。

用户操作的反馈同样重要，这部分归为「反馈」类组件。

<果冻警报>

果冻表面上的标注横幅，提供四种不同的色调，并带有一个可选的关闭按钮，用于显示各种类型的提示信息，如成功、警告、错误等，帮助用户快速获取状态。

<果冻徽章>

一个小巧的果冻徽章、标签或状态药丸。每当其文本内容发生变化时，它都会有一个弹跳的动画效果，用来吸引用户注意，适合显示通知数量或状态标记。

<果冻进度>

带有果冻填充物的进度条。前进时，填充物的前缘会呈波浪形摆动；在不确定模式下，一个斑点会从墙壁一端弹跳到另一端，看起来非常活泼，让等待过程不再枯燥。

<果冻骨架>

一个轻柔呼吸的加载占位符，它模拟了柔软的果冻摆动效果，而不是常见的闪烁，让等待过程变得不那么枯燥，提升用户感知体验。

<果冻旋转器>

加载指示器，带有果冻的灵魂。它可以是一个在三个点之间滑动的粘糊糊的斑点，也可以是一个不断变形和旋转的活体斑点，充满动感，适合作为加载动画。

<果冻烤面包机>

气泡式的吐司通知，从内联端弹出并逐渐消失。通常通过 jellyToast() 这个辅助函数来驱动，调用非常方便，适合快速展示临时消息。

组件的「表面」决定了信息的承载和布局方式。

<果冻手风琴>

对多个 项目进行分组。当设置为单一模式时，打开其中一个项目会自动将其他项目弹回关闭状态，非常适合用来组织 FAQ 或设置面板，节省页面空间。

<果冻卡>

果冻表面的容器。添加挤压效果后，它会像软垫一样被压入，并可以充当按钮，给用户带来独特的按压手感，适合用于卡片式交互。

<果冻片>

小果冻胶囊，可以作为静态标签、可切换过滤器或可移动标签，用途非常灵活，适用于标签系统或筛选功能。

<果冻可折叠>

弹性可展开的折叠面板。点击标题按钮即可打开或关闭面板，用于节省页面空间，同时保持内容的结构化。

<果冻分隔器>

一条细线分隔线，支持水平、垂直或带标签三种形式，用于清晰地区分内容区域，提升页面视觉层次。

<果冻-kbd>

果冻键盘按键。你可以用鼠标戳它，或者将它绑定到一个真实的按键上，这样只要按住该键，它就会呈现被按下的状态，细节做得非常到位，适合模拟键盘交互。

在「导航」层面，Jelly UI 也提供了相应的组件。

<果冻面包屑>

由轻量级 DOM 子级构建的面包屑路径，最后一项表示当前页面，帮助用户了解当前位置，提升网站导航的易用性。

<果冻分页>

由果冻按钮构建的页面导航，带有窗口化的页码列表，并支持方向感知的箭头键导航，方便用户快速翻页。

<果冻可调整大小>

可调整大小的面板网格。你可以拖动果冻风格的分隔线，或者通过键盘来调整各面板的大小，灵活布局工作区。

<果冻标签>

选项卡式视图，拥有一个可滑动的果冻药丸选项卡栏，具备真正的选项卡语义，切换时面板会有弹跳的动画效果，交互流畅自然。

最后是「叠加层」组件，用于处理需要浮于主内容之上的界面元素。

<果冻对话框>

模态对话框，打开时伴随着果冻弹跳的动画效果，并锁定页面的滚动。关闭时，焦点会智能返回到打开它的元素，交互逻辑非常完整，适合用于确认提示或表单弹窗。

<果冻抽屉>

浮动滑入的页面，具有弹性过冲效果，可以从内联末端、内联起点或底部滑入，适合用于侧边栏或底部菜单，提供丰富的滑入动画。

<果冻菜单>

下拉操作菜单，支持移动焦点、预输入键盘搜索，并允许使用声明性的轻量级 DOM 项目来构建，灵活且易于定制，适合用于上下文菜单。

<果冻爆米花>

点击触发的浮动面板，非模态。它锚定在触发器上，通过按 Escape 键或点击外部区域来关闭，非常适合用于弹出式提示或工具菜单，不打断用户操作。

<果冻工具提示>

轻量级的工具提示，在鼠标悬停或键盘焦点时，将主题气泡锚定在其触发器上，提供简洁的说明信息，帮助用户理解界面元素的功能。