Scegli lo stile di input nativo più adatto alla tua interfaccia su macOS

I moderni sistemi operativi continuano a evolvere i propri controlli nativi per offrire un’esperienza utente più coerente e raffinata. Con l’introduzione di Liquid Glass su macOS, gli oggetti di input assumono un nuovo aspetto, caratterizzato da angoli più arrotondati e da una maggiore distanza tra il testo e il bordo.

Sebbene questo nuovo aspetto si integri naturalmente nelle interfacce più recenti di macOS, può anche avere un impatto sulle applicazioni 4D esistenti. Un riempimento interno più ampio comporta che un oggetto di input possa diventare più alto e visualizzare meno testo a parità di larghezza.

A partire da 4D 21 R5, è possibile gestire questa modifica con un nuovo stile di bordo: «System rounded».

Due aspetti nativi per gli oggetti di input

Su macOS, Apple offre due aspetti nativi per gli oggetti di input: il tradizionale aspetto «ad angoli squadrati» e il più recente aspetto «arrotondato».

4D ora rende disponibili entrambi gli stili tramite la proprietà dello stile del bordo:

• «System» mantiene il tradizionale aspetto nativo degli oggetti di input.
• “System rounded” utilizza il nuovo aspetto arrotondato con il colore del bordo definito dal sistema e un maggiore riempimento interno.

Ciò significa che è possibile scegliere l’aspetto che meglio si adatta al design esistente della propria applicazione.

La disponibilità di entrambi gli stili consente di adottare progressivamente il nuovo aspetto, senza dover riprogettare immediatamente i moduli esistenti.

Scegli lo stile

È possibile selezionare “Sistema arrotondato” direttamente dalla proprietà dello stile del bordo di un oggetto di input nell’Editor dei moduli.

In questo modo è facile scegliere l’aspetto giusto per ogni modulo, sia che si stia aggiornando un’applicazione esistente sia che se ne stia progettando una nuova.

La stessa scelta è disponibile anche in fase di esecuzione con OBJECT SET BORDER STYLE.

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

È inoltre possibile definire lo stile del bordo utilizzando i CSS, rendendo così possibile applicare diversi aspetti nativi a seconda del tema del modulo:

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

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

Ciò consente di passare automaticamente dall’aspetto squadrato a quello arrotondato, senza dover modificare singolarmente ogni oggetto di input.

Per andare oltre, puoi combinare questi stili di bordo con un padding personalizzato per imitare altri controlli nativi di macOS, come un campo di ricerca in stile Finder con spazio per l’icona della lente di ingrandimento.

Un’esperienza nativa su ogni piattaforma

“System rounded” è progettato per rispettare l’aspetto nativo di ciascuna piattaforma.

Su macOS, viene visualizzato il nuovo stile di input arrotondato.

Su Windows, “Arrotondato di sistema” utilizza lo stesso aspetto nativo di “Sistema”. In Windows classico, gli oggetti di input hanno angoli squadrati; in Fluent UI, i loro angoli sono leggermente arrotondati.

È quindi possibile utilizzare “Arrotondato di sistema” nei moduli multipiattaforma senza dover introdurre una logica specifica per la piattaforma solo per preservare un aspetto nativo.

Una transizione fluida al nuovo look di macOS

Liquid Glass conferisce un nuovo aspetto nativo agli oggetti di input di macOS, ma non è necessario riprogettare i moduli esistenti per adottarlo.

Con “System” e “System rounded”, è possibile scegliere lo stile di input nativo che meglio si adatta alla propria applicazione e passare al nuovo aspetto di macOS secondo i propri ritmi.

Pronti a dare un nuovo look ai vostri oggetti di input? Consultate la documentazione per saperne di più sulla nuova proprietà dello stile del bordo e su come utilizzarla nei vostri moduli.