添加你的项目

组件词汇表

网站上最常用的 UI 组件

手风琴

查看全部

手风琴是一个垂直堆叠的交互式项目列表。每个项目可以“折叠”,仅显示摘要,或者“展开”以显示该项目的完整内容。

117组件214故事

警告

查看全部

警告是一个简短的消息,以突出的方式提供上下文反馈。

56组件246故事

自动完成

查看全部

自动完成是一个文本输入框,可根据用户的初始输入主动建议选项。建议的选项与输入框一起显示在一个面板中。

31组件106故事

头像

查看全部

头像是用户或实体的图形表示。它通常是照片、插图或文本首字母。

79组件327故事

徽章

查看全部

徽章是一个紧凑的标签,显示在主要界面区域旁边,用于表示该区域的状态或元数据。

62组件279故事

横幅

查看全部

横幅是一个突出的消息,用于告知用户有关更改或为页面内容提供上下文。它通常显示为页面或部分上的第一项。

37组件136故事

面包屑

查看全部

面包屑是链接列表,显示当前页面在应用程序层次结构中的位置。它可以帮助用户了解他们相对于其他页面的位置,并提供便捷的链接以导航到其他页面。

42组件99故事

按钮

查看全部

按钮是一个可点击的交互式元素,可触发响应。您可以在按钮内部放置文本和图标。按钮通常用于表单提交和切换元素可见。

295组件1381故事

日历

查看全部

日历是一个日期选择界面,允许您使用日历视图选择日期或日期范围。它通常用于按日期过滤信息。

21组件156故事

卡片

查看全部

卡片是一个内容容器,表示单个对象和相关操作。例如,一篇文章或任务。

140组件618故事

轮播图

查看全部

轮播图是一个幻灯片,可循环显示图像或文本等内容。轮播图可能包含对上一个和下一个控件的支持。

25组件51故事

图表

查看全部

图表是数据的图形表示。图表可视化大量信息,以帮助用户了解数据点之间的趋势和关系。

24组件122故事

聊天

查看全部

聊天是系统用户之间聊天记录的显示。它包括许多子组件,用于组成不同类型的聊天项目。

10组件11故事

复选框

查看全部

复选框是一个方形框,可以在选中时激活或停用。使用复选框从选项列表中选择一个或多个选项。

98组件457故事

标签

查看全部

标签是一个紧凑的标签,显示在主要界面区域旁边,用于表示该区域的状态或元数据。

22组件106故事

代码

查看全部

代码用于显示字符串或小代码块。代码可以复制并插入到代码编辑器中。

70组件238故事

折叠

查看全部

折叠是一个垂直堆叠的交互式项目列表。每个项目可以“折叠”,仅显示摘要,或者“展开”以显示该项目的完整内容。

22组件74故事

颜色选择器

查看全部

颜色选择器是一个输入框,允许用户从预定义的颜色(色板)或颜色字段中进行选择。选择后,它将以 RGB、HEX 或 HSL 格式返回颜色值。

13组件44故事

组合框

查看全部

组合框是一个自动完成输入框,可根据用户的初始输入主动建议选项。它允许您过滤选项列表并从预定义选项中进行选择。选项与输入框一起显示在一个面板中。

18组件118故事

上下文菜单

查看全部

上下文菜单是一个菜单,提供一组与用户单击内容的当前状态相关的操作。上下文菜单通常出现在右键(默认)或左键单击时。

10组件58故事

数据网格

查看全部

数据网格是一个表格,可视化数据集,并包含用于过滤、排序、模板、行选择、行分组、行固定和可移动列的选项。数据网格通常与动态或大型数据集一起使用。

2组件5故事

日期选择器

查看全部

日期选择器是一个日期选择界面,允许您使用日历视图选择日期或日期范围。它通常用于按日期过滤信息。

21组件87故事

详情

查看全部

详情是一个可展开的面板,显示内容摘要,并在单击时展开以显示更多帮助文本。它通常用于使密集内容更易于浏览。

10组件25故事

对话框

查看全部

对话框是一个提示,出现在包含紧急信息或决策的其他内容之上。对话框有意中断用户流程,并需要用户输入才能关闭。

65组件283故事

披露

查看全部

披露是一个可展开的面板,显示内容摘要,并在单击时展开以显示更多帮助文本。它通常用于使密集内容更易于浏览。

4组件12故事

分割线

查看全部

分割线是内容部分或项目组之间的分隔符。它通常包含一条水平线。

37组件116故事

抽屉

查看全部

抽屉是从屏幕边缘滑出的面板。它通常用于导航、菜单或显示用户当前页面的详细信息。

26组件83故事

可展开

查看全部

可展开组件是一个垂直堆叠的交互式项目列表。每个项目可以“折叠”,仅显示摘要,或“展开”以显示该项目的完整内容。

15组件53故事

Flex 布局

查看全部

Flex 布局是一个布局容器,它使用 Flexbox 来定位其子元素。

17组件46故事

页脚

查看全部

页脚是页面底部的区域,用于显示相关内容的链接、版权或法律信息。

48组件139故事

表单

查看全部

表单用于收集用户输入,以便提交到应用程序。它通常由表单元素组成,包括输入框、按钮、复选框和单选按钮。

55组件127故事

栅格

查看全部

栅格是一个容器,用于构建与用户定义的列和行系统对齐的布局。

37组件163故事

页眉

查看全部

页眉是页面顶部的区域,用于显示网站名称和导航。

75组件209故事

标题

查看全部

标题是在 Web 应用程序或网站中显示的标题或副标题。标题的大小通常根据其代表内容的重要性而变化。

41组件108故事

Hero 区域

查看全部

