手风琴是一个垂直堆叠的交互式项目列表。每个项目可以“折叠”,仅显示摘要,或者“展开”以显示该项目的完整内容。
警告是一个简短的消息,以突出的方式提供上下文反馈。
自动完成是一个文本输入框,可根据用户的初始输入主动建议选项。建议的选项与输入框一起显示在一个面板中。
头像是用户或实体的图形表示。它通常是照片、插图或文本首字母。
徽章是一个紧凑的标签,显示在主要界面区域旁边,用于表示该区域的状态或元数据。
横幅是一个突出的消息,用于告知用户有关更改或为页面内容提供上下文。它通常显示为页面或部分上的第一项。
面包屑是链接列表,显示当前页面在应用程序层次结构中的位置。它可以帮助用户了解他们相对于其他页面的位置,并提供便捷的链接以导航到其他页面。
按钮是一个可点击的交互式元素,可触发响应。您可以在按钮内部放置文本和图标。按钮通常用于表单提交和切换元素可见。
日历是一个日期选择界面,允许您使用日历视图选择日期或日期范围。它通常用于按日期过滤信息。
卡片是一个内容容器,表示单个对象和相关操作。例如,一篇文章或任务。
轮播图是一个幻灯片,可循环显示图像或文本等内容。轮播图可能包含对上一个和下一个控件的支持。
图表是数据的图形表示。图表可视化大量信息,以帮助用户了解数据点之间的趋势和关系。
聊天是系统用户之间聊天记录的显示。它包括许多子组件,用于组成不同类型的聊天项目。
复选框是一个方形框,可以在选中时激活或停用。使用复选框从选项列表中选择一个或多个选项。
标签是一个紧凑的标签,显示在主要界面区域旁边,用于表示该区域的状态或元数据。
代码用于显示字符串或小代码块。代码可以复制并插入到代码编辑器中。
折叠是一个垂直堆叠的交互式项目列表。每个项目可以“折叠”,仅显示摘要,或者“展开”以显示该项目的完整内容。
颜色选择器是一个输入框,允许用户从预定义的颜色(色板)或颜色字段中进行选择。选择后,它将以 RGB、HEX 或 HSL 格式返回颜色值。
组合框是一个自动完成输入框,可根据用户的初始输入主动建议选项。它允许您过滤选项列表并从预定义选项中进行选择。选项与输入框一起显示在一个面板中。
上下文菜单是一个菜单,提供一组与用户单击内容的当前状态相关的操作。上下文菜单通常出现在右键(默认)或左键单击时。
数据网格是一个表格,可视化数据集,并包含用于过滤、排序、模板、行选择、行分组、行固定和可移动列的选项。数据网格通常与动态或大型数据集一起使用。
日期选择器是一个日期选择界面,允许您使用日历视图选择日期或日期范围。它通常用于按日期过滤信息。
详情是一个可展开的面板,显示内容摘要,并在单击时展开以显示更多帮助文本。它通常用于使密集内容更易于浏览。
对话框是一个提示,出现在包含紧急信息或决策的其他内容之上。对话框有意中断用户流程,并需要用户输入才能关闭。
披露是一个可展开的面板,显示内容摘要,并在单击时展开以显示更多帮助文本。它通常用于使密集内容更易于浏览。
分割线是内容部分或项目组之间的分隔符。它通常包含一条水平线。
抽屉是从屏幕边缘滑出的面板。它通常用于导航、菜单或显示用户当前页面的详细信息。
可展开组件是一个垂直堆叠的交互式项目列表。每个项目可以“折叠”,仅显示摘要,或“展开”以显示该项目的完整内容。
Flex 布局是一个布局容器,它使用 Flexbox 来定位其子元素。
页脚是页面底部的区域,用于显示相关内容的链接、版权或法律信息。
表单用于收集用户输入,以便提交到应用程序。它通常由表单元素组成,包括输入框、按钮、复选框和单选按钮。
栅格是一个容器,用于构建与用户定义的列和行系统对齐的布局。
标题是在 Web 应用程序或网站中显示的标题或副标题。标题的大小通常根据其代表内容的重要性而变化。
Hero 区域是一个大型横幅或图像,通常作为页面上的第一个项目出现。它是一个主要的视觉元素,用于将用户注意力集中在关键内容或促销活动上。
图标是一种视觉符号,指示界面元素的用途。它用于表示想法、内容类型和操作。
图像是用于嵌入图像的元素。它通常用于根据设备功能和视口大小以不同大小和格式显示图像。
标签是文本标题或描述,用于描述表单字段所需的输入类型。标签通常位于表单字段旁边。
布局是一个布局容器,用于在预定区域中定位子元素。它通常用于在应用程序的页面之间为内容应用一致的定位。
链接是对 Web 上某个位置的引用。单击链接会将您定向到文档、资产或电子邮件地址等目标。
列表是相关项目的分组。列表可以是有序的(带数字)或无序的(带项目符号)。
列表框是一个垂直列表,其中包含用户可以从中选择的交互式元素。
加载中是一个视觉指示器,显示后台正在进行的进程的状态。它通常用于告知用户在界面准备好进行交互之前必须等待。
菜单是用户可以选择的交互式选项列表。选项默认情况下是隐藏的,并在用户与元素交互时显示。菜单通常用于显示操作或导航。它与 Select 不同,因为它不是表单输入。
模态框是一个全屏覆盖层,位于页面内容之上。它用于将注意力集中在重要的任务或消息上,并且需要用户输入才能关闭。
导航是一个容器,用于列出导航链接。它通常用于引导用户访问应用程序中的其他页面,或作为当前页面的目录。
通知是告知用户系统状态更新或更改的消息。它可以显示在内容上方或内容内。
页面是一个布局容器,用于在预定区域中定位子元素。它通常用于在应用程序的页面之间为内容应用一致的定位。
分页是最终用户在已分成多个页面的数据(如列表或文档)之间导航的控件。
胶囊是一个紧凑的标签,显示在主要界面区域旁边,用于表示该区域的状态或元数据。
弹出框是一个消息框,用于显示有关元素的额外信息。它可以出现在悬停、单击或点击时。
进度条是一个视觉指示器,显示用户完成一系列步骤的进度。它通常用于使用户专注于完成任务。
Radio 是一种圆形元素,可以在勾选时激活或停用。它用于从选项列表中选择单个选项。
Rating 是一个允许用户提交和查看反馈的小部件。这是一种直观地可视化围绕产品或项目的情感的直接方法。
Search 是一种输入,允许用户通过输入单词或短语来查找内容。
Select 是一种输入类型,允许用户从选项列表中选择一个或多个选项。默认情况下,这些选项是隐藏的,并在用户与元素交互时显示。它在其默认折叠状态下显示当前选定的选项。
Separator 是内容部分或项目组之间的分隔符。它通常包含一条水平线。
Slider 是一种表单元素,用于从某个值范围内选择一个值。它通常用于通过沿水平轨道移动滑块手柄来调整设置。
Spinner 是一种视觉指示器,用于显示后台正在进行的进程的状态。它通常用于告知用户必须等待界面准备好进行交互。
Stack 是一种布局容器,用于在其子元素之间应用一致的间距。
Table 是一种以行和列形式可视化数据集的元素。它通常用于以易于扫描的方式嵌入结构化数据。
Tabs 是一种在多个信息视图之间导航的方式。它用于在较小的区域中容纳更多信息。
Tag 是一个紧凑的标签,显示在主要界面区域旁边,用于表示该区域的状态或元数据。
Text 是一种样式组件,它以一致的字体大小和粗细呈现字符串、单词或段落。
Text field 是一种表单元素,它接受单行文本或多行文本。
Title 是描述页面或部分内容的文本。它的大小通常会根据它所代表的内容的重要性而异。
Toast 是一种简短的消息,用于通知用户系统状态的更新或更改。它显示在内容上方。
Tooltip 是一个消息框,用于显示有关元素的额外信息。它可以悬停、单击或点击时出现。
Typography 是一个字体大小和粗细的系统,用于组织内容。