组件
行动
-
账户连接
使用帐户连接组件，商家可以将其商店连接或断开与各种帐户的连接。例如，如果商家想使用Facebook销售渠道，他们需要将自己的Facebook账户连接到Shopify商店。
-
动作列表
操作列表呈现操作或可选选项的列表。该组件通常放置在弹出窗口容器中，以创建下拉菜单或让商家从选项列表中进行选择。
-
按钮
按钮主要用于操作，如“添加”、“关闭”、“取消”或“保存”。普通按钮，看起来类似于链接，用于不太重要或不太常用的操作，如“查看发货设置”。
-
按钮组
按钮组显示多个相关操作堆叠或在一个水平行中，以帮助排列和间隔。
-
降落区
拖放区域组件允许用户通过将文件拖放到页面上的区域或激活按钮来上传文件。
-
设置切换
用于让商家控制可以打开或关闭的功能或选项。
结构
-
α卡
α卡片用于将类似的概念和任务分组在一起，使商家更容易扫描、阅读和完成工作。
-
α堆栈
α用于将元素垂直放置在彼此的顶部。堆栈由灵活的项组成，这些项包裹着堆栈的每个子元素。选项允许不同的间距和对齐。
-
应用提供商
应用程序提供程序是一个必需的组件，可以在整个应用程序的层次结构中共享全局设置。
-
流血
α用于创建应用负边距以允许内容扩展到周围布局的容器。
-
盒子
αBox是最原始的布局组件。Box有一组填充选项。使用它来渲染单个项目。
-
Callout卡
宣传卡用于鼓励商家采取与新功能或机会相关的行动。它们最常显示在Shopify的销售渠道部分。
-
卡
卡片用于将类似的概念和任务分组在一起，使商家更容易扫描、阅读和完成工作。
-
列
α用于将垂直的组件行以相等的间距排列到多行上。
-
内容块
α用于创建居中并设置其中内容的最大宽度的容器。
-
空的状态
当列表、表格或图表中没有要显示的项或数据时，使用空状态。这是一个提供解释或指导以帮助商家进步的机会。空状态组件用于管理中的整个页面为空时，而不是用于界面中的单个元素或区域。
-
框架
框架组件虽然在用户界面中不可见，但它为应用程序提供了结构。它包装了主要元素，并包含了主要导航、顶部栏、吐司和上下文保存栏组件。
-
网格
α创建基于CSS网格的复杂布局。
-
内联
α用于以相等的间距将组件放置在多行上。选项提供了对行内项的换行、间距和相对大小的控制。
-
布局
布局组件用于在页面上创建主布局。布局部分有三种主要配置。单列、两列和带注释的。可以在同一页面中组合单列和双列布局。带注释的布局应该单独使用，并且只能在设置页面上使用。
-
媒体卡
媒体卡提供一致的布局，向商家展示视觉信息。视觉媒体被用来为它所搭配的书面信息提供额外的上下文。
-
页面
用于构建页面的外部包装器，包括页面标题和相关操作。
-
页面动作
页面操作允许商家在界面中特定页面的底部执行关键操作。这一点很重要，因为当商家位于页面底部时，有时很难访问主要的行动号召。
-
堆栈
用于布局水平排列的组件或实现无麻烦的垂直居中。堆栈由灵活的项组成，这些项包裹着堆栈的每个子元素。选项提供了对堆栈中项的换行、间距和相对大小的控制。
-
瓷砖
α创建基于CSS网格的复杂布局。
形式
-
自动完成
自动完成组件是一个输入字段，当商家输入时提供可选择的建议。它允许商家快速搜索并从大量选项中进行选择。它是“组合框”和“列表框”组件的方便包装器，具有微小的UI差异。
-
复选框
复选框最常用来为商家提供一种方法来进行一系列选择(0、1或多个)。它们也可能被用作让商家表明他们同意特定条款和服务的一种方式。
-
选择列表
选择列表允许您创建分组单选按钮或复选框的列表。如果需要将相关的交互选项列表组合在一起，请使用此组件。
-
颜色选择器
颜色选择器用于让商家直观地选择颜色。例如，商家使用颜色选择器为其商店自定义电子邮件模板的强调色。
-
组合框
Combobox是一个可访问的自动完成输入，允许商家过滤选项列表并选择一个或多个值。
-
上下文保存栏
一旦商家对页面上的表单进行了更改，上下文保存栏就会告诉商家他们的选项。在创建新对象(如产品或客户)时也会显示此组件。商家可以使用这个组件保存或丢弃他们的工作。
-
日期选择器
日期选择器让商家从可视化日历中选择日期，该日历始终适用于需要在Shopify上选择的任何日期。
-
形式
处理表单提交的包装器组件。
-
表格布局
使用表单布局使用标准间距排列表单内的字段。默认情况下，它垂直堆叠字段，但也支持水平组字段。
-
内联错误
内联错误是简短的上下文消息，告诉商家表单中的单个或一组输入出现了问题。使用内联错误帮助商家理解为什么表单输入可能无效，以及如何修复它。
-
单选按钮
使用单选按钮在商家必须做出单一选择的选项列表中显示每个项目。
-
滑块范围
范围滑块是一个输入字段，商家可以使用它在给定的范围内(最小值和最大值)选择一个数值。
-
选择
Select允许商家从选项菜单中选择一个选项。当您有4个或更多选项时，请考虑选择，以避免使界面混乱。
-
标签
标签表示一组交互的、商家提供的关键字，这些关键字有助于标记、组织和分类对象。商家可以在物品上添加或删除标签。
-
文本字段
文本字段是商家可以输入的输入字段。它有一系列选项，支持包括数字在内的多种文本格式。
图像和图标
反馈指标
-
横幅
通知商家有关重要更改或持续条件的信息。如果您需要以一种突出的方式与商家沟通，请使用此组件。横幅被放置在它们所应用的页面或部分的顶部，以及页面或部分标题的下方。
-
加载
加载组件用于向商家指示页面正在加载或正在处理上传。
-
进度条
进度条组件用于直观地表示任务或操作的完成情况。它显示了任务已经完成了多少，还有多少。
-
正文正文
主体骨架文本用于在内容出现在页面之前提供低保真度的内容表示，并改善商家感知的加载时间。可用于卡片内或卡片外的内容。
-
骨架显示文本
骨架显示文本用于在内容出现在页面之前提供低保真度的内容表示，并改善商家感知的加载时间。可用于卡片内或卡片外的内容。
-
框架页面
骨架页面与其他骨架加载组件一起使用，在内容出现在页面上之前提供用户界面(UI)的低保真表示。它提高了商家感知的加载时间。
-
骨架的标签
骨架标签用于在内容出现在页面之前提供低保真度的内容表示，并改善商家感知的加载时间。可用于卡片内或卡片外的内容。
-
骨架缩略图
骨架缩略图用于在图像出现在页面之前提供低保真度的图像表示，并改善商家感知的加载时间。用于卡片内或卡片外的缩略图。
-
微调控制项
旋转器用于通知商家他们的操作正在被处理。对于加载状态，旋转器应该只用于不能用骨架加载组件表示的内容，比如数据图表。
-
烤面包
toast组件是一个非中断消息，它出现在界面的底部，提供关于操作结果的快速、一目了然的反馈。
标题和文本
-
标题
标题文字尺寸小于一般阅读的推荐尺寸。在web上，它只能用于图表或列表项的时间戳。在Android和iOS上，它还可以用作帮助文本或列表项的其他类型的辅助文本。
-
显示文本
显示样式具有醒目的视觉效果。当主要目标是视觉叙事时，使用它们来创造影响力。例如，在营销内容中使用显示文本来说服或安抚商家，或在登录过程中吸引注意力。ob欧宝娱乐app下载地址
-
标题
标题用作界面中页面每个主要部分的标题。例如，卡片组件通常使用标题作为它们的标题。
-
副标题
子标题用于顶级页面部分中任何子部分的标题。
-
文本
α印刷术通过创建清晰的视觉模式来帮助建立层次结构和传达重要内容。
-
文本容器
文本容器用于包装文本元素，如段落、标题和列表，以给予它们垂直间距。
-
文本样式
文本样式增强了文本的额外视觉意义。例如，使用柔和的文本从周围的文本中去强调它。
-
视觉上隐藏
当一个元素需要辅助技术(例如，屏幕阅读器)可用，但在其他情况下隐藏时使用。
列表和表格
-
数据表
数据表用于组织和显示数据集中的所有信息。数据可视化只代表数据集的一部分，而数据表则允许商家查看整个数据集的详细信息。这有助于商家比较和分析数据。
-
描述表
描述列表是组织和解释相关信息的一种方式。当您需要在术语表中列出和定义术语时，它们特别有用。
-
例外列表
使用异常列表可以帮助商家注意到重要的、突出的信息，为任务添加额外的上下文。异常列表通常由标题和描述组成。列表中的每个项目在前面都有一个项目符号或图标。
-
过滤器
Filters是一个复合组件，用于过滤列表或表中的项。
-
索引表
索引表显示相同类型的对象集合，如订单或产品。索引表的主要工作是帮助商家对对象进行粗略的了解，以便执行操作或导航到对象的整个页面表示。
-
列表
列表显示一组相关的纯文本内容。每个列表项都以项目符号或数字开头。
-
列表框
Listbox是一个垂直的交互选项列表，有图标、描述和其他元素的空间。
-
选项列表
选项列表组件允许您创建一个分组商品列表，商家可以从中选择。这可以包括单项选择或多项选择。选项列表通常出现在一个弹出窗口，有时在一个模式或侧边栏。选项列表与选项列表的样式不同，不应在表单中使用，而应作为独立的菜单使用。
-
资源项目
资源项表示集合中的特定对象，例如产品或订单。它们提供关于资源类型的上下文信息，并链接到对象的详细信息页面。
-
资源列表
资源列表显示同一类型对象的集合，如产品或客户。资源列表的主要作用是帮助商家找到一个对象，并导航到该对象的整个页面。
导航
-
页脚的帮助
页脚帮助用于向商家介绍与他们正在使用的产品或功能相关的更多信息。
-
全屏酒吧
全屏栏是一个头部组件，当应用程序处于全屏模式时，它应该显示在应用程序的顶部。这是为了确保按钮在退出该模式时有一个统一的位置。全屏栏可以通过添加“children”来定制。
-
链接
链接将用户带到另一个地方，通常出现在句子中或直接出现在句子后面。
-
导航
导航组件用于在应用程序框架的侧栏中显示主导航。导航包括一个链接列表，商家使用这些链接在应用程序的各个部分之间移动。
-
分页
使用分页可以让商家浏览已被分割成页面的有序项目集合。在网页上，分页使用按钮在页面之间来回移动。在iOS和Android上，分页使用无限滚动。
-
选项卡
用于在相同上下文中的相关视图之间交替使用。
-
窗口的顶部
顶部栏是一个头部组件，允许商家通过点击logo进行搜索、访问菜单和导航。它总是在Shopify或Shopify Plus等界面的顶部可见。使用顶部栏的第三方应用程序可以使用应用程序提供者组件自定义颜色以匹配其品牌，并必须使用自己的徽标。