Hero 区域是一个大型横幅或图像,通常作为页面上的第一个项目出现。它是一个主要的视觉元素,用于将用户注意力集中在关键内容或促销活动上。

46组件136故事

图标

查看全部

图标是一种视觉符号,指示界面元素的用途。它用于表示想法、内容类型和操作。

301组件1091故事

图像

查看全部

图像是用于嵌入图像的元素。它通常用于根据设备功能和视口大小以不同大小和格式显示图像。

65组件183故事

输入框

查看全部

输入框是一个表单元素,用于接受单行文本。

178组件872故事

标签

查看全部

标签是文本标题或描述,用于描述表单字段所需的输入类型。标签通常位于表单字段旁边。

56组件178故事

布局

查看全部

布局是一个布局容器,用于在预定区域中定位子元素。它通常用于在应用程序的页面之间为内容应用一致的定位。

50组件175故事

链接

查看全部

链接是对 Web 上某个位置的引用。单击链接会将您定向到文档、资产或电子邮件地址等目标。

110组件373故事

列表

查看全部

列表是相关项目的分组。列表可以是有序的(带数字)或无序的(带项目符号)。

184组件705故事

列表框

查看全部

列表框是一个垂直列表,其中包含用户可以从中选择的交互式元素。

19组件78故事

加载中

查看全部

加载中是一个视觉指示器,显示后台正在进行的进程的状态。它通常用于告知用户在界面准备好进行交互之前必须等待。

39组件91故事

菜单

查看全部

菜单是用户可以选择的交互式选项列表。选项默认情况下是隐藏的,并在用户与元素交互时显示。菜单通常用于显示操作或导航。它与 Select 不同,因为它不是表单输入。

64组件281故事

模态框

查看全部

模态框是一个全屏覆盖层,位于页面内容之上。它用于将注意力集中在重要的任务或消息上,并且需要用户输入才能关闭。

83组件344故事

导航

查看全部

导航是一个容器,用于列出导航链接。它通常用于引导用户访问应用程序中的其他页面,或作为当前页面的目录。

62组件196故事

通知

查看全部

通知是告知用户系统状态更新或更改的消息。它可以显示在内容上方或内容内。

30组件98故事

页面

查看全部

页面是一个布局容器,用于在预定区域中定位子元素。它通常用于在应用程序的页面之间为内容应用一致的定位。

134组件439故事

分页

查看全部

分页是最终用户在已分成多个页面的数据(如列表或文档)之间导航的控件。

49组件152故事

胶囊

查看全部

胶囊是一个紧凑的标签,显示在主要界面区域旁边,用于表示该区域的状态或元数据。

28组件172故事

弹出框

查看全部

弹出框是一个消息框,用于显示有关元素的额外信息。它可以出现在悬停、单击或点击时。

49组件257故事

进度条

查看全部

进度条是一个视觉指示器,显示用户完成一系列步骤的进度。它通常用于使用户专注于完成任务。

84组件324故事

Radio

查看全部

Radio 是一种圆形元素,可以在勾选时激活或停用。它用于从选项列表中选择单个选项。

107组件379故事

Rating

查看全部

Rating 是一个允许用户提交和查看反馈的小部件。这是一种直观地可视化围绕产品或项目的情感的直接方法。

13组件55故事

Search

查看全部

Search 是一种输入,允许用户通过输入单词或短语来查找内容。

70组件205故事

Select

查看全部

Select 是一种输入类型,允许用户从选项列表中选择一个或多个选项。默认情况下,这些选项是隐藏的,并在用户与元素交互时显示。它在其默认折叠状态下显示当前选定的选项。

113组件585故事

Separator

查看全部

Separator 是内容部分或项目组之间的分隔符。它通常包含一条水平线。

27组件89故事

Slider

查看全部

Slider 是一种表单元素,用于从某个值范围内选择一个值。它通常用于通过沿水平轨道移动滑块手柄来调整设置。

37组件162故事

Spinner

查看全部

Spinner 是一种视觉指示器,用于显示后台正在进行的进程的状态。它通常用于告知用户必须等待界面准备好进行交互。

38组件110故事

Stack

查看全部

Stack 是一种布局容器,用于在其子元素之间应用一致的间距。

31组件132故事

Switch

查看全部

Switch 是一种用于打开或关闭设置的控件。

36组件122故事

Table

查看全部

Table 是一种以行和列形式可视化数据集的元素。它通常用于以易于扫描的方式嵌入结构化数据。

104组件465故事

Tabs

查看全部

Tabs 是一种在多个信息视图之间导航的方式。它用于在较小的区域中容纳更多信息。

62组件199故事

Tag

查看全部

Tag 是一个紧凑的标签,显示在主要界面区域旁边,用于表示该区域的状态或元数据。

127组件426故事

Text

查看全部

Text 是一种样式组件,它以一致的字体大小和粗细呈现字符串、单词或段落。

102组件369故事

Textarea

查看全部

Textarea 是一种接受多行文本的表单元素。

136组件593故事

Text field

查看全部

Text field 是一种表单元素,它接受单行文本或多行文本。

122组件549故事

Title

查看全部

Title 是描述页面或部分内容的文本。它的大小通常会根据它所代表的内容的重要性而异。

27组件88故事

Toast

查看全部

Toast 是一种简短的消息,用于通知用户系统状态的更新或更改。它显示在内容上方。

36组件132故事

Toggle

查看全部

Toggle 是一种用于打开或关闭设置的控件。

55组件171故事

Tooltip

查看全部

Tooltip 是一个消息框,用于显示有关元素的额外信息。它可以悬停、单击或点击时出现。

72组件248故事

Typography

查看全部

Typography 是一个字体大小和粗细的系统,用于组织内容。

38组件179故事