Selecione2

O campo Select2 adiciona um dropdown pesquisável a um widget personalizado construído com os Master Addons Construtor de widgets. Editores digitam para filtrar a lista, e com o Mostrar Múltiplo ligado eles podem escolher várias opções de uma só vez Use-o para listas de opções longas ou para escolhas de estilo de tag onde uma resposta não é suficiente.

Select2 é um campo Pro. O plugin gratuito inclui um Widget Builder limitado, e o conjunto completo de campos vem com Master Addons Pro.

O que o campo Select2 faz #

• Ele adiciona um dropdown com uma caixa de pesquisa ao painel do seu widget no Elementor.
• Com o Show Multiple desligado, o editor escolhe uma opção e o seu modelo obtém a chave dessa opção.
• Com o Show Multiple ativado, o editor escolhe qualquer número de opções, mostradas como tags removíveis, e seu modelo recebe uma lista de chaves que você imprime com um {% for %} laço.
• Cada opção tem uma chave e um rótulo Os editores vêem os rótulos, e o seu HTML recebe sempre as chaves.

Se você ainda não construiu um widget, leia o Visão geral do Widget Builder primeiro. Para uma pequena lista de escolha única sem pesquisa, a planície Selecione campo é mais simples.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Master Addons para Elementor e Master Addons Pro, ambos ativos. O guia instalação coberturas configuração.
• Um widget aberto no Widget Builder O exemplo neste guia é um widget “Portfolio Card” com um campo Texto para o título do projeto e dois campos Select2: Tipo de Projeto (uma escolha) e Tags de Projeto (várias escolhas).

Como adicionar um campo Select2 #

1. Ir para Complementos mestres > Construtor de widgets e abra seu widget.
2. No Conteúdo tab, adicione uma seção se ainda não houver.
3. Tipo select na caixa de pesquisa de campo à esquerda Selecione e Selecione2 venha.
4. Arrastar Selecione2 na seção. Suas configurações abrem na barra lateral esquerda.

Um novo campo Select2 começa com Mostrar Múltiplo ligado e três opções de amostra (value-1 para value-3). Substitua-os pelo seu próprio antes de escrever o modelo.

Selecione2 opções de campo explicadas #

Aqui está o campo Tipo de Projeto, configurado para uma única escolha:

• Etiqueta é o texto ao lado do controle em Elementor, por exemplo “Project Type”.
• Nome é o ID exclusivo do campo (apenas letras, números e sublinhados).É também o token que você usa no modelo, portanto project_type torna-se {{project_type}}.
• Descrição aparece sob o controle em Elementor. Use-o para uma pequena dica, como “Escolha uma categoria.”
• Mostrar Múltiplo? alterna entre uma escolha (Não) e muitas escolhas (Sim) Isso altera o que seu modelo recebe, então decida antes de escrever o HTML.
• Opções é a lista de escolhas. A caixa esquerda é a chave que seu modelo recebe (branding, web).A caixa direita é o rótulo editores ver (Marca, Web Design).Use o ícone de mais para adicionar uma linha e a cruz vermelha para remover um.
• Valor padrão é o que é selecionado quando o widget é adicionado pela primeira vez a uma página No modo único é um dropdown normal Se você deixá-lo vazio, a primeira opção é selecionada.

O Project Tags usa as mesmas opções com o Show Multiple ligado A caixa Valor padrão se torna um selecionador de tags, para que você possa pré-selecionar mais de uma opção Deixe-a vazia e a primeira opção é pré-selecionada.

Se a lista Valor padrão ainda mostrar as opções de amostra antigas depois de editar Opções, clique em Salvar configurações e abra o campo novamente.

Abaixo do Valor Padrão você encontrará as configurações comuns compartilhadas pela maioria dos campos: Mostrar Etiqueta, Bloco de Etiquetas, Controle Responsivo, Suporte Dinâmico, Frontend Disponível, Separador, Condições e Classes de controle Vale a pena ligar o bloco de etiquetas para um campo múltiplo, já que o controle obtém a largura total do painel para suas tags.

