Uikit Layouts

Uikit Layouts

Hinweis: Diese Feature sind Teil der Visforms Subscription und in der freien Visforms Version nicht enthalten.

Flexible, responsive Formulare

Das Uikit ist ein weit verbreitetes UI-Framework, das in vielen Joomla Templates eingesetzt wird. Mit einem “Mobile First” Ansatz bietet es die M√∂glichkeit extrem flexible responsive Layouts umzusetzen. Die Visforms Layouts Uikit2 und Uikit3 liefern HTML, das mit dem Uikit2 bzw. Uikit3 UI-Framework kompatible ist. Wenn Sie diese Layouts nutzen wollen, ben√∂tigen Sie ein entsprechendes Uikit Template.

Die Uikit Layouts f√ľr Visforms bieten Ihnen die M√∂glichkeit, die gesamte Palette der Gestaltungsm√∂glichkeiten dieser Frameworks auszusch√∂pfen. Insbesondere kommen mit den Uikit Layouts f√ľr Visforms einige weitere Gestaltungsoptionen f√ľr Ihre Formulare hinzu, die mit den anderen Visforms Layouts nicht zur Verf√ľgung stehen.

Diese sind:

  • Tipp-Text wird als Tooltip √ľber dem Control und nicht dem Feldlabel angezeigt.
  • Feldlabel kann f√ľr alle Feldtypen versteckt werden.
  • Captcha Label kann versteckt werden.
  • Bei der Verwendung von mehrseitigen Formularen k√∂nnen die zus√§tzlichen Buttons, die nur in mehrseitigen Formularen vorhanden sind (Korrektur-Button, Zur√ľck-Button, Pr√ľfen-Button) mit einer eigenen CSS Klasse versehen werden.
    Das ermöglicht ein einfaches Stylen der Buttons.
  • In der Daten-Bearbeiten-Ansicht im Frontend k√∂nnen zus√§tzliche Buttons, die nur in dieser Ansicht vorhanden sind (Speicher-Button, Abbrechen-Button) mit einer eigenen CSS Klasse versehen werden.
    Das ermöglicht ein einfaches Stylen der Buttons.
  • Alle Fehlermeldungen werden nicht als Popup angezeigt, sondern unterhalb des Eingabefeldes.

Uikit Layouts aktivieren

  • Gehen Sie in der Formularkonfiguration auf den Reiter “Erweitert”.
  • Unter der Zwischen√ľberschrift “Layout” finden Sie die Option “UI Framework”.
  • W√§hlen Sie dort den Wert “Uikit2” oder “Uikit3” aus.

Anschlie√üend wird Ihnen eine neue Option “Sublayout” angezeigt, in der Sie zwischen 3 Ausf√ľhrungen des Bootstrap 4 Layouts w√§hlen k√∂nnen:

  • Gestapelt
  • Horizontal
  • Individuell

Uikit2 Layout wählen

UIkit 2 Layouts

Uikit3 Layout wählen

Uikit3 Layouts

Sublayout wählen

Sublayout wählen

Gestapelt Layout

In dieser Ausf√ľhrung des Uikit Layouts wird das Feldlabel in einer Zeile oberhalb des Eingabefeldes angezeigt.
Fehlermeldungen werden unterhalb des Eingabefeldes angezeigt.

Benutzerdefinierte Texte können

  • oberhalb des Labels,
  • zwischen Label und Eingabefeld oder
  • unterhalb des Eingabefeldes angezeigt werden.

Falls eine Fehlermeldung vorhanden ist, steht der Text unterhalb der Fehlermeldung.
Das Feldlabel kann auch komplett unterdr√ľckt werden.

Horizontal Layout

In dieser Ausf√ľhrung des Uikit Layouts wird das Feldlabel stets in einer Zeile mit dem Eingabefeld angezeigt.

Im uikit2 erh√§lt das Label ein 3/10 des zur Verf√ľgung stehenden Platzes, das Eingabefeld 7/10.
Im uikit3 erhält das Label 1/3 des Platzes, das Eingabefeld 2/3. Fehlermeldungen werden unterhalb des Eingabefeldes angezeigt.

Benutzerdefinierte Texte können angezeigt werden

  • oberhalb oder
  • unterhalb des Eingabefeldes.

