组件构建器概述
在本文中,我们将讨论基石的组件生成器,以及如何使用它在您的网站上打开令人难以置信的设计可能性。
你可以把组件看作是元素预设加上全局块…类固醇。与全局块的功能类似,组件也是如此生活您的设计模式的版本,将在您的网站上实时更新,如果您将来需要对它们进行更新。Components的两个主要功能是提供集中存储库在所有易于维护和更改的设计模式中抽象出复杂性这样就可以简化页面构建过程。
例如,假设您有一个按钮样式,希望在整个站点中使用,并计划在100多个地方使用它。如果你第一次将按钮样式创建为组件,然后决定进行更改每一个按钮从红色变成蓝色,你可以去更新核心组件,你的按钮的所有100多个实例都会立刻更新它们的颜色!
话虽如此,与全局块相比,组件的功能有一些显著的差异和改进:
- 而全局块总是包装在部分元素,组件不必须如此。
- 组件在”集,”可以的文档导出一个或多个内部的各个组件。这是有益的,因为它允许您根据需要从一个位置管理多个组件。例如,您可能希望创建一个”按钮”设置,其中包含站点上出现的所有按钮样式。从这个文档中,您可以根据需要管理和导出数十种不同的样式,而不必在进入Component Builder时对大量单独的条目进行排序。
- 您的组件导出将显示出来直接在元素库中,有效地允许您创建自定义元素。
你的第一个组件集
让'让我们运行上面提到的例子,并假设我们想构建一个名为”按钮,”我们计划在哪里管理我们所有的站点'S按钮样式。要开始,请转到组件构建器在主导航菜单上单击+在右上角显示创建屏幕。给组件集一个标签,然后单击创建组件集:

为了这个例子,让'S说我们的设计只需要两种按钮样式,a主要按钮和一个二次按钮。在这种情况下,我们的组件集可能看起来像下面这样:

按钮周围的Section、Row和Column标记仅用于结构目的,为我们提供了某种画布,以干净的方式组织元素。这些标记都不会与组件一起输出,因为它没有输出标记用于出口。
要将此接口中的任何标记集导出为组件,请打开元素管理器并找到出口组件控制并启用它:

完成此操作后,您将看到一个新的状态项组件出口出现在该元素上,允许您跟踪任何单独的导出'i’我在一个集合里做了。如前所述,您可以导出多个组件和任何导出的组件将直接显示在元素库中,以供以后使用。在本例中,我们导出了两个按钮样式,它们将在元素库中显示,如下所示:

在其他构建器中使用组件或标准元素的主要区别在于您使用的是什么'我将在检查面板中看到。而标准元素将充满控件,允许您进行调整,组件将保持所有的信息隐藏在组件级别,保持页面的整洁'我们正在进行:

高级组件使用
除了基本组件导出之外,还有一些特性对构建中的某些情况非常有帮助。第一个是启用一个元素在导出作为槽。您可以将Slot看作应用于组件特定区域的一致下拉区。
例如,假设您想构建一个名为”画网格,”它总是在一边放着一张大图,另一边放着一些内容。这里的问题是你需要能够不同的此组件中的内容取决于您在哪里'重新使用它。你可以启用任意布局元素(即Div, Cell或Column)在组件内部作为插槽接收变量内容时,你在前端使用它。

当您稍后在页面或布局构建器中使用此组件时,您标记为Slot的元素将显示为组件内部的下拉区,并根据您在组件构建器中调用它的内容匹配标签(在这种情况下,”内容”).类似于导出,组件可以包含多个插槽,这意味着您可以在任何模式中为您需要的内容制作尽可能多的独特dropzone'重新工作。
除此之外,在某些情况下,你可能还会发现一些有用的选择:
- 允许定制:使”定制”在其他构建器中使用组件时可访问的控件。
- 使私人:私有组件只能在组件构建器中使用。这有助于创建模式来组织具有多个导出的set,制作内部文档等等。
虽然前面提到的Slot模式适用于大型可变内容块,但它并不适用'在做这些例子的时候,你可能已经想到了下面的一些场景:
- ”如果我想根据具体情况为按钮选择自定义颜色怎么办?”
- ”如何更改文本标签或
href
值为我的按钮的每个实例?” - ”有没有办法改变图片和背景颜色”画网格”需要的模式?”
所有这些问题的答案都在于元件参数.
全球区块迁移
正如您可能从本文中了解到的,组件构建器通过在功能和灵活性方面的显著改进,有效地接管了Global Blocks Builder曾经扮演的角色。幸运的是,对于任何旧的Global block都有一个无缝迁移路径,这将使它们像在您的站点上一样工作,并允许您随着时间的推移升级到”新”你想怎么做就怎么做。
之前箴6.0,X 10.0,而且7.0基石,全局块是通过在主应用导航中进入全局块构建器来管理的。让'让我们来看一个场景,我们有一个站点有两个全局块,其中一个带标签”我的按钮”另一个标签是”我的行动呼吁部分:”

在设计中利用这些资产是通过使用”全球块”元素来拉他们通过:

在页面上,要输出的资产由Element中的下拉菜单所做的选择决定'S唯一控制:


升级到箴6.0,X 10.0,或7.0基石,以前在旧站点上设置的任何全局块都将在新的站点下找到组件主文档导航部分:

而组件构建器是基于的原则构建的出口(如本文前面所讨论的),这在消除多余标记方面提供了更大的灵活性,您仍然可以引用整个组件集,使用”组件”元素,它的功能相当于旧元素”全球块”元素:

的任何实例”全球块”元素将自动转换为新的”组件”元素:


记住”组件”元素会通过所有在组件集中找到的标记。正因为如此,我们强烈建议您只在向后兼容时使用它。任何新的开发都应该利用组件的导出特性来构建。
看到不准确的东西了吗?让我们知道