列表

谁不喜欢漂亮的清单呢?有时，使用一些更独特和定制的东西比一些开箱即用的东西更好< ul >或< ol >标记。当在我们的建筑商家族工作时，您将可以访问四个列表元素除了两种样式技术外，还有两种管理内容的独特方法。可用的元素有:

• 静态列表(基线)
• 静态列表(居中)
• 环管员列表(基线)
• 环形回路列表(居中)

如果你将静态列表(基线)元素拖到页面中，输出看起来像这样:

默认情况下，每个List元素将填充父容器的整个宽度。然而，由于每个列表元素都是”预制”(即从我们的标准元素库构建的元素)基于我们的行元素，你可以很容易地带来max-width如果你愿意，可以通过工作区控件:

此外，基于Row Element构建的每个List变体的另一个很好的特性是，您可以轻松地将单列List分解为多个列,像这样:

列表元素有很多需要深入研究的地方，所以让我们直接开始吧!

内容管理的变化

在四个可用的List element中，有两个变体处理如何创建每个List的内容。根据你的愿望和需要，你可能会发现你更喜欢用一种或另一种方法工作。这些内容管理变体被表示为:

• 静态列表 - - - - - -一份清单专门从文字实时预览中的元素。每一个人”列表项”是添加到大纲中的实际项目，可以逐个修改。
• 电影列表 - - - - - -通过利用我们的JSON Looper Provider Type精心制作的列表，它使用一个Looper Consumer”列表项”作为模型，然后用来样式剩下的虚拟化Looper的元素输出，允许从一个地方轻松更新内容和样式。

你可以看出静态列表除了电影列表在一些方面(当然，除了他们在库中的标签):

1. 默认情况下，静态列表都是用图标作为要点，而电影列表利用递增的文本数字作为要点。
2. 静态列表从每个图标的绿色开始，而电影列表用更饱和的粉色来标记他们的项目符号。
3. 最后,每个”列表项”在一个静态列表将是可单独检查的，因为它们是前面提到的文档中的文字元素，而电影列表一个可检查元素的典型循环器样式会被额外的灰色处理吗”虚拟化”基于第一个Element模型构建的元素:

风格的变化

在四个可用的List element中，有两个变体处理每个List内容的样式。根据你的愿望和需要，你可能会发现你更喜欢用这样或那样的方法工作。这些文体上的变化被记作:

• 基线 - - - - - -一个更”基于文本的”的方法图标或文本数字输出作为每个的项目符号”列表项”将与该项中的第一行文本垂直对齐。
• 为中心的 - - - - - -这种风格使用更多的a”平面设计领域”方法，其中图标或文本数字输出作为每个的项目符号”列表项”样式更广泛，使每一项都更有分量。此外，顾名思义，每个项目的项目/内容”列表项”将会以彼此垂直为中心。

到目前为止，在本文中您看到的所有截图都是截取的基线列表元素的变体。下面分别是居中静态列表和环形循环列表的两个例子:

---

元素结构

在分析我们为每个List Element所使用的整体结构时，您将发现两者的组成静态列表变体是相同的(只是样式不同”基线”而且”为中心的”)．下面是两个静态列表版本的元素结构截图:

同样，请注意这个列表是如何包含四个独立的”列表项”元素，每个元素都具有在第一个扩展示例中找到的相同标记。如前所述，请记住对任何单个元素的任何更改都必须对每个元素进行更改”列表项”如果这是你想要的结果，它们就会匹配。

类似地,两个电影列表变体特征相同的元素结构与不同的风格，以实现外观之间”基线”而且”为中心的”版本。下图是两种Looper List变体元素结构的截图:

注意，这里的主要区别是只有一个字面量”列表项”在大纲里。这是因为”列表项”在这个版本中，Looper Provider和Consumer都作为每个连续的模型虚拟化元素的实时预览。

你可以从这四种变化中看到的是，它们本质上都有相同的结构”列表项”在大纲里。每一个”列表项”是一个列在它的父行中，有它的内部Flexbox布局打开并设置为行可以包装这样里面的项目就能做出相应的反应。在这里面，我们有数字它的特点是图标或文本元素来为每个项输出动态计数内容元素包含main文本每一块。

包括图元素和内容元素”列表项”正在使用Div元素因此，它们的尺寸和flexbox控件可以用于响应式样式。默认情况下，Content Div有一个渐隐效果设置，但可以很容易地关闭或通过Effects模块如果需要。

编辑Looper列表

如果您希望使用此模式，Looper List有几点需要注意。以下两个动态内容字符串在初始元素模型中是这样使用的:

• {{dc:电影:指数}} - - - - - -这是动态内容字符串，为该模式的编号项目提供动力。每当添加新项目时，此字符串将动态输出列表中的下一个可用数字，从而无需手动更新这些项目。
• {{dc:电影:字段密钥= '文本'}} - - - - - -这引用了元素上Looper Provider中的JSON代码设置中的一个特定字段。的文本值引用特定的关键setup在JSON代码中，它当然可以被更新为您喜欢的任何东西。

每个的实际内容”列表项”可以在同一元素上通过定制control选项卡，点击JSON内容编辑器，将显示以下标记:

[{"text": "这是一个列表，目前由JSON Looper Provider提供。"}， {"text": "要调整它的内容，请找到“元素在大纲，并进入它的“Customize”控制。”}， {"text": "然后，找到“Looper Provider”点击“Edit”按钮的“Content”控制。”}， {"text": "在代码编辑器中，您可以根据需要编辑或向列表中添加新项。"}， {"text": "使用这样的Looper Provider的好处是可以将统一的样式应用到所有子类。" }, { "text" : "If you'd prefer to go manual or style each item differently, simply turn off the Looper Provider / Consumer and go for it!" } ]

这是一个对象的JSON数组，它可以包含您希望以后在元素中引用的任意数量的数据点。对于这个特殊的例子，我们只有一个项目文本类在元素中引用{{dc:电影:字段密钥= '文本'}}如前所述，动态内容字符串。如果你想编辑这些项，你所需要做的就是删除当前的字符串用你自己的文本更新它”列表项”将相应地更新。如果你愿意添加一个新项，你可以复制一个已经可用的项对象。{…})并将其添加到数组的末尾(例如:[…])．

有一点非常重要你必须确保每个对象之间用逗号隔开，但你的最后的对象必须不在后面加一个逗号，这样语法才有效。类似地，如果您希望添加更多项在每个对象稍后在元素中引用，每个新的关键/价值Pair必须用逗号分隔，但最后一项必须不在后面加逗号。

要记住的事情

• 每个都从盒子里拿出来电影列表设置为< ol >因为它默认是编号的，而每个静态列表设置为< ul >因为它不是有序的。如果你以任何方式改变设计或内容，这当然可以被编辑。
• 以我们上一点为基础，因为电影List在默认情况下是有序的并不意味着您不能使用此模式输出基于图标的列表。交替,静态如果需要，可以修改列表以使用Loopers。这些都只是你使用和获得灵感的起点。

演示

要查看列表元素变化的现场演示，请参见下面:

• 静态列表(基线)
• 静态列表(居中)
• 环管员列表(基线)
• 环形回路列表(居中)