Falls eine Fehlermeldung vorhanden ist, steht der Text unterhalb der Fehlermeldung.
Die Anzeige des Feldlabels kann auch unterdr√ľckt werden. Der f√ľr das Label bereitgestellt Platz bleibt in diesem Fall leer.

Individuell Layout

Das individuelle Layout ist sehr anpassungsfähig und ermöglicht es Ihnen flexibel Formulare mit sehr gutem responsivem Verhalten zu erstellen.

Wenn Sie die individuelle Ausf√ľhrung des Uikit Layouts w√§hlen, k√∂nnen Sie

  • die Feldlabel verstecken und
  • den Platz entfernen, der im horizontalen Layout f√ľr das Label reserviert ist.
    Das Eingabefeld wird dann ganz links angezeigt.

Insbesondere können Sie festlegen:

  • Wie breit das gesamte Formularfeld relativ zur vorhandenen Bildschirmbreite ist.
    Das gesamte Formularfeld umfasst Label, Eingabefeld, Benutzerdefiniertem Text und Fehlermeldung.
    Dies steuert indirekt, wie viele Felder nebeneinander in einer Reihe angezeigt werden.
  • Wie viel Platz das Feldlabel innerhalb des Raums einnimmt, der dem gesamten Feld zugeteilt wurde.
    Genauer ist damit gemeint, wie breit das Feldlabel im Verhältnis zu dem gesamten Feld prozentual ist.

Hierbei haben Sie die M√∂glichkeit f√ľr unterschiedliche Device-Gr√∂√üen, unterschiedliche Vorgaben zu machen.

Damit können Sie etwa folgende Unterschiede erzeugen

  • auf einem gro√üen Desktop 3 Felder nebeneinander anzeigen,
  • auf einem mobilen Tablett 2 Felder and
  • auf einem mobilen Smartphone nur ein Feld pro Reihe.

Diese Möglichkeiten ergeben sich automatisch aus der Art und Weise, wie Bootstrap 4/5 das responsive Verhalten implementiert.

Weiterhin k√∂nnen Sie allein durch entsprechende Wahl der prozentualen Breite f√ľr das Feldlabel f√ľr jedes Feld individuell folgendes steuern.

  • Wird das Label in einer Zeile mit dem Eingabefeld angezeigt, oder
  • erscheint das Label oberhalb des Eingabefeldes.

Vergeben Sie f√ľr die Feldlabel-Breite einen Wert, der weniger als 100¬†% der zur Verf√ľgung stehenden Breite entspricht. Dann wird die Breite des Eingabefeldes so berechnet, dass Label und Eingabefeld zusammen die gesamte Breite ausf√ľllen.

Vergeben Sie f√ľr die Feldlabel-Breite einen Wert, der 100¬†% der zur Verf√ľgung stehenden Breite entspricht. Dann wird das Eingabefeld unterhalb des Labels platziert.

Benutzerdefinierte Texte und Fehlermeldungen werden immer linksb√ľndig mit dem Eingabefeld angezeigt. Dies l√§sst das Formular immer ordentlich ausgerichtet aussehen.

Sie finden direkt in der Feldkonfiguration ausf√ľhrliche Erl√§uterungen zu allen Optionen, mit denen Sie im individuellen Layout ein in h√∂chstem Ma√üe responsives Formular erstellen k√∂nnen.

Individuelle Konfiguration am Beispiel des Uikit2

Mehrspaltiges Uikit2 Layout MUikit2 responsives Layout

CSS Klassen f√ľr Button vergeben

Uikits kennen spezielle CSS Klassen, um Buttons zu formatieren, unter anderem

  • uk-button und
  • uk-button-primary.

Standardm√§√üig f√ľgt Visforms den Buttons sinnvolle CSS Klassen hinzu, damit diese farblich gestaltet werden. Wenn Ihnen diese Farben nicht gefallen oder wenn die entsprechenden Klassen im CSS Ihres Templates nicht implementiert sind, haben Sie die folgende einfache M√∂glichkeit der Anpassung.

Verwenden Sie folgende CSS-Klassen Optionen, um die jeweiligen Buttons nach Ihren W√ľnschen frei zu gestalten:

  • in der Formularkonfiguration oder
  • in der Feldkonfiguration f√ľr Felder vom Type “Submit” oder “Reset”.