Wählen2

Die Feld auswählen2 Ist das größere Geschwisterchen der einfachen Auswahl: ein Dropdown, in den Sie eingeben können, mit einem optionalen Mehrfachmodus, der es dem Benutzer ermöglicht, mehrere Optionen gleichzeitig auszuwählen. Innerhalb der Master-Add-ons Widget-builderEs deckt die Fälle ab, die ein nativer Dropdown schlecht verarbeitet. Lange Optionslisten, die gesucht werden müssen. Picks im Tag-Stil, bei denen eine Antwort nicht ausreicht.

Wie die regulären Select-Optionswerte werden Select2 direkt angesteckt Bedingungen Zum Ein - oder Ausblenden anderer Bedienelemente, und in die Twig-Syntax-Vorlagen-Engine Für {% if %} Prüft in Ihrem Markup Beide Guides behandeln Einrichtung und Einschränkungen.

Der Single-Select-Modus verhält sich genau wie der Feld auswählen: Ihre Vorlage erhält einen Schlüssel Flip auf Multiple und der Wert wird zu einem Array von Schlüsseln, was ändert, wie Ihre Vorlage es lesen muss Dieser Schalter ist das Herzstück dieses Dokuments.

Was das Feld Select2 bewirkt #

• Macht einen durchsuchbaren Dropdown Im Elementor-Panel; gibt der Benutzer ein, um die Optionsliste zu filtern.
• Hält einen Schlüssel Aus Ihren definierten Optionen im Einzelmodus derselbe Vertrag wie der einfache Select.
• Hält eine Reihe von Schlüsseln Wenn die Option Mehrere eingeschaltet ist, werden sie im Steuerelement als entfernbare Tags angezeigt.
• Fügt Vorlagen über einen Token oder eine Schleife ein„, abhängig von diesem Modus.
• Verwendet Schlüssel- und Etikettenpaare Sie definieren, so arbeiten Vorlagen immer mit stabilen Nacktschnecken.

Wenn Sie neu im Erstellen von Widgets sind, beginnen Sie mit dem Übersicht über Widget Builder Zuerst.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Ein benutzerdefiniertes Widget öffnet sich im Widget Builder-Editor Unser Beispiel ist ein Portfolio-Karten-Widget, bei dem Editoren jede Instanz mit einer oder mehreren Kategorien versehen: Branding, Web, Print, Motion.

So fügen Sie ein Feld Select2 hinzu #

Finden Wählen2 Im Feldfenster links im Widget Builder-Editor Es steht mit den anderen Auswahlfeldern.

Ziehen Sie es in einen Abschnitt unter dem Inhalt Tab. Sobald es landet, öffnen sich links die Optionen des Feldes, und die erste Entscheidung ist, ob dieses Steuerelement einen Wert oder viele auswählt Begleichen Sie das, bevor Sie die Vorlage berühren, denn die beiden Modi wollen unterschiedliche Markups.

Select2 Feldoptionen erklärt #

• Etikett: Der neben dem Steuerelement in Elementor angezeigte Text, zum Beispiel “Kategorien”.
• Name: Die eindeutige Kennung für das Feld, Buchstaben, Zahlen und Unterstriche, zum Beispiel selected_tags.
• Optionen: Die Auswahlmöglichkeiten als Schlüssel - und Beschriftungspaare Schlüssel sind die Nacktschnecken, die Ihre Vorlage sieht (branding, web); Etiketten sind die Wörter im Dropdown.
• Mehrere: Der Modusschalter Aus, der Benutzer wählt eine Option Ein, das Steuerelement akzeptiert mehrere Picks und der Wert wird zu einem Array von Schlüsseln.
• Standard: Die Taste oder Tasten, die ausgewählt wurden, wenn das Widget zum ersten Mal auf einer Seite abfällt.
• Beschreibung, Etikett anzeigen, Trenner: Die Standardanzeigeeinstellungen sowie weiter unten Bedingungen für die Anzeige des Feldes nur dann, wenn ein anderes Steuerelement einen bestimmten Wert hat.

Verbinden Sie Select2 mit Ihrer Vorlage #

Im Einzelmodus behandeln Sie es genau wie ein Select Das Token druckt den gewählten Schlüssel aus, sodass Modifikatorklassen und Vergleiche wie gewohnt funktionieren:

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

