组件
易于访问、现代且易于样式化的 UI 组件。
以下是库中所有可用组件的列表。
¥Here's a list of all the components available in the library.
AbsoluteCenter
用于使用绝对定位将元素相对于其父级尺寸水平和垂直居中。
折叠面板
用于显示和隐藏页面上的相关内容部分
操作栏
用于显示包含一组操作的底部操作栏
警报
用于传达影响系统、功能或页面的状态。
宽高比
用于嵌入响应式视频和地图等。
头像
用于显示用户头像或名称首字母
徽章
用于高亮项目的状态以便快速识别。
出血
用于将元素从其容器边界中分离出来。
块引用
用于引用外部来源的文本内容
盒子
Chakra UI 中最抽象的样式组件,所有其他 Chakra UI 组件都构建于其之上。
面包屑
用于显示页面在网站层级结构中的位置
按钮
用于触发操作或事件
卡片
用于显示与单个主题相关的内容。
居中
用于将其子元素置于自身中心。
复选框卡片
用于选择或取消选择卡片内显示的选项。
复选框
用于在表单中,当用户需要从多个选项中选择多个值时使用。
复选标记
用于显示选中、未选中或不确定状态的视觉指示器
仅限客户端
仅用于在客户端渲染内容。
剪贴板
用于将文本复制到剪贴板
关闭按钮
用于触发关闭功能
代码块
用于显示和高亮动态代码块
代码
用于显示内联代码。
可折叠
用于展开和折叠其他内容。
颜色选择器
用于从颜色区域或一组定义的色板中选择颜色
颜色样本
用于预览颜色
组合框
一个多功能输入组件,将文本输入与列表框相结合,允许用户过滤选项列表并选择单个或多个值。
容器
用于将内容宽度限制在当前断点,同时保持其流畅。
DataList
用于显示类似数据项列表。
对话框
用于显示对话框提示
下载触发器
用于触发文件下载。
抽屉
用于渲染从屏幕边缘滑入的内容。
可编辑
用于内联重命名某些文本。
Em
用于标记文本以进行强调。
空状态
用于指示资源何时为空或不可用。
环境提供者
用于在 iframe、Shadow DOM 或 Electron 中渲染组件。
字段
用于向表单字段添加标签、帮助文本和错误消息。
字段集
一组表单控件,可选择以通用名称分组。
文件上传
用于从设备中选择并上传文件。
弹性
用于管理弹性布局
浮动
用于将元素锚定到容器的边缘。
用于
用于循环遍历数组并为每个项目渲染一个组件。
格式字节
用于将字节格式化为人类可读的格式
格式数字
用于将数字格式化为特定的语言环境和选项
网格
用于管理网格布局
组
用于将元素分组并连接在一起
标题
用于渲染语义化的 HTML 标题元素。
高亮
用于高亮文本的子字符串。
悬停卡片
用于在鼠标悬停在元素上时显示内容
图标按钮
用于在按钮内渲染图标
图标
用于显示 SVG 图标
图片
用于显示图片。
输入框
用于在文本字段中获取用户输入。
Kbd
用于显示操作的组合键
链接叠加
用于将链接拉伸到容器上。
链接
用于提供可访问的导航
列表
用于显示项目列表
列表框
用于显示可供选择的选项列表。
语言环境提供程序
用于全局设置语言环境
标记
用于标记文本以进行强调。
菜单
用于创建可访问的下拉菜单
选择(原生)
用于从预定义选项中选择一个值。
数字输入
用于输入数字,并使用步进按钮增加或减少该值。
叠加管理器
用于以编程方式控制叠加层组件
分页
用于在一系列页面之间导航。
密码输入
用于收集密码。
PIN 码输入
用于捕获用户的 PIN 码或 OTP 码。
弹出窗口
用于在弹出窗口中显示详细信息
门户
用于渲染 DOM 层次结构之外的元素。
存在
用于在控制渲染行为的同时,为元素的进入和退出添加动画效果。
进度圈
用于以循环形式显示任务进度。
进度
用于显示任务的进度状态。
散文
用于设置远程 HTML 内容的样式
二维码
根据提供的数据生成二维码的组件。
单选按钮卡片
用于从列表中选择一个选项
单选按钮
用于从多个选项中选择一个选项
单选标记
用于显示单选按钮选中和未选中状态的视觉指示器
评分
用于以可视化格式显示评论和评分。
滚动区域
用于创建带有自定义样式滚动条的可滚动区域
分段控件
用于从一组线性选项中选择一个选项。
选择
用于从预定义选项中选择一个值。
分隔符
用于在视觉上分隔内容
展示
用于根据条件有条件地渲染部分视图。
SimpleGrid
SimpleGrid 提供友好的界面,可轻松创建响应式网格布局。
骨架
用于在内容加载时渲染占位符。
跳过导航
“跳过导航链接”允许键盘用户跳转到页面的主要内容。
滑块
用于允许用户从一系列值中进行选择。
旋转器
用于提供操作正在处理的视觉提示
堆叠
用于将其子元素布局在垂直或水平堆栈中。
状态
用于显示带有标题和值的统计信息。
状态
用于指示流程或状态的状态
步骤
用于指示多步骤流程的进度
开关
用于捕获二进制状态。
表格
用于以表格形式显示数据。
标签
用于在选项卡式界面中显示内容
标签
用于对内容进行分类或标记
文本
用于在界面内渲染文本和段落。
文本区域
用于输入多行文本。
主题
用于强制树状结构的一部分进入亮模式或夜间模式。
时间轴
用于按时间顺序显示事件列表
提示框
用于向用户显示临时消息
切换提示
看起来像工具提示,但功能类似于弹出窗口。
工具提示
用于在用户鼠标悬停在元素上时显示附加信息。
TreeView
用于以可扩展树状结构显示分层数据结构。
视觉隐藏
用于在视觉上隐藏内容,但保持屏幕阅读器可访问。
换行
用于在元素之间添加空格,如果空间不足则自动换行。