选项卡

的 选项卡字段 将小部件的控件组织到面板选项卡中,与 Elementor 自己的小部件用于正常和悬停状态样式的结构相同。主插件内部 小部件生成器中,您定义选项卡,在每个选项卡中放置子控件,elementor 面板将它们呈现为紧凑的选项卡条,而不是一个长字段滚动。

选项卡控制支持 条件 就像每个字段一样,它的孩子都会被阅读 Twig-语法模板引擎 有三部分令牌, {{ tabs.tab_1.field }}、无需循环,两个指南都涵盖了细节和限制。

Tabs 是一个结构字段,它不持有自己的值;这些值属于孩子,你的模板通过一个嵌套路径读取每个,该路径命名 tabs 字段、tab 以及其中的字段,没有循环,没有技巧,只是地址。

Tabs 字段的作用 #

• 渲染标签条 widget的面板中,建立在元素者的控制选项卡机制之上。
• 握住一组选项卡(如),每个都有自己的名称、标签和儿童控制列表。
• 将相关状态保持在一起中,经典配对是相同设置的普通版和悬停版。
• 通过嵌套路径暴露子值 在您的模板中:选项卡字段的名称,然后是选项卡,然后是字段。
• 允许在选项卡上显示相同的子名称样,所以普通和悬停可以干净地相互镜像。

如果您刚刚开始使用构建器,请阅读 小部件生成器概述 在此之前。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget 生成器编辑器中打开的自定义小部件,我们的示例是一个带有 Tabs 字段的按钮小部件,名为 states 握住"正常"选项卡和"悬停"选项卡,每个选项卡都有一个指定的色域 bg.

如何添加选项卡字段 #

在 Widget Builder 编辑器中,滚动左侧的字段面板,直到找到 选项卡 字段,与其他结构字段(例如 Popover Toggle 和 Repeater)一起列出。

将其拖入下面的一个部分 风格 tab,状态样式居住的地方,然后定义选项卡,并将子控件放入每个。字段的选项在落地后立即在左侧打开。

选项卡字段选项已解释 #

• 标签: elementor 中选项卡条上方显示的标题。
• 名称: 例如,整个选项卡组、字母、数字和下划线的唯一标识符 states.是每个孩子模板路径的第一段。
• 选项卡: tabs的列表,每个tab都带有名称(用于模板路径,例如 normal)、标签(显示在条带上,例如“正常”)及其自己的一组儿童控制装置。
• 儿童控制: 每个选项卡内的字段。值字段类型在此处工作,并且每个字段都保留自己的选项和值形状。
• 描述、显示标签、分离器和条件是与其他地方相同的显示选项。

通过嵌套路径读取选项卡值 #

Tabs 字段的子项用三部分点路径寻址:tabs 字段的名称、tab 的名称,然后是子项的名称。

{{ tabsname.tabname.fieldname }}

Tabs 上没有循环,每个值都精确地读取到你需要的地方,对于按钮示例,a states 带有"正常"和"悬停"选项卡的选项卡字段,每个选项卡都包含一个 bg color字段, 线进入CSS面板中, 像这样:

.ma-btn {
  background: {{ states.normal.bg }};
}
.ma-btn:hover {
  background: {{ states.hover.bg }};
}

两个选项卡中给孩子起相同的名字是故意和支持的。在内部,构建者用计数器去掉重复的键,但模板路径保持每个选项卡,因此 bg 在正常和 bg hover 中保持两个不同的、干净寻址的值。镜像名称是目标模式:读取模板的人看到 Normal 和 Hover 规则仅相差一个路径段。

小心:扁平的标记 {{ bg }} 决心一无所有,两部分也是如此 {{ normal.bg }}。路径总是以Tabs字段自己的名字开始,当一个tab值打印为空时,先对段进行计数,重命名一个tab会以同样无声的方式破坏路径;CSS不断编译,值只是停止到达,所以在编写规则之前先确定tab名称。

使用 Elementor 中的选项卡控件 #

Elementor 中将自定义小部件添加到页面(或者如果页面已经打开,则重新加载编辑器)。选项卡条在面板中渲染您的选项卡标签,单击选项卡会显示其子控件。

编辑器在第一个选项卡上设置"正常"背景,切换到"悬停"并设置第二种颜色。在预览中悬停按钮会立即显示过渡,因为这两个值都已经位于小部件的 CSS 规则中。

常见用例 #

• 正常和悬停造型 对于按钮、卡片和链接,经典的配对。
• 活跃状态和非活跃状态 用于切换、过滤器和导航项目。
• 设置之前和之后 比较或显示小部件。
• 浅色和深色变体令编辑从一个部分调整两个方案。
• 奇偶行造型 在列表和表小部件中。

Tabs 字段工作的提示 #

• 使用完整的三部分路径的地址值。 {{ states.hover.bg }} 作品; {{ bg }} 並 {{ hover.bg }} 不。
• 跨选项卡镜像儿童姓名。 相同的字段、相同的名称、不同的路径段;模板保持可读性,选项卡保持可比性。
• 保持选项卡名称短小写。 它们是模板标识符,所以 normal 並 hover 击败“tab 1”和“Tab 2”。
• 使用状态选项卡、主题部分。 同一设置的两个变体属于选项卡;不相关的设置属于单独的部分。
• 请记住,每个孩子都保持其类型的价值形状。 选项卡内的滑块仍然读作 {{ states.normal.gap.size }}{{ states.normal.gap.unit }}.

常见问题 #

包裹起来 #

Widget 生成器选项卡字段将状态样式转换为整洁的面板模式: 定义 normal 並 hover 1次,镜像孩子的名字,你的CSS读取 {{ states.normal.bg }} 反对 {{ states.hover.bg }} 没有其他任何变化。对于重复内容而不是配对状态, 中继器场 是结构兄弟姐妹要达到。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。