Im Mehrfachmodus ist der Wert ein Schlüsselarray& eine Ebene {{ selected_tags }} Druckt nichts brauchbares Die Vorlage muss in einer Schleife:

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

• selected_tags Der Name des Feldes ist.
• tag Schleifenvariable ist, die Sie erfinden; nennen Sie es alles.
• Der Block zwischen {% for %} und {% endfor %} Drucke einmal pro gepflücktem Schlüssel, in der Reihenfolge ihrer Auswahl.

Achten Sie auf die Modus-Fehlpaarung Eine mit einem bloßen Token geschriebene Vorlage “funktioniert” weiter, nachdem Sie Multiple aktiviert haben; sie rendert nur einen leeren Spot, keinen Fehler, nichts in der KonsoleWenn ein Select2-Wert zu verschwinden scheint, prüfen Sie, ob Multiple eingeschaltet ist und die Vorlage immer noch einen einzelnen Schlüssel erwartetDiese Nichtübereinstimmung ist in den meisten Fällen die Ursache.

Verwenden Sie das Select2-Steuerelement in Elementor #

Fügen Sie Ihr benutzerdefiniertes Widget zu einer Seite in Elementor hinzu und laden Sie den Editor neu, wenn die Seite bereits geöffnet war. Das Steuerelement wird als Dropdown mit einem Suchfeld gerendert. Beginnen Sie mit der Eingabe und die Liste filtert Sie dabei.

Mit Multiple on wird jeder Pick zu einem kleinen Tag innerhalb des Steuerelements, das mit seinem x abnehmbar ist. Jedes Hinzufügen oder Entfernen führt zu einem erneuten Rendern der Schleife, sodass die Abzeichen auf der Karte den Steuerelement in Echtzeit verfolgen.

Häufige Anwendungsfälle #

• Kategorie - und Tag-Picker Dadurch werden Abzeichenreihen auf Karten und Portfoliogegenständen gerendert.
• Lange Optionslisten Zum Beispiel Länder-, Branchen- oder Schriftartenpaarungsoptionen, bei denen die Suche das Scrollen schlägt.
• Feature-checklisten Dabei druckt jeder ausgewählte Schlüssel eine Zeile in einer Preisspalte.
• Filterleisten-widgets Wessen ausgewählte Schlüssel zu Datenattributen für ein JS-Filterskript werden.
• Auswahlmöglichkeiten für soziale Profile Dabei wird jede Taste einem Symbol zugeordnet und in der Schleife verlinkt.

Tipps für die Arbeit mit dem Feld Select2 #

• Entscheiden Sie den Modus, bevor Sie die Vorlage schreiben. Der Einzelmodus möchte ein Token, der Mehrfachmodus möchte eine Schleife; sie sind nicht austauschbar.
• Drucken Sie niemals einen Mehrfachwert direkt aus. {{ selected_tags }} Auf einem Array ergibt sich nichts Nützliches; nur die {% for %} Schleife erreicht die Tasten.
• Schlüssel bleiben Nacktschnecken, Etiketten bleiben Worte. Die Schleife druckt Tasten. Wenn der Abzeichentext also menschenfreundlich sein sollte, machen Sie die Tasten entweder vorzeigbar oder kartieren Sie sie damit {% if %} Blöcke innerhalb der Schleife.
• Eine leere Multi-Select-Schleife null mal. Der Wrapper Div rendert immer noch, also einpacken {% if selected_tags %} Wenn ein leerer Pick keinen Aufschlag hinterlassen sollte.
• Verwenden Sie die einfache Auswahl für kurze Listen. Drei oder vier feste Varianten brauchen keine Suche; Select2 verdient sich seinen Platz bei längeren Listen und Multi-Picks.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Select2 deckt die beiden Jobs ab, die ein nativer Dropdown nicht kann: lange Listen durchsuchen und mehrere Werte auf einmal auswählen Behalten Sie den Single-Mode-Vertrag im Kopf, eine Taste durch ein Token und wechseln Sie zu einem {% for %} Schleife in dem Moment, in dem Multiple weitergeht. Informationen zu Symbol-Tasten-Auswahlmöglichkeiten anstelle von Dropdowns finden Sie in der Feld wählen. Erkunden Sie den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.