Jelly UI: 软 Web 组件

Jelly UI 是一个无依赖的 Web 组件库，用于柔软的触觉产品界面。真实形状控件符合软体物理原理，具有深色模式、从右到左支持和内置 WCAG AA 颜色标记。

主题·01

<果冻主题>

一个主题提供程序，将 Jelly 设计令牌的范围限制到其子树：强制亮或暗、遵循操作系统或重新着色口音。

行动·02

<果冻按钮>

胶囊形软体按钮，内部有真正的原生 <button>，用于键盘和屏幕阅读器支持。

行动·03

<果冻图标按钮>

紧凑的方形或圆形软体按钮，大小适合单个图标，通过其标签属性为屏幕阅读器命名。

<果冻复选框>

一个柔软的、与表单相关的复选框，具有选中和混合（不确定）状态，绘制为柔软的果冻方块，切换时会弹出。

<果冻输入>

柔软果冻表面上的单行文本字段：焦点抬起并环绕薄膜，每次击键都会在插入符号处使表面产生波纹。

<果冻标签>

通过 for 与任何控件配对的表单标签：单击将聚焦目标，并且文本将成为其可访问的名称。

<果冻-otp>

一次性代码输入：每个数字一个框，可进行打字、退格、箭头和粘贴处理。

<果冻收音机>

果冻单选按钮；在同一根下共享名称的无线电形成一个具有流动选项卡索引和方向感知箭头键导航的组。

<果冻无线电组>

一个带有标签的无线电组容器，用于包含图例、流程布局和大小传播的果冻无线电项目。

<果冻范围>

用于选择低/高音程的双拇指范围滑块，带有两个角色=“滑块”旋钮，用于控制焦点和 ARIA 以及拖动时会挤压的果冻拇指。

<果冻状分段>

胶囊轨道包含相互排斥的选项，带有可在各段之间滑动、倾斜和伸展的果冻丸。

<果冻选择>

ARIA 组合框/列表框模式上与表单相关的下拉菜单，其触发器和选项面板都是软体果冻表面，面板在字段外展开 - 当视口下方没有空间时，面板会在其上方翻转。

<果冻滑块>

一个单值范围滑块，其重音拇指是一个柔软的果冻体，由隐藏的本机范围输入支持，用于语义和表单参与。

<果冻开关>

可拖动的果冻开关：一个胶囊轨道，其拇指像液滴一样伸展，其颜色在关闭和打开之间交叉淡入淡出。

<果冻文本区域>

果冻表面上的多行文本字段，会在最小和最大高度之间自动增长，同时膜会跟随，在您键入时在插入符号处波纹。

反馈·16

<果冻警报>

果冻表面上的标注横幅，有四种色调和一个可选的关闭按钮。

反馈 · 17

<果冻徽章>

一个小果冻徽章/标签/状态药丸，每当其文本发生变化时就会弹出。

反馈 · 18

<果冻进度>

带有果冻填充物的进度条，其前缘在前进时摆动；不确定模式发送一个斑点，从墙到墙弹跳。

反馈 · 19

<果冻骨架>

一个轻柔呼吸的加载占位符 - 柔软的果冻摆动而不是闪光。

反馈·20

<果冻旋转器>

加载具有果冻灵魂的指示器：在三个点之间滑动的粘糊糊的斑点，或者是变形和旋转的活的斑点。

反馈·21

<果冻烤面包机>

气泡吐司通知从内联端弹出并逐渐消失——通常通过 jellyToast() 助手驱动。

表面 · 22

<果冻手风琴>

对 <jelly-collapsible> 项目进行分组；当其中一个模式打开时，单一模式会将其他模式弹回关闭状态。

表面 · 23

<果冻卡>

果冻表面容器；添加挤压，使其像软垫一样压入并充当按钮。

表面 · 24

<果冻片>

小果冻胶囊：静态标签、可切换过滤器或可移动标签。

表面 · 25

<果冻可折叠>

弹性公开部分：标题按钮可打开和关闭面板。

表面 · 26

<果冻分隔器>

细线分隔线：水平、垂直或带标签。

表面 · 27

<果冻-kbd>

果冻键盘按键：戳它，或者将它绑定到一个真正的按键上，这样只要按住该键，它就会按下。

导航·28

<果冻面包屑>

由 light-DOM 子级构建的面包屑路径；最后一项是当前页面。

导航·29

<果冻分页>

由果冻按钮构建的页面导航，带有窗口页面列表和方向感知箭头。

导航·30

<果冻可调整大小>

可调整大小的面板网格：拖动果冻分隔线，或从键盘调整大小。

导航·31

<果冻标签>

选项卡式视图：滑动果冻药丸选项卡栏，具有真正的选项卡语义和弹跳面板。

叠加层 · 32

<果冻对话框>

模式对话框会随着果冻弹出声弹出，锁定页面并在关闭时返回焦点。

叠加层 · 33

<果冻抽屉>

具有弹性过冲的浮动滑入式片材，从内联末端、内联起点或底部开始。

叠加层 · 34

<果冻菜单>

具有移动焦点、预输入键盘支持和声明性 light-DOM 项目的下拉操作菜单。

叠加层 · 35

<果冻爆米花>

单击触发的浮动面板：非模态，锚定到其触发器，通过 Escape 或单击外部来关闭。

叠加层 · 36

<果冻工具提示>

一个轻量级的工具提示，可在悬停或键盘焦点时将主题气泡锚定在其触发器上。