选项卡

选项卡设置

的目的标签元素是在传统的“选项卡”样式组件中输出多组内容，可以切换到一次显示一个面板。

元素分解

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

• 标签(.x-tabs）
• 标签列表(.x-tabs-list）
• 包含一个标准ul组成的李元素按钮子元素作为每个面板的切换项。
• 标签面板(.x-tabs-panels）
• 标签面板(.x-tabs-panel）

我们可以从上面的代表性图表中看到，每个Tabs元素都由一个或多个元素组成(通常至少2个)“标签”。一个完整的“标签”是由它的内容面板和相应的标签在.x-tabs-list元素，可以通过切换显示不同的面板。下面我们将介绍tab元素每个部分的各种控件，以及如何使用它们来实现特定的外观。

可用的控件

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

选项卡

基本级别控制分组被标记选项卡，它对包含所有子元素的元素进行样式化。这也是您将添加个人选项卡的地方，可以根据需要检查这些选项卡以调整内容。

在这个控制组中，您将发现的第一件事是添加的物品控制箱:

在这里，你可以添加任意多的项目到你的标签元素，以及检查，复制和删除标签，只要你想。您可以通过双击每个项目的标题来快速编辑每个选项卡的标签，或者您可以单击“检查”按钮(放大镜)，进入特定的项目:

在此屏幕中，您可以编辑出现在Element顶部的选项卡标签以及该选项卡的内容，这些内容将出现在下面的“面板”中。

回到我们的基础级别选项卡控件组，你将看到的下一个框被标记为，设置:

在这里，您可以执行许多在其他元素中看到的基本功能，例如设置基本字体大小、背景颜色和宽度/最大宽度值。在那之后，你会发现传统的控制，如边缘，填充，边界，阴影，等等。

保证金

使用此选项可设置选项卡的边距。您可以更改选项卡所有侧面的设置，也可以单独修改它们。

填充

使用此选项可设置选项卡的填充。您可以更改选项卡所有侧面的设置，也可以单独修改它们。

边境

使用此选项可设置选项卡的边框。您可以设置风格，宽度而且颜色边境线的所有边或每边的边境线。

边界半径

使用此选项可设置选项卡的边界半径。你可以在所有边都设置曲线，也可以单独设置。

盒阴影

您可以使用框阴影控制组在选项卡上设置阴影。

• x-使用此选项设置选项卡中阴影的X偏移量。
• y-使用此选项设置选项卡中阴影的Y偏移量。
• 模糊-使用此选项在选项卡中设置模糊效果的强度。
• 传播和定位-使用此选项设置项目部分阴影的扩散量，并决定您想要阴影位于标签的内部还是外部。
• 颜色-使用此选项设置标签阴影的颜色。

选项卡列表

的选项卡列表控件分组主要由传统的控件组成，如边距、填充、边框、阴影等。

个人标签

控件要注意的最重要的控件集个人标签控制分组是设置框:

除了能够指定所有选项卡的基本色和交互背景色，以及每个选项卡的最小和最大宽度之外，还有几个值得注意的控件是“填满空间"控制和"证明内容“控制。“填充空间”将总是强制制表符相等地填充所有可用空间。只有当选项卡的数量和它们的整体宽度小于容器的宽度时，才会在视觉上产生区别。例如，这里是一个标签元素的标准设置，没有打开这个控件:

下面是“填充空间”打开时标签的显示方式:

注意选项卡现在是如何均匀地填充所有可用空间的。如果“填充空间”被打开，那么“调整内容”控件将被隐藏，因为它将没有任何效果。关闭“填充空间”后，你可以调整“调整内容”控件来改变元素中标签的显示方式。上面的第一个图像显示了“开始“配置。这就是"中心“配置看起来像这样:

这就是"结束“配置看起来像这样:

这就是"之间的空间“配置看起来像这样:

这就是"周围的空间“配置看起来像这样:

这就是"空间均匀“配置看起来像这样:

请记住，只有当选项卡的整体尺寸小于容器的尺寸时，这些选项卡才会在视觉上显示为更改选项卡的布局。此外，标签列表的工作方式与现在许多大型网站(如谷歌和Medium)的惯例相似，甚至在现代流行的样板框架(如Bulma)中使用。选项卡列表容器具有overflow-x:汽车;样式，该样式仅在选项卡的数量及其尺寸大于其容器的尺寸时才显示滚动条。然后它们可以水平滚动，这也有效地允许“无限”数量的标签，因为这种模式在所有屏幕尺寸下都完全响应，无论你扔多少内容。

对于单个选项卡，最后一个重要的注意事项这是添加边距的时候吗margin-left的值。第一个选项卡或margin-right的值。最后的TAB将被设置为0 px !重要，这来自于主题中呈现的静态样式。这样，如果需要，您可以在选项卡之间放置间距，而不需要在选项卡列表容器的一侧或另一侧设置任何额外的间距。如果制表列表容器的两侧需要额外的间距，则可以使用两侧填充值来实现此目的。

面板

控件要注意的最重要的控件集面板控制分组是设置框:

在这里，您可以为每个单独的面板设置背景颜色，但您也可以配置一些额外的外观选项。默认情况下，平等的高度控件被设置为关闭(这也将隐藏下面的对齐控件)。如果打开，所有面板将被设置为与一组选项卡中最高面板相同的高度。如果启用，每个面板将使用设置显示:flex;与一个Flex-flow:列nowrap;布局，这样我们就可以引入垂直对齐“而且”水平对齐”控制。如果需要，可以使用这些选项卡以特殊的方式在选项卡中移动内容。例如，如果你想让内容较少的面板垂直居中，你可以从“垂直对齐”控件中选择“居中”，等等。请记住，“垂直对齐”控件似乎对最高的面板没有影响，因为所有其他面板高度都基于该面板。

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

定制

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

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

演示

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

总结

现在，您已经设置好以最有效的方式使用Tabs Element了。