手风琴

的手风琴元素允许您在传统的“accordion”样式组件中输出多个内容组，可以展开或折叠以显示各种信息集。

元素分解

Accordion元素由许多子元素组成，这些子元素致力于实现所需的效果。这个标记的工作原理如下:

• 手风琴(.x-acc）
• 手风琴项目(.x-acc-item）
• 头(.x-acc-header）
• 内容(.x-collapsed——包含.x-acc-content）

我们可以从上面的代表性图表中看到，每个Accordion Element都由一个或多个元素组成(通常至少2个元素)手风琴的物品，每个手风琴项包含自己的标题和内容区域。Accordion Item的头作为切换，用户可以单击它来显示可折叠的内容区域。下面我们将介绍每个部分可用的各种控件，以及如何使用它们来实现特定的外观。

可用的控件

在本节中，我们将详细介绍每个控件组，并特别注意任何独特的控件或值得注意的东西。

手风琴

基本级别控制分组被标记手风琴，它为包含所有手风琴项的元素设置样式。这也是您将添加Accordion Items的地方，可以根据需要检查以调整内容。在这个控制组中，您将发现的第一件事是添加的物品控制箱:

在这里，您可以根据需要向Accordion添加任意数量的项，以及检查、复制和删除这些项。您可以通过双击每个项目上的标题来快速编辑每个Accordion项目的标题内容，或者您可以单击“检查”按钮(放大镜)，进入特定的项目:

在此屏幕中，您可以选择Accordion Item是否应该开始“打开”(内容区域展开)，并编辑标题和主要内容。

回到我们的基础水平手风琴控制分组，你将看到的下一个框被标记为，设置:

在这里，您可以执行许多在其他元素中看到的基本功能，例如设置基本字体大小、背景颜色和宽度/最大宽度值。

这里需要注意的一个控件是Enable Grouping Toggle，如果启用该控件，则一次只允许打开一个Accordion项，这在某些情况下是有帮助的。选择这个要打开的控件还会显示一个标记为Custom Group的文本输入。默认情况下，将此输入保留为空将只允许在该Accordion中一次打开一个Accordion项。如果您将相同的组名放入此输入多个手风琴但是，它只允许在所有分组的手风琴中打开一个手风琴项。

例如，如果您在整个页面中使用了3个不同的accordion，并且您只想在所有accordion中打开一个项，那么您可以为每个accordion设置一个自定义组名“group 1”，这将确保这种效果的发生。同样，这在某些情况下是有帮助的，但并不总是必要的。

在那之后，你会发现传统的控制，如边缘，填充，边界，阴影，等等。

项目

控件“Items”控件分组要注意的最重要的控件集是项目设置箱:

除了能够为所有Accordion项目(同样是包含“Header”和“Content”区域的容器)指定背景颜色之外，您还可以选择禁用包含元素的默认内容溢出。这有助于实现Accordion Item的某些风格方法，但请记住，这意味着在Accordion Item内的Header或Content区域上的框阴影将无法流出Accordion Item容器。

此外，还可以设置间距控件，该控件规定了每个Accordion项目之间垂直放置的间距。这里要记住的一件事是，如果你愿意，你也可以使用负边距，这可以帮助创建更紧密的“分组”感觉。例如，如果您在每个项目上都设置了外边框1 px，您可以尝试放置一个1 px每个项目的间距，有效地将它们直接放在另一个上面，并使它们具有链接的外观。

在那之后，你会发现传统的控制，如填充，边界，阴影等。

头

的设置“Header”控件组的方框中包含了一些值得注意的控件。您将注意到的第一个是一个带标签的toggle溢出：

如果该切换被启用，它将确保具有非常长的内容的header将使用文本溢出技术，该技术将使用省略号而不是自动换行来表示溢出文本，如下所示:

这只是一个偏好问题，因为你的设计可能会很好地将文本换行到另一行，你可以不这样做，或者你只是想确保你所有的标题在任何时候都保持相同的高度，即使你的网站大小相应减小。

接下来，我们有一个指示器控件，如果打开它，它将为Header中的每个Accordion项目显示一个可样式的状态指示器(如截图中的插入符号所示)。如果您选择逆转复选框，它会将该指示器放置在Accordion Item Header的远端。

如果您启用了指示器切换，您将看到的这个控件分组的下一个框将被标记标题指示器设置：

在这里，你将设置一些基本的样式，给你手风琴项目指示器你想要的样式。您可以选择使用“文本”或“图标”为您的指示器(在上面的截图中，我们使用的是“文本”与unicode插入字符为我们的设计)，以及为您的指示器指定基本大小。

接下来，如果需要，您可以指定高度和宽度，这可能非常有用，具体取决于您使用的设置类型。在那之后，你会看到开始＆结束旋转输入，在这里您将为项目的每个状态(例如打开和关闭)指定指示器的旋转程度。对于本例，我们的项目开始时没有旋转，但是当项目打开时，指示器会旋转90度，指向下方。这有助于略微丰富风格，并可以创造性地与指示符一起使用，如加号，可以旋转45度来表示“x”。最后，当Item打开和关闭时，我们有指示器的颜色。

在那之后，你会发现传统的控件，如边缘，填充，边框，阴影，文本，等等。

内容

内容控件分组非常简单，包括背景颜色以及所有传统的边距、填充、边框和阴影控件，您将习惯在所有元素中看到这些控件。

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)．点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")．这在与各种脚本和库集成时尤其有用。

演示

要查看Accordion元素的现场演示，请单击在这里．

总结

现在您已经了解了关于Accordion Element以及如何使用它的所有内容。这是一个很好的元素，用于组织数据分组，如常见问题、流程中的步骤或内容部分。