Zur Hauptnavigation springen Zum Inhalt springen Zur Fußnavigation springen

Partikel YAML Feldtypen

Wenn Sie ein neues Partikel erstellen, werden Sie vielleicht feststellen, dass die Eingabefelder, die Sie in der YAML-Datei des Partikels festlegen, je nachdem, was Sie zu erreichen versuchen, variieren.

Beispiel Bild

Im obigen Screenshot werden Sie feststellen, dass mehrere verschiedene Arten von Eingabefeldern vorhanden sind. Auch der grüne Schalter in der rechten oberen Ecke ist ein Feld, das in der YAML-Datei gesetzt ist.

Hier ist die YAML-Datei des Partikels:

Beispiel Bild

In diesem Beispiel sind mehrere verschiedene Feldtypen dargestellt. input.checkbox, input.text, input.imagepicker und textarea.textarea finden Sie im obigen Beispiel. Im Folgenden haben wir die Core-Feldtypen beschrieben, die in Gantry 5 enthalten sind.

HTML-Eingabefeldtypen

Es gibt zwei Haupttypen von Eingaben, die von Gantry unterstützt werden. Die ersten sind grundlegende HTML-Eingabetypen. Gantry unterstützt sie aus Gründen der Einfachheit und macht es Ihnen leichter, Partikel zu erstellen, die alles nutzen, was HTML zu bieten hat. Zu diesen Typen gehören:

  • collection.list
  • input.checkbox | Zeigt ein Kontrollkästchen an (default: true=checked / false=unchecked)

     title:
          type: input.checkbox
          label: Dein Label.
          description: Deine Beschreibung.
          default: true

  • input.color
  • input.date
  • input.datetime-local
  • input.datetime
  • input.email
  • input.file
  • input.group
  • input.hidden
  • input.image
  • input.month
  • input.number
  • input.password
  • input.radio
  • input.range
  • input.reset
  • input.search
  • input.submit
  • input.tel
  • input.text

     title: type:
          input.text
          label: Dein Label.
          description: Deine Beschreibung.

  • input.time
  • input.url
  • input.week
  • textarea.textarea
  • enable.enable

Gantry-abhängige Input-Feldtypen

Die zweite sind Gantry-spezifische Typen, die die exklusiven Funktionen von Gantry wie den robusten Color Picker und Image Picker nutzen. Diese Typen nehmen das, was die Vanille-HTML-Eingabetypen bieten, und erweitern sie, um sie leistungsfähiger, benutzerfreundlicher und außergewöhnlich robust zu machen.

Feld TypenBeschreibung
input.block-variations Ermöglicht es Ihnen, zwischen den von Gantry unterstützten Blockvarianten zu wählen, so dass Sie auf schnelle Weise verfeinern können, wie das Partikel am Frontend erscheint.
input.colorpicker Öffnet den Farbauswahldialog von Gantry, mit dem Sie schnell eine Farbe aus Werkzeugen auswählen können, die Farbton, Sättigung, Brillanz und ein Farbrad anzeigen.
input.filepicker Öffnet den Dateibrowser von Gantry, so dass Sie eine Datei zur Verwendung auswählen können.
input.fonts Öffnet den Font Selector von Gantry, mit dem Sie über 670 Schriften aus der Google Font Library anzeigen und testen können.
input.icon Öffnet den Icon Selector von Gantry, der die FontAwesome-Symbole anzeigt und es Ihnen ermöglicht, sie für das Feld auszuwählen.
input.imagepicker Öffnet den Dateibrowser von Gantry, so dass Sie ein Bild zur Verwendung auswählen können.
input.videopicker Öffnet den Dateibrowser von Gantry und ermöglicht es Ihnen, eine Videodatei zur Verwendung auszuwählen.
select.selectize Zeigt einen vorab erstellten Satz von Optionen an, aus denen der Benutzer auswählen kann.
select.date Zeigt einen vorab erstellten Satz von Datumsformaten an, aus denen die Benutzer auswählen können.

Felder auswählen

Sowohl select.selectize als auch select.date erfordern ein wenig zusätzliche Einstellungen in der YAML-Datei des Partikels, um im Gantry-Administrator ordnungsgemäß zu funktionieren. Nachfolgend sehen Sie ein Beispiel für einen select.selectize Feldtyp aus dem YAML-Feld eines Partikels.

Beispiel Bild

Die Verwendung von Mehrfachauswahl auf einer einzigen Seite kann die Leistung beeinträchtigen. Wenn Sie sich in einer Situation befinden, in der Sie diesen Eingabetyp auf kleinstem Raum mehrfach verwenden müssen, können Sie alternativ select.select versuchen. Es hat ungefähr die gleiche Funktionalität bei weniger Leistungsaufwand. Eine gute Faustregel ist, dass Sie, wenn Sie die Suchfunktion nicht benötigen, select.select verwenden sollten.

Sie werden die hier aufgelisteten Einstellungen der options bemerken. In diesem Fall werden die Werte von _parent und _blank mit den Tags von Self und New Window verwendet. Der Benutzer sieht die Tags im Gantry-Administrator. Die eine oder andere Auswahl setzt den Wert des Feldes auf den zugehörigen Wert der Option.

Beispiel Bild

Wie Sie sehen können, ist die Benutzererfahrung im Gantry-Administrator natürlicher und einfacher für den Benutzer. Anstatt das Zielfenster für einen Link manuell einzugeben, wählen sie einfach zwischen diesen beiden voreingestellten Optionen, die während des Seiten-Renderings in die Twig-Datei des Partikels einfließen.

