Vælg2

The Vælg2 felt er den almindelige Selects større søskende: en dropdown, du kan skrive i, med en valgfri multipel tilstand, der lader brugeren vælge flere muligheder på én gang. Inde i Master Addons Widget Builder, det dækker de tilfælde, en indfødt dropdown håndterer dårligt. Lange option lister, der har brug for søgning. Tag-stil picks, hvor et svar ikke er nok.

Ligesom den almindelige Select, Select2 option værdier plug direkte ind Betingelser til at vise eller skjule andre kontroller og ind i Twig-syntaks skabelon motor for {% if %} checks i din markup. Begge guides dækker opsætning og begrænsninger.

Enkeltvalgstilstanden opfører sig nøjagtigt som Vælg felt: din skabelon modtager én nøgle. Vend på Multiple og værdien bliver en række nøgler, som ændrer, hvordan din skabelon skal læse den. Den switch er hjertet i denne doc.

Hvad Select2-feltet gør #

• Gengiver en søgbar dropdown i panelet Elementor; brugeren skriver for at filtrere indstillingslisten.
• Holder én nøgle fra dine definerede muligheder i enkelttilstand, den samme kontrakt som den almindelige Vælg.
• Holder en række nøgler når indstillingen Flere er slået til, vises som flytbare mærker i kontrolelementet.
• Feeds skabeloner gennem et token eller en løkke, afhængigt af den tilstand.
• Bruger nøgle- og etiketpar du definerer, så skabeloner arbejder altid med stabile snegle.

Hvis du er ny til at bygge widgets, skal du starte med Widget Builder oversigt first.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• En brugerdefineret widget åben i Widget Builder editor. Vores eksempel er en portefølje kort widget, hvor redaktører tagger hver instans med en eller flere kategorier: Branding, Web, Print, Motion.

Sådan tilføjes et Select2-felt #

Find Vælg2 i feltpanelet til venstre for Widget Builder-editoren. Det sidder med de andre valgfelter.

Træk den ind i en sektion under Content fane. Når det lander, åbnes feltets muligheder til venstre, og den første beslutning er, om dette kontrolelement vælger én værdi eller mange. Indstil det, før du rører skabelonen, fordi de to tilstande vil have forskellig markering.

Vælg2 feltindstillinger forklaret #

• Etiket: teksten vist ved siden af kontrolelementet i Elementor, for eksempel “Kategorier”.
• Navn: den unikke identifikator for feltet, bogstaver, tal og understregninger kun f.eks selected_tags.
• Options: valgene som nøgle- og etiketpar. Nøgler er de snegle, din skabelon ser (branding, web); etiketter er ordene i dropdown.
• Multiple: tilstandskontakten. Fra, brugeren vælger én mulighed. Til, kontrollen accepterer flere valg, og værdien bliver en række nøgler.
• Standard: nøglen eller tasterne, der er valgt, når widgetten først falder på en side.
• Beskrivelse, Vis etiket, Separator: standardvisningsindstillingerne plus betingelser længere nede for kun at vise feltet, når et andet kontrolelement har en bestemt værdi.

Tilslut Select2 til din skabelon #

I enkelt tilstand skal du behandle det nøjagtigt som et Vælg. Tokenet udskriver den valgte nøgle, så modifikatorklasser og sammenligninger fungerer som normalt:

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

I flere tilstande er værdien en række nøgler, og en slette {{ selected_tags }} udskriver intet nyttigt. Skabelonen skal loop:

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

• selected_tags er feltets navn.
• tag er en løkkevariabel, du opfinder; kald det hvad som helst.
• Blokken mellem {% for %} og {% endfor %} udskriver én gang pr. plukket nøgle, i den rækkefølge de blev plukket.

Pas på tilstanden mismatch. En skabelon skrevet med en bar token holder “fungerer” efter du aktiverer Multiple; det bare gengiver en tom plet, ingen fejl, intet i konsollen. Hvis en Select2 værdi synes at forsvinde, kontrollere, om Multiple er tændt, og skabelonen stadig forventer en enkelt nøgle. Den mismatch er årsagen oftere end ikke.

Brug Select2-kontrolelementet i Elementor #

Tilføj din brugerdefinerede widget til en side i Elementor, genindlæse editoren, hvis siden allerede var åben. Kontrolelementet gengives som en dropdown med et søgefelt. Begynd at skrive, og listen filtrerer som du går.

Med Multiple tændt bliver hvert valg et lille tag inde i kontrollen, der kan fjernes med dets x. Hver tilføjelse eller fjernelse gengiver løkken, så badges på kortet sporer kontrollen i realtid.

Almindelige brugstilfælde #

• Kategori og tagplukkere der gengiver badgerækker på kort og porteføljeposter.
• Lange optionslister såsom valg af land, branche eller skrifttypeparring, hvor søgning slår rulning.
• Feature tjeklister hvor hver valgt nøgle udskriver en linje i en priskolonne.
• Filter-bar widgets hvis valgte nøgler bliver dataattributter for et JS-filterscript.
• Sociale profilvælgere hvor hver nøgle kortlægges til et ikon og link i løkken.

Tips til at arbejde med feltet Select2 #

• Beslut tilstanden, før du skriver skabelonen. Enkelt tilstand vil have et token, flere tilstande vil have en løkke; de er ikke udskiftelige.
• Udskriv aldrig en multipel værdi direkte. {{ selected_tags }} på et array giver intet nyttigt; kun {% for %} loop når tasterne.
• Nøgler forbliver snegle, etiketter forbliver ord. Sløjfen udskriver taster, så hvis badgeteksten skal være menneskevenlig, skal du enten gøre tasterne præsentable eller kortlægge dem med {% if %} blokke inde i løkken.
• En tom multi-select loops nul gange. Indpakningsdiven gengives stadig, så pak den ind {% if selected_tags %} når en tom pick bør efterlade ingen markup bag.
• Brug den almindelige Vælg for korte lister. Tre eller fire faste varianter behøver ikke søgning; Select2 tjener sin plads på længere lister og multi-picks.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Select2 dækker de to job, en indbygget dropdown ikke kan: søge i lange lister og vælge flere værdier på én gang. Hold single-mode-kontrakten i dit hoved, én tast gennem et token, og skift til en {% for %} loop øjeblikket Multiple går på. For ikon-knap valg snarere end dropdowns, se Vælg felt. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.