Use valores Select2 em seu modelo #

A forma como você imprime o valor depende de Mostrar Múltiplo.

Modo único: imprima a chave #

Um único Select2 funciona como qualquer outro token. {{project_type}} imprime a chave seleccionada, para que a possa usar como texto ou construir uma classe CSS a partir dela:

<article class="portfolio-card type-{{project_type}}">
  <span class="card-type">{{project_type}}</span>

Com Branding selecionado, isso renderiza type-branding e branding. Você também pode compará-lo: {% if project_type == 'web' %}...{% endif %}.

Modo múltiplo: loop sobre as teclas #

Um Select2 múltiplo contém uma lista e {{project_tags}} por si só não imprime nada. Loop sobre ele:

<ul class="card-tags">
  {% for tag in project_tags %}
    <li class="card-tag">{{ tag }}</li>
  {% endfor %}
</ul>

O loop é executado uma vez para cada opção escolhida, na ordem em que o editor as escolheu. Dentro dele, {{ tag }} é uma chave e filtros como {{ tag|upper }} trabalhar também. O Guia de sintaxe Twig lista tudo o que o mecanismo de modelo suporta.

O painel Documentação ao lado do editor de código lista um token para cada campo Copiar {{project_tags}} a partir daí é bom para campos únicos, mas um campo múltiplo ainda precisa do loop.

Clique Salvar configurações quando o modelo estiver pronto.

Use o controle Select2 no Elementor #

Adicione o widget a uma página ou recarregue o editor se a página já estiver aberta. Ambos os controles Select2 aparecem na guia Conteúdo com seus padrões já selecionados.

No controle múltiplo, clique no botão de mais ou no espaço vazio após as tags e comece a digitar A lista se estreita à medida que você digita, e Enter adiciona a opção destacada Cada tag tem uma pequena cruz que a remove.

O controle único abre um dropdown com sua própria caixa de pesquisa Escolha uma opção ou use a cruz ao lado do valor atual para limpá-la.

A tela é atualizada imediatamente Observe que o painel mostra etiquetas (Web Design, Social Media) enquanto o cartão imprime as teclas (web, social):

Se precisar do texto do rótulo na página, torne a chave legível o suficiente para ser exibida ou mapeie-a no modelo:

{% for tag in project_tags %}
  <li class="card-tag">{% if tag == 'social' %}Social Media{% else %}{{ tag }}{% endif %}</li>
{% endfor %}

Casos de uso comum #

• Tags ou serviços em portfólio, estudo de caso e cartões de equipe.
• Um selecionador de categoria ou estilo que adiciona uma classe CSS, como type-web.
• Listas longas como países, indústrias ou conjuntos de ícones, onde a pesquisa salva a rolagem.
• Listas de recursos em cartões de preços ou produtos, inseridas em itens de lista.

Dicas para trabalhar com o campo Select2 #

• Decida Mostrar Múltiplo primeiro. Mudá-lo depois significa mudar {{field}} para um loop, ou o contrário.
• Escreva as teclas em minúsculas sem espaços (social, web).Elas acabam em nomes de classe e comparações.
• Não renomeie as chaves depois que o widget estiver em uso As páginas que já salvaram a chave antiga não corresponderão à nova.
• Estile a saída com a tecla, por exemplo .type-web .card-type { ... }.
• Para um punhado de botões de ícone em vez de um dropdown, use o Escolha campo.

Perguntas frequentes #

Embrulhando #

Adicione o campo Select2, defina suas chaves e rótulos e escolha entre uma escolha e muitas antes de escrever o HTML. Imprima um único valor com {{field_name}} e faça um loop em um múltiplo com {% for %}. Para repetir grupos de campos em vez de uma lista de escolhas, observe o Campo repetidor, e verifique preços para o que cada plano inclui.