Choisissez le style de saisie natif le mieux adapté à votre interface sous macOS

Les systèmes d’exploitation modernes ne cessent de faire évoluer leurs contrôles natifs afin d’offrir une expérience utilisateur plus cohérente et plus soignée. Avec l’arrivée de Liquid Glass sur macOS, les objets de saisie arborent désormais un nouveau design, avec des coins plus arrondis et un espacement accru entre le texte et le contour.

Si ce nouveau design s’intègre naturellement aux dernières interfaces macOS, il peut également avoir un impact sur les applications 4D existantes. Un espacement intérieur plus généreux signifie qu’un objet de saisie peut devenir plus haut et afficher moins de texte pour une même largeur.

À partir de 4D 21 R5, vous pouvez contrôler ce changement grâce à un nouveau style de bordure : « System rounded ».

Deux styles natifs pour les objets de saisie

Sous macOS, Apple propose deux apparences natives pour les objets de saisie : l’apparence traditionnelle « à angles droits » et la nouvelle apparence « arrondie ».

4D propose désormais ces deux apparences via la propriété de style de bordure:

• « System » conserve l’apparence native traditionnelle des objets de saisie.
• « System rounded » utilise le nouveau style arrondi avec la couleur de bordure définie par le système et un espacement intérieur accru.

Vous pouvez ainsi choisir l’apparence qui correspond le mieux au design existant de votre application.

Le fait de disposer des deux styles vous permet d’adopter progressivement la nouvelle apparence, sans avoir à repenser immédiatement la conception des formulaires existants.

Choisissez votre style

Vous pouvez sélectionner « Système arrondi » directement à partir de la propriété de style de bordure d’un objet de saisie dans l’éditeur de formulaire.

Cela facilite le choix de l’apparence adaptée à chaque formulaire, que vous mettiez à jour une application existante ou que vous en conceviez une nouvelle.

Ce choix est également disponible lors de l’exécution avec OBJECT SET BORDER STYLE.

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

Vous pouvez également définir le style de bordure à l’aide de CSS, ce qui permet d’appliquer différentes apparences natives en fonction du thème du formulaire :

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

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

Cela vous permet de basculer automatiquement entre les apparences carrée et arrondie, sans avoir à modifier chaque objet `input` individuellement.

Pour aller plus loin, vous pouvez combiner ces styles de bordure avec un remplissage personnalisé afin d’imiter d’autres contrôles natifs de macOS, tels qu’un champ de recherche de type Finder laissant de la place pour une icône en forme de loupe.

Une expérience native sur toutes les plateformes

« System rounded » est conçu pour respecter l’apparence native de chaque plateforme.

Sous macOS, il affiche le nouveau style de champ de saisie aux coins arrondis.

Sous Windows, « System rounded » utilise la même apparence native que « System ». Dans Windows Classic, les objets de saisie ont des coins carrés ; dans Fluent UI, leurs coins sont légèrement arrondis.

Vous pouvez donc utiliser « System rounded » dans des formulaires multiplateformes sans avoir à introduire de logique spécifique à une plateforme uniquement pour conserver une apparence native.

Une transition en douceur vers le nouveau look de macOS

Liquid Glass apporte un nouveau style natif aux objets de saisie macOS, mais vous n’avez pas besoin de repenser vos formulaires existants pour l’adopter.

Avec « Système » et « Système arrondi », vous pouvez choisir le style de saisie natif qui convient le mieux à votre application et passer à la nouvelle apparence de macOS à votre rythme.

Prêt à donner un nouveau look à vos objets de saisie ? Consultez la documentation pour en savoir plus sur la nouvelle propriété de style de bordure et sur la manière de l’utiliser dans vos formulaires.