Die Verwendung des Feldtyps select.date ist sehr ähnlich. Der Unterschied besteht darin, dass Sie jemandem eine Option geben, wie Daten angezeigt werden. Im folgenden Beispiel haben wir eine Vielzahl von verschiedenen Optionen eingerichtet.

Beispiel Bild

Im Folgenden wird beschrieben, wie diese YAML-Einstellungen im Gantry 5-Administrator angezeigt werden.

Beispiel Bild

Gantry-Alarme, Notizen und Styling

Neben den Standard-HTML- und Gantry-Eingaben gibt es auch viele andere Eingaben. Diese Eingaben können verwendet werden, um Benutzer zu warnen oder um dem Gantry-Administrator einfach ein wenig mehr Stil zu verleihen. Mit Notizen können Sie Unterabschnitte anlegen und weitere Informationen hinzufügen, die dem Benutzer direkt zur Verfügung stehen. Die folgenden Typen sind enthalten:

  • separator.note

Beispiel Bild

Ändern Sie die Klasse der separator.note in eine beliebige Klasse, die Ihrer Vorlage entspricht. Standardklassen sind:

class: alert alert-success
class: alert alert-info
class: alert alert-warning
class: alert alert-danger

Es gibt viele verschiedene Optionen, die Ihnen zur Verfügung stehen. Wie Sie aus dieser kurzen Anleitung ersehen können, sind Partikel ein leistungsstarker Teil der Kernfunktionalität von Gantry und können eine Reihe von Funktionen nutzen, um das Leben für Ihren Benutzer einfacher zu machen.

Tabs für die Partikel-Einstellungen

! Diese Funktion ist nur in Gantry 5.3.2 und höher verfügbar !

Beispiel Bild

Wenn Sie ein Partikel haben, das viele Konfigurationseinstellungen am Backend hat, können Sie (in Gantry 5.3.2+) wählen, ob Sie Registerkarten innerhalb des Backends des Partikels erstellen möchten, um die Navigation und Konfiguration zu erleichtern.

Um dies zu erreichen, erstellen Sie einen Container in der YAML-Datei des Partikels, in dem tabellarische Daten eingeschlossen werden. Hier ist ein Beispiel für eine YAML-Datei mit drei einfachen Registerkarten:

Beispiel Bild

Sie werden hier die Verwendung von container.tabs bemerken, um den Container zu erstellen, der drei Tabs umschließt. In diesen Registerkarten können Sie alle Felder platzieren, die Sie normalerweise im Admin Ihres Partikels platzieren würden. Alle Felder, die Sie konsistent verfügbar halten möchten, unabhängig davon, welche Registerkarte gerade ausgewählt ist, können dies außerhalb des Containers der Registerkarten tun.

Da die Tabs in einem Container verpackt sind, können sie überall im YAML platziert werden. Das bedeutet, dass Sie Felder davor und danach haben können.

Das Label der Registerkarte setzt den Titel für die Registerkarte im Backend. Es ist nicht erforderlich, wie Sie die Registerkarte in der YAML beschriften.

Wenn Sie Felder in Registerkarten im Zweig verwenden, können Sie normal auf sie zugreifen. Es ist nicht erforderlich, auf die Tabs zu verweisen. Wenn Sie beispielsweise die Ausgabe des im obigen Beispiel aufgerufenen Feldes inside ausgeben möchten, würden Sie einfach {{ particle.inside }} aufrufen. Da Tabs ein Container sind, müssen Sie nicht auf die gesamte Struktur verweisen, wie z.B. {{ particle.tabs.tab.tab_display.inside }}}. (<- falsch).

Dein Name für die Tabs kann auch alles sein. Wir haben tab_readmore und tab_display als Beispiele verwendet. Deine Tabs könnten _tab0 oder santaclause heißen. Es würde die Funktionalität überhaupt nicht beeinträchtigen. Eine gute Gewohnheit wäre es, tabs und Tab-Reiternamen mit einem Unterstrich (_tab_display) voranzustellen, so dass Sie auf den ersten Blick wissen, dass Sie diese überspringen können.

Info:

Eine Sammlung ist ein Feld, dessen Endwert ein Array ist. In Gantry haben wir nur 2 Sammlungen, Liste und Schlüsselwert (Tag Attribute). Ihr seid alle sehr vertraut mit der Liste. Es wird häufig verwendet und ermöglicht die Erstellung von Einstiegspositionen im Handumdrehen.

Wenn Sie eine Sammlung speichern, ist Ihr Wert ein Array und in Ihrer Twig-Vorlage müssen Sie durch dieses Array blättern, um jedes einzelne Element zu extrahieren und Zugriff darauf zu haben. So funktioniert eine Sammlung und wie sie verwendet werden soll, aber sie ist ganz anders als ein Container.

Ein Container ist nur eine strukturelle Definition, die verwendet wird, meist intern, um darzustellen, wie das Feld aussehen soll. Das Portal hatte schon immer einen Container mit dem Namen set. Wir haben es aber nie wirklich benutzt, aber es ist da.

Obwohl die YAML-Struktur des Containers eine verschachtelte Liste ist, wird der Blueprint eigentlich immer nur intern aus dem Twig-Feld durchlaufen, um im Admin tatsächlich so zu rendern, wie Sie es in meinem obigen GIF sehen. Die eigentlichen Felder auf jeder Registerkarte werden weiterhin so gespeichert, als wären sie auf höchster Ebene. Sie sind aus der Sicht von FORM nicht wirklich in Registerkarten verschachtelt.