The Поле Select2 является ли простой Select более крупным братом: раскрывающийся список, в который можно ввести, с дополнительным режимом множественного числа, который позволяет пользователю выбирать несколько вариантов одновременно. Внутри главных надстроек Виджет Строитель, он охватывает случаи родной dropdown обрабатывает плохо Длинные списки опций, которые нуждаются в поиске. Tag-style выбирает, где одного ответа недостаточно.
Как и обычные значения параметров Select, Select2 подключаются прямо к сети Условия за демонстрацию или сокрытие других элементов управления и в Механизм шаблонов Twig-синтаксиса для {% if %} проверки в вашей разметке. Оба руководства охватывают настройку и ограничения.
Режим с одним выбором ведет себя точно так же, как режим с одним выбором Выбрать поле: ваш шаблон получает один ключ.Flip on Multiple и значение становится массивом ключей, который изменяет, как ваш шаблон должен его читать.Этот переключатель является сердцем этого документа.
Что делает поле Select2 #
- Оказывает раскрывающийся список с возможностью поиска на панели Элементор; пользователь вводит для фильтрации списка опций.
- Держит один ключ из определенных вами параметров в одном режиме тот же контракт, что и простой выбор.
- Держит массив ключей когда включена опция "Множественное", отображается в элементе управления как съемные теги.
- Подает шаблоны через токен или цикл, в зависимости от этого режима.
- Использует пары клавиш и этикеток вы определяете, поэтому шаблоны всегда работают со стабильными слизняками.
Если вы новичок в создании виджетов, начните с Обзор виджета-строителя первый.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет карты портфолио, где редакторы отмечают каждый экземпляр одной или несколькими категориями: Брендинг, Интернет, Печать, Движение.
Как добавить поле Select2 #
Найти Выбрать2 на панели полей слева от редактора Widget Builder. он сидит с другими полями выбора.
Перетащите его в раздел под Содержание вкладка После того, как он приземлится, параметры поля открываются слева, и первое решение заключается в том, выбирает ли этот элемент управления одно значение или много. Урегулируйте это, прежде чем коснуться шаблона, потому что два режима хотят разной разметки.
Объяснены параметры поля Select2 #
- Этикетка: текст, показанный рядом с элементом управления в Elementor, например “Categories”.
- Имя: уникальный идентификатор поля, букв, цифр и подчеркиваний только, например
selected_tags. - Варианты: выбор как пары клавиш и меток Ключи - это слизни, которые видит ваш шаблон (
branding,web); метки - это слова в раскрывающемся списке. - Несколько: переключатель режимов. выкл, пользователь выбирает один вариант. включен, управление принимает несколько пиков, и значение становится массивом ключей.
- По умолчанию: ключ или клавиши, выбранные при первом падении виджета на странице.
- Описание, Показать метку, Разделитель: стандартные настройки отображения, а также условия, расположенные ниже для отображения поля только тогда, когда другой элемент управления имеет определенное значение.
Подключите Select2 к своему шаблону #
В едином режиме относитесь к нему точно так же, как к Select. жетон печатает выбранный ключ, поэтому классы модификаторов и сравнения работают как обычно:
<article class="portfolio-card cat--{{ selected_tags }}">
{% if selected_tags == 'motion' %} <span class="badge">Video</span> {% endif %}В множественном режиме значение равно массив ключейи просто {{ selected_tags }} печатает ничего полезного Шаблон должен зацикливаться:
<div class="card-tags">
{% for tag in selected_tags %}
<span class="tag tag--{{ tag }}">{{ tag }}</span>
{% endfor %}
</div>selected_tagsэто название поля.tagэто переменная цикла, которую вы изобретаете; называйте это как угодно.- Блок между
{% for %}и{% endfor %}отпечатки один раз на выбранный ключ в том порядке, в котором они были выбраны.
Остерегайтесь несоответствия режимов Шаблон, написанный с помощью голого токена, сохраняет “working” после включения Multiple; он просто отображает пустое место, без ошибок, ничего в консоли. Если кажется, что значение Select2 исчезает, проверьте, включено ли Multiple и шаблон все еще ожидает один ключ. Это несоответствие является причиной чаще, чем нет.
Используйте элемент управления Select2 в Elementor #
Добавьте свой пользовательский виджет на страницу в Elementor, перезагрузив редактор, если страница уже была открыта. элемент управления отображается как раскрывающийся с помощью поля поиска. Начните вводить, и список фильтруется по ходу дела.
При включении Multiple каждый медиатор становится небольшим тегом внутри элемента управления, который можно снять с помощью x. Каждое добавление или удаление перерендерирует цикл, поэтому значки на карте отслеживают элемент управления в режиме реального времени.
Обычные случаи использования #
- Сборщики категорий и тегов это отображает строки значков на картах и предметах портфолио.
- Длинные списки опций например, выбор страны, отрасли или пары шрифтов, где поиск превосходит прокрутку.
- Контрольные списки функций где каждый выбранный ключ печатает одну строку в столбце цен.
- Виджеты панели фильтров выбранные ключи которого становятся атрибутами данных для сценария фильтра JS.
- Выборщики социальных профилей где каждый ключ сопоставляется со значком и ссылкой в цикле.
Советы по работе с полем Select2 #
- Решите режим перед записью шаблона. В одном режиме нужен токен, в нескольких режимах нужен цикл; они не взаимозаменяемы.
- Никогда не печатайте несколько значений напрямую.
{{ selected_tags }}на массиве нет ничего полезного; только{% for %}петля достигает клавиш. - Ключи остаются слизняками, ярлыки остаются словами. Петля печатает клавиши, поэтому, если текст значка должен быть удобным для человека, либо сделайте клавиши презентабельными, либо нанесите их на карту
{% if %}блоки внутри петли. - Пустой многовыборочный цикл нулевой раз. Обертка div по-прежнему визуализируется, поэтому заверните ее
{% if selected_tags %}когда пустой выбор не должен оставлять после себя наценку. - Используйте простой выбор для коротких списков. Три или четыре фиксированных варианта не нуждаются в поиске; Select2 зарабатывает свое место в более длинных списках и мультипиках.
Часто задаваемые вопросы #
Что такое поле Select2 в Master Addons Widget Builder?
Поле Select2 добавляет раскрывающийся список с возможностью поиска к пользовательскому виджету Elementor с дополнительным режимом Multiple. в одном режиме ваш шаблон получает один ключ опции, например простой выбор. В нескольких режимах он получает массив ключей, которые вы печатаете с помощью a {% for %} петля.
Как отобразить несколько выбранных значений?
Закрутить поле: {% for tag in selected_tags %}<span>{{ tag }}</span>{% endfor %}, где selected_tags является Имя поля Блок визуализирует один раз на выбранный ключ. Прямой {{ selected_tags }} не работает на массиве.
Почему мой Select2 ничего не печатает в шаблоне?
Почти всегда потому, что Multiple включен, а шаблон по-прежнему использует голый токен. Массив, напечатанный напрямую, не дает полезных результатов. Переключите шаблон на a {% for %} зацикливайтесь или выключите Multiple, если один выбор - это все, что вам нужно.
Шаблон получает метки или ключи?
Ключи. Если опция web несет метку “Web Design”, переменная цикла держит web. Для сравнения и названия классов необходимо использовать ключ, а любой дружественный текст отображения должен исходить из самого ключа или условного сопоставления.
Когда мне следует использовать Select2 вместо Select?
Используйте Select2, когда список опций достаточно длинный, чтобы поиск помог, или когда пользователь должен выбрать более одного варианта. для короткого списка с одним выбором, просто Выбрать поле выполняет ту же работу с более простым управлением.
Могу ли я ограничить или предустановить выбранное?
Опция По умолчанию предустанавливает начальный выбор, один ключ в единичном режиме Сам список опций является границей: пользователи могут когда-либо выбирать только из определенных вами ключей, поэтому курирование этого списка - это то, как вы сохраняете предсказуемость вывода.
Завершая #
Поле Widget Builder Select2 охватывает два задания, которые не может выполнить родной раскрывающийся список: поиск по длинным спискам и выбор нескольких значений одновременно. Сохраняйте однорежимный контракт в голове, один ключ через токен и переключитесь на a {% for %} зациклите момент, когда Multiple продолжается. Выбор значков, а не раскрывающихся данных, см. в разделе Выберите поле. Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.
