JGuang
EN
60 个组件当前查看 Base UI

操作

按钮、菜单与直接操作控件。

7 个组件

按钮 / Button

触发操作或提交表单的基础交互控件。

查看
滚动到此处加载 15 个 JGuang UI 示例

按钮组 / Button Group

将一组相关按钮组合为统一的操作区域。

查看
滚动到此处加载 12 个 JGuang UI 示例

命令面板 / Command

支持搜索、键盘导航与快捷操作的命令菜单。

查看
滚动到此处加载 6 个 JGuang UI 示例

上下文菜单 / Context Menu

通过右键或长按展示与当前对象相关的操作。

查看
滚动到此处加载 11 个 JGuang UI 示例

下拉菜单 / Dropdown Menu

由触发器打开的一组临时操作选项。

查看
滚动到此处加载 13 个 JGuang UI 示例

切换按钮 / Toggle

在按下与未按下状态之间切换。

查看
滚动到此处加载 6 个 JGuang UI 示例

切换按钮组 / Toggle Group

从一组切换按钮中选择单项或多项。

查看
滚动到此处加载 8 个 JGuang UI 示例

状态反馈

状态、进度、加载与通知反馈。

8 个组件

提示 / Alert

向用户展示需要关注的重要消息和状态。

查看
滚动到此处加载 6 个 JGuang UI 示例

徽标 / Badge

用紧凑标签表达状态、类别或数量。

查看
滚动到此处加载 7 个 JGuang UI 示例

空状态 / Empty

在没有数据时提供说明和下一步操作。

查看
滚动到此处加载 7 个 JGuang UI 示例

标记 / Marker

通过紧凑的图形与文字表达即时状态。

查看
滚动到此处加载 8 个 JGuang UI 示例

进度条 / Progress

展示任务完成比例或不确定的处理状态。

查看
滚动到此处加载 4 个 JGuang UI 示例

骨架屏 / Skeleton

在内容加载时预览即将出现的结构。

查看
滚动到此处加载 7 个 JGuang UI 示例

轻提示 / Sonner

在页面边缘展示短暂的操作反馈通知。

查看
滚动到此处加载 4 个 JGuang UI 示例

加载指示器 / Spinner

表达等待或后台处理中的状态。

查看
滚动到此处加载 8 个 JGuang UI 示例

表单

输入、选择与字段组合控件。

13 个组件

复选框 / Checkbox

从多个独立选项中选择零项或多项。

查看
滚动到此处加载 8 个 JGuang UI 示例

组合框 / Combobox

结合文本输入、过滤与选项选择。

查看
滚动到此处加载 12 个 JGuang UI 示例

字段 / Field

组合标签、输入、说明和校验信息。

查看
滚动到此处加载 13 个 JGuang UI 示例

输入框 / Input

接收单行文本内容的基础输入控件。

查看
滚动到此处加载 15 个 JGuang UI 示例

输入框组 / Input Group

组合输入框、前后缀和相关操作。

查看
滚动到此处加载 14 个 JGuang UI 示例

验证码输入 / Input OTP

用于验证码与安全认证的一次性密码输入。

查看
滚动到此处加载 10 个 JGuang UI 示例

标签 / Label

为表单控件提供可访问的文本标签。

查看
滚动到此处加载 3 个 JGuang UI 示例

原生选择器 / Native Select

使用浏览器原生能力选择单个选项。

查看
滚动到此处加载 5 个 JGuang UI 示例

单选框组 / Radio Group

从一组互斥选项中选择一项。

查看
滚动到此处加载 7 个 JGuang UI 示例

选择器 / Select

从可折叠的选项列表中选择一项。

查看
滚动到此处加载 7 个 JGuang UI 示例

滑块 / Slider

在连续或离散范围内选择一个数值。

查看
滚动到此处加载 7 个 JGuang UI 示例

开关 / Switch

在开启与关闭两种状态之间切换。

查看
滚动到此处加载 7 个 JGuang UI 示例

多行输入框 / Textarea

接收较长的多行文本内容。

查看
滚动到此处加载 6 个 JGuang UI 示例

数据展示

结构化内容、媒体、消息与数据视图。

10 个组件

头像 / Avatar

展示用户头像，并在图片不可用时提供回退内容。

查看
滚动到此处加载 10 个 JGuang UI 示例

气泡 / Bubble

用于对话、注释和短消息的内容容器。

查看
滚动到此处加载 9 个 JGuang UI 示例

日历 / Calendar

支持单日期或日期范围选择的日历视图。

查看
滚动到此处加载 11 个 JGuang UI 示例

卡片 / Card

对相关内容、信息与操作进行分组。

查看
滚动到此处加载 6 个 JGuang UI 示例
滚动到此处加载 7 个 JGuang UI 示例

图表 / Chart

使用主题变量呈现可组合的数据可视化。

查看
滚动到此处加载 8 个 JGuang UI 示例

项目 / Item

用于列表、设置项和内容行的组合容器。

查看
滚动到此处加载 11 个 JGuang UI 示例

键盘按键 / Kbd

以键帽样式展示快捷键和组合键。

查看
滚动到此处加载 6 个 JGuang UI 示例

消息 / Message

展示对话内容、角色信息和消息操作。

查看
滚动到此处加载 6 个 JGuang UI 示例

表格 / Table

以行列结构呈现具有关系的数据。

查看
滚动到此处加载 4 个 JGuang UI 示例

浮层

对话框、弹出层、侧边面板与上下文浮层。

7 个组件

警告对话框 / Alert Dialog

要求用户确认关键操作的模态对话框。

查看
滚动到此处加载 7 个 JGuang UI 示例

对话框 / Dialog

在当前页面上方聚焦呈现内容和操作。

查看
滚动到此处加载 6 个 JGuang UI 示例

抽屉 / Drawer

从屏幕边缘滑入的补充内容面板。

查看
滚动到此处加载 7 个 JGuang UI 示例

悬停卡片 / Hover Card

悬停或聚焦时展示关联内容的预览。

查看
滚动到此处加载 4 个 JGuang UI 示例

弹出框 / Popover

由触发器打开的轻量上下文内容浮层。

查看
滚动到此处加载 5 个 JGuang UI 示例

侧边面板 / Sheet

从视口边缘展开的模态内容区域。

查看
滚动到此处加载 4 个 JGuang UI 示例

工具提示 / Tooltip

悬停或聚焦时显示简短的说明文字。

查看
滚动到此处加载 5 个 JGuang UI 示例

布局与工具

布局原语与辅助交互工具。

7 个组件

宽高比 / Aspect Ratio

按照指定比例稳定展示图片或媒体内容。

查看
滚动到此处加载 4 个 JGuang UI 示例

附件 / Attachment

展示文件、上传状态和附件操作。

查看
滚动到此处加载 6 个 JGuang UI 示例

文字方向 / Direction

为组件树提供从左到右或从右到左的方向。

查看
滚动到此处加载 1 个 JGuang UI 示例

消息滚动区 / Message Scroller

管理长对话中的滚动位置和跳转操作。

查看
滚动到此处加载 11 个 JGuang UI 示例

可调整面板 / Resizable

允许用户拖动分隔线调整相邻区域大小。

查看
滚动到此处加载 4 个 JGuang UI 示例

滚动区域 / Scroll Area

提供跨浏览器一致的自定义滚动容器。

查看
滚动到此处加载 3 个 JGuang UI 示例

分隔线 / Separator

在内容区块之间建立视觉分隔。

查看
滚动到此处加载 5 个 JGuang UI 示例