Wählen Sie den richtigen nativen Eingabestil für Ihre Benutzeroberfläche unter macOS

Moderne Betriebssysteme entwickeln ihre nativen Steuerelemente ständig weiter, um eine einheitlichere und ausgefeiltere Benutzererfahrung zu bieten. Mit der Einführung von „Liquid Glass“ unter macOS erhalten Eingabeobjekte ein neues Erscheinungsbild mit stärker abgerundeten Ecken und mehr Abstand zwischen Text und Rahmen.

Dieser neue Look fügt sich zwar nahtlos in die aktuellen macOS-Oberflächen ein, kann jedoch auch Auswirkungen auf bestehende 4D-Anwendungen haben. Durch den großzügigeren inneren Abstand kann ein Eingabeobjekt höher werden und bei gleicher Breite weniger Text anzeigen.

Ab 4D 21 R5 können Sie diese Änderung mit einem neuen Rahmenstil steuern : „System rounded“.

Zwei native Darstellungen für Eingabeobjekte

Unter macOS bietet Apple zwei native Darstellungen für Eingabeobjekte an: das traditionelle Aussehen mit „eckigen Ecken“ und das neuere Aussehen mit „abgerundeten Ecken“.

4D stellt nun beide Darstellungen über die Eigenschaft „Rahmenstil“ zur Verfügung:

• „System“ behält das traditionelle native Erscheinungsbild der Eingabeobjekte bei.
• „System rounded“ verwendet das neuere, abgerundete Erscheinungsbild mit der vom System definierten Rahmenfarbe und vergrößertem inneren Abstand.

So können Sie das Erscheinungsbild wählen, das zum bestehenden Design Ihrer Anwendung passt.

Da beide Stile verfügbar sind, können Sie das neue Erscheinungsbild schrittweise einführen, anstatt bestehende Formulare sofort neu gestalten zu müssen.

Wählen Sie Ihren Stil

Sie können „System abgerundet“ direkt über die Eigenschaft „Rahmenstil“ eines Eingabeobjekts im Formular-Editor auswählen.

So lässt sich für jedes Formular ganz einfach das passende Erscheinungsbild auswählen, ganz gleich, ob Sie eine bestehende Anwendung aktualisieren oder eine neue entwerfen.

Die gleiche Auswahl steht auch zur Laufzeit zur Verfügung mit OBJECT SET BORDER STYLE.

OBJECT SET BORDER STYLE(*; "myInput"; Border System Rounded)

Sie können den Rahmenstil auch mithilfe von CSS definieren, wodurch es möglich ist, je nach Formular-Thema unterschiedliche native Darstellungen anzuwenden:

@media (form-theme: mac-classic) {
  input {
    borderStyle: system;
  }
}

@media (form-theme: liquid-glass) {
  input {
    borderStyle: systemRounded;
  }
}

Auf diese Weise kannst du automatisch zwischen dem eckigen und dem abgerundeten Erscheinungsbild wechseln, ohne jedes Eingabeobjekt einzeln ändern zu müssen.

Darüber hinaus kannst du diese Rahmenstile mit benutzerdefinierten Abständen kombinieren, um andere native macOS-Steuerelemente nachzuahmen, wie beispielsweise ein Suchfeld im Finder-Stil mit Platz für ein Lupensymbol.

Ein natives Erlebnis auf jeder Plattform

„System rounded“ ist so konzipiert, dass es das native Erscheinungsbild jeder Plattform berücksichtigt.

Unter macOS wird der neue, abgerundete Eingabestil angezeigt.

Unter Windows verwendet „System rounded“ dasselbe native Erscheinungsbild wie „System“. Im klassischen Windows haben Eingabeobjekte eckige Ecken; in der Fluent UI sind ihre Ecken leicht abgerundet.

Sie können „System rounded“ daher in plattformübergreifenden Formularen verwenden, ohne plattformspezifische Logik einführen zu müssen, nur um ein natives Erscheinungsbild beizubehalten.

Ein reibungsloser Übergang zum neuen macOS-Look

Liquid Glass verleiht Eingabeobjekten unter macOS ein neues natives Erscheinungsbild, doch Sie müssen Ihre bestehenden Formulare nicht neu gestalten, um es zu übernehmen.

Mit „System“ und „System rounded“ können Sie den nativen Eingabestil wählen, der am besten zu Ihrer Anwendung passt, und in Ihrem eigenen Tempo auf das neue macOS-Erscheinungsbild umsteigen.

Sind Sie bereit, Ihren Eingabeobjekten ein neues Aussehen zu verleihen? In der Dokumentation erfahren Sie mehr über die neue Eigenschaft für den Rahmenstil und deren Verwendung in Ihren Formularen.