Elige el estilo de entrada nativo adecuado para tu interfaz en macOS

Los sistemas operativos modernos siguen evolucionando sus controles nativos para ofrecer una experiencia de usuario más coherente y pulida. Con la introducción de Liquid Glass en macOS, los objetos de entrada adquieren un nuevo aspecto, con esquinas más redondeadas y mayor espacio entre el texto y el borde.

Aunque este nuevo aspecto encaja de forma natural en las últimas interfaces de macOS, también puede afectar a las aplicaciones 4D existentes. Un relleno interior más amplio hace que un objeto de entrada pueda ser más alto y mostrar menos texto con el mismo ancho.

A partir de 4D 21 R5, puedes controlar este cambio con un nuevo estilo de borde: «System rounded».

Dos estilos nativos para los objetos de entrada

En macOS, Apple ofrece dos estilos nativos para los objetos de entrada: el aspecto tradicional de «esquinas cuadradas» y el más reciente de «esquinas redondeadas».

4D ahora ofrece ambos estilos a través de la propiedad de estilo de borde:

• «System» mantiene el aspecto nativo tradicional de los objetos de entrada.
• «System rounded» utiliza el aspecto redondeado más reciente con el color de borde definido por el sistema y un mayor relleno interior.

Esto significa que puedes elegir el aspecto que mejor se adapte al diseño actual de tu aplicación.

Disponer de ambos estilos te permite adoptar el nuevo aspecto de forma progresiva, en lugar de tener que rediseñar los formularios existentes de inmediato.

Elige tu estilo

Puedes seleccionar «Sistema redondeado» directamente desde la propiedad de estilo de borde de un objeto de entrada en el Editor de formularios.

Esto facilita la elección de la apariencia adecuada para cada formulario, tanto si está actualizando una aplicación existente como si está diseñando una nueva.

Esta misma opción también está disponible en tiempo de ejecución con OBJECT SET BORDER STYLE.

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

También puedes definir el estilo de borde mediante CSS, lo que permite aplicar diferentes aspectos nativos en función del tema del formulario:

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

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

Esto te permite alternar automáticamente entre el aspecto cuadrado y el redondeado, sin tener que modificar cada objeto de entrada por separado.

Para ir más allá, puedes combinar estos estilos de borde con un relleno personalizado para imitar otros controles nativos de macOS, como un campo de búsqueda al estilo del Finder con espacio para un icono de lupa.

Una experiencia nativa en todas las plataformas

«System rounded» está diseñado para respetar el aspecto nativo de cada plataforma.

En macOS, muestra el nuevo estilo de entrada redondeado.

En Windows, «Redeondado del sistema» utiliza el mismo aspecto nativo que «Sistema». En Windows clásico, los objetos de entrada tienen esquinas cuadradas; en Fluent UI, sus esquinas están ligeramente redondeadas.

Por lo tanto, puedes utilizar «System rounded» en formularios multiplataforma sin tener que introducir lógica específica de cada plataforma solo para conservar una apariencia nativa.

Una transición fluida al nuevo aspecto de macOS

Liquid Glass aporta un nuevo aspecto nativo a los objetos de entrada de macOS, pero no es necesario rediseñar los formularios existentes para adoptarlo.

Con «Sistema» y «Sistema redondeado», puedes elegir el estilo de entrada nativo que mejor se adapte a tu aplicación y realizar la transición al nuevo aspecto de macOS a tu propio ritmo.

¿Listo para darle un nuevo aspecto a tus objetos de entrada? Echa un vistazo a la documentación para obtener más información sobre la nueva propiedad de estilo de borde y cómo utilizarla en tus formularios.