Selecione2

O Selecione2 campo é o irmão maior do Plain Select: um dropdown no qual você pode digitar, com um modo múltiplo opcional que permite ao usuário escolher várias opções de uma só vez Dentro dos Master Addons Construtor de widgets, cobre os casos que um dropdown nativo lida mal Longas listas de opções que precisam de pesquisa Escolhas de estilo de tag onde uma resposta não é suficiente.

Como o regular Selecione, os valores da opção Select2 são conectados diretamente Condições para mostrar ou esconder outros controles, e no Mecanismo de modelo de sintaxe dupla para {% if %} verificações na sua marcação Ambos os guias cobrem a configuração e as limitações.

O modo de seleção única se comporta exatamente como o Selecione campo: seu modelo recebe uma chave Vire em Múltiplo e o valor se torna uma matriz de chaves, que muda como seu modelo tem que lê-lo Esse switch é o coração deste doc.

O que o campo Select2 faz #

• Rende um dropdown pesquisável no painel Elementor; o usuário digita para filtrar a lista de opções.
• Detém uma chave a partir das opções definidas no modo único, o mesmo contrato do Select simples.
• Possui uma variedade de chaves quando a opção Múltiplo estiver ligada, mostrada como etiquetas removíveis no controle.
• Alimenta modelos através de um token ou loop, dependendo desse modo.
• Usa pares de chaves e rótulos você define, então os modelos sempre funcionam com lesmas estáveis.

Se você é novo na construção de widgets, comece com o Visão geral do Widget Builder primeiro.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Um widget personalizado aberto no editor Widget Builder Nosso exemplo é um widget de cartão de portfólio onde os editores marcam cada instância com uma ou mais categorias: Branding, Web, Print, Motion.

Como adicionar um campo Select2 #

Encontrar Selecione2 no painel de campos à esquerda do editor do Widget Builder Ele fica com os outros campos de escolha.

Arraste-o para uma seção abaixo do Conteúdo aba. Uma vez que ele aterrissa, as opções do campo abrem à esquerda, e a primeira decisão é se este controle escolhe um valor ou muitos. Resolva isso antes de tocar no modelo, porque os dois modos querem marcação diferente.

Selecione2 opções de campo explicadas #

• Etiqueta: o texto mostrado ao lado do controle em Elementor, por exemplo “Categorias”.
• Nome: o identificador exclusivo apenas para o campo, letras, números e sublinhados, por exemplo selected_tags.
• Opções: as escolhas como pares de chaves e rótulos As chaves são as lesmas que seu modelo vê (branding, web); rótulos são as palavras no menu suspenso.
• Múltiplo: o interruptor de modo Desligado, o usuário escolhe uma opção, O controle aceita várias escolhas e o valor torna-se uma matriz de chaves.
• Predefinição: a chave, ou chaves, selecionadas quando o widget é lançado pela primeira vez em uma página.
• Descrição, Mostrar etiqueta, Separador: as configurações de exibição padrão, além de Condições mais abaixo para mostrar o campo somente quando outro controle tiver um determinado valor.

Conecte o Select2 ao seu modelo #

No modo único, trate-o exatamente como um Select. o token imprime a chave escolhida, então as classes modificadoras e as comparações funcionam como de costume:

<article class="portfolio-card cat--{{ selected_tags }}">
{% if selected_tags == 'motion' %} <span class="badge">Video</span> {% endif %}

No modo múltiplo, o valor é um conjunto de chaves, e uma planície {{ selected_tags }} imprime nada de útil O modelo tem que fazer um loop:

<div class="card-tags">
  {% for tag in selected_tags %}
  <span class="tag tag--{{ tag }}">{{ tag }}</span>
  {% endfor %}
</div>

• selected_tags é o Nome do campo.
• tag é uma variável de loop que você inventa; chame de qualquer coisa.
• O bloco entre {% for %} e {% endfor %} imprime uma vez por chave escolhida, na ordem em que foi escolhida.

Cuidado com a incompatibilidade de modo Um modelo escrito com um token simples mantém o “working” depois de ativar o Multiple; ele apenas renderiza um ponto vazio, sem erro, nada no console Se um valor Select2 parecer desaparecer, verifique se o Multiple está ativado e o modelo ainda espera uma única chave Essa incompatibilidade é a causa com mais frequência do que não.

Use o controle Select2 no Elementor #

Adicione seu widget personalizado a uma página no Elementor, recarregando o editor se a página já estava aberta O controle é renderizado como um dropdown com uma caixa de pesquisa Comece a digitar e a lista filtra conforme você avança.

Com Multiple on, cada pick se torna uma pequena tag dentro do controle, removível com seu x. Cada add ou remove renderiza novamente o loop, para que os emblemas no cartão rastreiem o controle em tempo real.

Casos de uso comum #

• Categoria e catadores de etiquetas que renderizam linhas de crachás em cartões e itens do portfólio.
• Listas de opções longas como país, indústria ou opções de emparelhamento de fontes onde a pesquisa supera a rolagem.
• Listas de verificação de recursos onde cada chave escolhida imprime uma linha em uma coluna de preços.
• Widgets de barra de filtro cujas chaves escolhidas se tornam atributos de dados para um script de filtro JS.
• Seletores de perfil social onde cada tecla mapeia para um ícone e link no loop.

Dicas para trabalhar com o campo Select2 #

• Decida o modo antes de escrever o modelo. O modo único quer um token, o modo múltiplo quer um loop; eles não são intercambiáveis.
• Nunca imprima um valor múltiplo diretamente. {{ selected_tags }} em uma matriz não produz nada útil; apenas o {% for %} loop atinge as teclas.
• As chaves permanecem lesmas, os rótulos permanecem palavras. O loop imprime teclas, portanto, se o texto do emblema for amigável para humanos, torne as teclas apresentáveis ou mapeie-as com {% if %} blocos dentro do loop.
• Um multi-seleção vazio faz loops zero vezes. O div do invólucro ainda renderiza, então envolva-o {% if selected_tags %} quando uma escolha vazia não deve deixar nenhuma marcação para trás.
• Use o plano Selecione para listas curtas. Três ou quatro variantes fixas não precisam de pesquisa; Select2 ganha seu lugar em listas mais longas e várias escolhas.

Perguntas frequentes #

Embrulhando #

O campo Widget Builder Select2 cobre os dois trabalhos que um dropdown nativo não pode: pesquisar listas longas e escolher vários valores de uma só vez Mantenha o contrato monomodo na sua cabeça, uma chave através de um token e mude para um {% for %} faça um loop no momento em que o Multiple continua Para escolhas de botão de ícone em vez de dropdowns, consulte o Escolha campo. Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.