切换器

的 开关器字段 elementor熟悉的是/否切换放入自定义小部件中,在面板中轻弹一下,出现徽章,布局收紧,或者一整块标记关闭。在主插件内部 小部件生成器中,切换器是使小部件的任何部分可选的标准方式。

Switcher 是最常见的源字段 条件:它存储 yes on 时,所以其他控件可以根据它显示或隐藏,在前端,the Twig-语法模板引擎 让您将标记包装进去 {% if my_toggle %} 所以切换也控制输出。指南都涵盖了设置和限制。

它的值故意很简单:字符串类似 yes toggle 打开时,关闭时是一个空字符串。that 直接映射到模板条件式上。在实践中,几乎每个 Switcher 最终都包裹在一个 {% if %} 阻止或驱动其他控制装置的条件。

Switcher 字段的作用 #

• Renders Elementor 在小部件面板中的开/关切换,带有您自己的开/关标签。
• 返回可配置的字符串(默认) yes) 打开时,关闭时为空字符串。
• 驱动器 {% if %} 模板中的块,因此只有当切换打开时标记才会呈现。
• 例如,内联切换 CSS 类 class="card {% if compact_mode %}is-compact{% endif %}".
• 充当通常的司机 条件 在其他字段上,显示或隐藏整组控件。

构建你的第一个小部件?从开始 小部件生成器概述的,那就回到这里来吧。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder 编辑器中打开的自定义小部件,我们的示例是一个定价卡小部件,其中的切换器名为 show_badge 这揭示了卡片上的一条"流行"丝带。

如何添加切换器字段 #

拖动 切换器 从字段面板到下面的部分 内容 或 风格 tab。its的选项一落地就打开在左边。

切换器字段选项已解释 #

• 标签: elementor 中切换器旁边显示的文本,例如 “显示徽章”。
• 名称: your模板所指的唯一标识符。字母、数字、下划线仅,例如 show_badge.
• 标签打开/标签关闭: 切换本身的短文,默认情况下为"“是”"和"“诺”。
• 返回值: 字段在打开时保持的字符串, yes 默认情况下。当您的模板或脚本期望特定字符串时更改它。
• 默认: 将其设置为返回值以启动切换;将其留空即可开始。

请注意,默认值和返回值必须完全匹配才能开始切换。如果您将返回值更改为 enabled 但请将默认值保留为 yes、小部件随着切换关闭而掉入,并且没有错误告诉您原因。

将切换器与 {% if %} 块连接 #

Switcher是一个令牌字段,但是你很少自己打印它的令牌,off表示空字符串,而空字符串在模板逻辑中是falsy,所以自然模式在HTML面板中是一个条件:

{% if show_badge %}
<span class="pc-badge">Popular</span>
{% endif %}

Toggle on,徽章渲染。Toggle off,标记完全消失,后面没有空包装纸。相同的模式切换类,没有额外的标记:

<article class="pc-card {% if compact_mode %}is-compact{% endif %}">

Switcher 的另一项工作是驾驶 条件。widget中的任何字段都可以在切换器打开时设置为才会出现,因此切换“显示徽章”还可以显示面板中的徽章文本字段和徽章颜色控件。这会使面板保持短时间,直到该选项实际使用。

小心: 如果您明确比较该值,请与返回值字符串(而不是标签)进行比较。 {% if show_badge == 'yes' %} 与默认返回值匹配; {% if show_badge == 'Yes' %} never matching,因为“是”只是切换器的显示文本。赤裸裸的真实性, {% if show_badge %}的,回避问题。

在 Elementor 中使用切换器控件 #

Elementor 中将自定义小部件添加到页面(如果页面已经打开,则重新加载编辑器),切换器显示为标签下的标准 Elementor 切换。单击它并立即更新预览;任何以它为条件的字段同时在面板中出现或消失。

常见用例 #

• 可选徽章和丝带 在卡片上,用包裹着 {% if %} 块。
• 布局变体 与紧凑模式一样,用作修饰语类。
• 显示/隐藏部分 例如页脚注释、图标或辅助按钮。
• 脚本的功能切换JS面板读取值以启用自动播放或动画。
• 面板网格管理的,仅在功能开启时才显示一组相关控件。

Switcher 领域的工作技巧 #

• 测试真实性,而不是标签。 {% if show_badge %} 是大多数模板都需要的;开状态是非空字符串,关状态是空的。
• 包裹整个可选块。 把 {% if %} 在完整的标记周围,包含包装纸,因此关闭切换不会留下空元素来破坏间距。
• 故意默认。 对于大多数网站想要的功能,启动切换(默认值 = 返回值),对于附加功能,关闭。
• 将其与条件配对。 Switcher 加上两个或三个条件字段在面板中的读取效果比五个始终可见的控件要好得多。
• 将其命名为切换答案的问题。 show_badge 並 compact_mode 自然地读到里面 {% if %} 块。

常见问题 #

包裹起来 #

Widget Builder 切换器字段是最小的控制,覆盖范围最广:一个切换可以一次性通过 Conditions 添加标记、交换类和重塑面板。将其与 a 结合起来 数字字段 对于可调谐功能或 中继器场 它揭示了谁的可选额外内容。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。