的 选择2字段 是普通的select的更大的兄弟姐妹:一个下拉,你可以输入,有一个可选的多模式,让用户一次选择几个选项在主插件内 小部件生成器、它涵盖了原生下拉处理不当的情况需要搜索的长选项列表标签式选择一个答案不够。
与常规选择一样,选择 2 选项值直接插入 条件 用于显示或隐藏其他控件,并进入 Twig-语法模板引擎 为 {% if %} 检查您的标记。指南都涵盖设置和限制。
单选模式的行为与 选择字段:你的模板收到一个密钥,flip on Multiple,值就变成了密钥数组,这改变了你的模板必须读取它的方式,那个开关就是这个 doc 的核心。
Select2 字段的作用 #
- 呈现可搜索的下拉 elementor面板中; 用户类型来过滤选项列表。
- 握住一把钥匙 从您在单模式下定义的选项中,与普通选择相同的合约。
- 握着一系列钥匙 "多重"选项打开时, 在控件中显示为可移动标签。
- 通过令牌或循环馈送模板的,取决于那个模式。
- 使用密钥和标签对 您定义,因此模板始终适用于稳定的蛞蝓。
如果您是构建小部件的新手,请从以下内容开始 小部件生成器概述 首先。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- Widget Builder 编辑器中打开的自定义小部件。我们的示例是一个投资组合卡小部件,编辑器在每个实例上标记一个或多个类别:品牌、Web、打印、运动。
如何添加 Select2 字段 #
找 选择2 widget 生成器编辑器左侧的字段面板中。它与其他选择字段一起。
将其拖入下面的一个部分 内容 tab。一旦它落地,字段的选项就会在左侧打开,第一个决定就是这个控件选择的是一个值还是多个。在你触摸模板之前先解决那个,因为这两种模式想要不同的标记。
Select2 字段选项进行了解释 #
- 标签: elementor 中控件旁边显示的文本,例如 “类别”。
- 名称: 例如,字段、字母、数字和下划线的唯一标识符
selected_tags. - 选项: key 和标签对的选择。key 是你模板看到的 slug(调)
branding,web);标签是下拉中的单词。 - 多个: mode switch。off,用户选择一个选项。on,控件接受几个选择,值变成一个键的数组。
- 默认: 当小部件首次掉落到页面上时选择的一个或多个键。
- 描述、显示标签、分离器: 标准显示设置,以及仅在另一个控件具有一定值时显示字段的条件。
将 Select2 连接到您的模板 #
Single 模式下, 完全像 Select 一样对待它, 令牌打印所选键, 因此修改器类和比较工作如常:
<article class="portfolio-card cat--{{ selected_tags }}">
{% if selected_tags == 'motion' %} <span class="badge">Video</span> {% endif %}在多模式下,值为 a 密钥数组并且是平原 {{ selected_tags }} prints 没有什么好用的, 模板必须循环:
<div class="card-tags">
{% for tag in selected_tags %}
<span class="tag tag--{{ tag }}">{{ tag }}</span>
{% endfor %}
</div>selected_tags是字段的名称。tag是你发明的循环变量;称之为任何东西。- 之间的块
{% for %}並{% endfor %}按选取的键打印一次,按选取的顺序。
注意模式不匹配。使用裸通证编写的模板在启用 Multiple 后会保留 “工作”;它只是渲染一个空点,没有错误,控制台上没有任何内容。如果 Select2 值似乎消失,请检查 Multiple 是否打开并且模板仍然期望单个键。这种不匹配往往是原因。
在 Elementor 中使用 Select2 控件 #
Elementor 中将自定义小部件添加到页面, 如果页面已经打开, 则重新加载编辑器。控件渲染为带有搜索框的下拉。开始键入, 列表过滤器随到随到。
Multiple on,每个 pick 都会变成控件内部的一个小标签,可用其 x 移除。每次添加或删除都会重新渲染循环,因此卡片上的徽章会实时跟踪控件。
常见用例 #
- 类别和标签选择器 这会在卡片和投资组合项目上呈现徽章行。
- 长选项列表 例如国家/地区、行业或字体配对选择,其中搜索胜过滚动。
- 功能清单 每个选定的键都会在定价列中打印一行。
- 过滤栏小部件 其选择的密钥成为 JS 过滤脚本的数据属性。
- 社会概况选择器 每个键映射到图标并在循环中链接。
Select2 字段的操作技巧 #
- 在编写模板之前决定模式。 单模式想要令牌,多模式想要循环;它们不可互换。
- 切勿直接打印多个值。
{{ selected_tags }}在数组上不会产生任何有用的东西;只有{% for %}循环到达按键。 - 钥匙保留蛞蝓,标签保留文字。 该循环打印密钥,因此如果徽章文本应该对人类友好,则要么使密钥呈现,要么用它来映射它们
{% if %}循环内的块。 - 空的多选择循环零次。 包装纸 div 仍然渲染,所以将其包装进去
{% if selected_tags %}当空镐不应留下标记时。 - 使用简单的"选择"来获取短列表。 三到四个固定变体不需要搜索; Select2 在较长的列表和多重选择中赢得一席之地。
常见问题 #
Master Addons Widget Builder 中的 Select2 字段是什么?
Select2 字段为自定义 Elementor 小部件添加可搜索的下拉,具有可选的多模式 在单模式下,您的模板会收到一个选项键,就像一个普通的 Select。在多模式下,它会收到一个键数组,您可以使用 a 打印 {% for %} 循环。
如何显示多个选定的值?
循环字段: {% for tag in selected_tags %}<span>{{ tag }}</span>{% endfor %},在哪里 selected_tags 是字段的名称。块渲染一次每个选取的键。一个直接 {{ selected_tags }} 不适用于数组。
为什么我的 Select2 在模板中没有打印任何内容?
Multiple on 几乎总是因为模板还是使用裸通证,一个直接打印出来的数组不会产生有用的输出,将模板切换到 a {% for %} 循环,或者如果您只需要一个拨号,请关闭多个。
模板有标签或密钥吗?
钥匙。如果选项 web 带有"“web Design”"标签,循环变量成立 web、比较和类名必须使用密钥,任何友好的显示文本都需要来自密钥本身或条件映射。
我应该何时使用 Select2 而不是 Select?
Select2 在选项列表足够长以致于搜索有帮助的时候,或者用户应该选择一个以上的选项时使用,对于一个简短的单项选择列表,plain 选择字段 使用更简单的控制来完成相同的工作。
我可以限制或预设所选择的内容吗?
Default 选项预设初始选择,单模式下为一个键,选项列表本身就是边界:用户只能从您定义的键中进行选择,因此管理该列表就是您保持输出可预测性的方式。
包裹起来 #
Widget Builder Select2 字段涵盖了原生下拉无法完成的两个作业:搜索长列表并同时选择几个值。将单模式合约保留在头部,通过令牌保留一个密钥,然后切换到 a {% for %} multiple 继续的那一刻循环。有关图标按钮选择而不是下拉,请参阅 选择字段。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。
