Skip to main content
Skip table of contents

Aspetto pagine

Elenco dei nomi dei campi della tabella «POS UI Setup», che contengono la definizione dei colori in esadecimale, e il loro corrispondente utilizzato nella APP:

Campo in Tabella

Corrispondente nella APP

Primary Color

PRIMARY

Primary Color Variant

PRIMARYVARIANT

On Primary Color

ONPRIMARY

Secondary Color

SECONDARY

Secondary Color Variant

SECONDARYVARIANT

On Secondary Color

ONSECONDARY

Surface Color

SURFACE

On Surface Color

ONSURFACE

Background Color

BACKGROUND

On Background Color

ONBACKGROUND

Error Color

ERROR

On Error Color

ONERROR

Di seguito vengono presentate, come esempio, alcune immagini delle pagine di POSible, configurate in modo da utilizzare la UI standard di POSible, la “UI di default”, con l'impostazione “LIGHT mode” oppure una UI personalizzata, la “Cliente1 UI” con l'impostazione “DARK mode”.

SETTINGS

La pagina SETTINGS compare in automatico dopo aver installato e aperto, per la prima volta, la APP POSible; in seguito la si può visualizzare scegliendo la voce “Impostazioni” nel menu FLYOUT.

Nel primo caso la sua configurazione di colori è definita nel codice di POSible e non può essere modificata dall’utente.

Nel passo 3 di questa pagina è presente la lista a discesa per la scelta del setup di POSible.


LOGIN

La pagina LOGIN appare dalla seconda volta che si attiva la APP POSible.

LIGHT mode (UI di default)

Come si può vedere nell’immagine qui sopra, “Primary Color” configurato in tabella è utilizzato per impostare il colore del font delle etichette (label) attive che identificano i campi di input e per il font dei pulsanti, mentre “On Surface Color“ è utilizzato per il font dei campi di input e per tutte le altre etichette nella pagina.

DARK mode (Cliente1 UI)

In questa configurazione invece il campo “Secondary Color Variant” imposta il colore del font dei pulsanti.


HOMEPAGE

In questa pagina il colore dell’icona dell’indicatore di stato in basso a destra è definito nel codice.

LIGHT mode (UI di default)

Nell’immagine qui sopra “Primary Color” viene utilizzato per colorare la barra del titolo della pagina, mentre “On Primary Color“ è utilizzato per il colore del font del titolo della pagina. Il colore delle barre di stato invece è configurato nel campo “Primary Color Variant”. Per lo sfondo del pulsante che attiva la scansione viene utilizzato il colore definito nel campo “Secondary Color” e “On Secondary Color” per il simbolo in primo piano.

DARK mode (Cliente1 UI)


FLYOUT

In questo menu il colore degli indicatori di stato a fianco alle icone “batteria”, “memoria”, “sincronizzazione tabelle”, “websocket” e dell’icona vicino alla voce «Disconnetti» è definito nel codice.

LIGHT mode (UI di default)

DARK mode (Cliente1 UI)


RICERCA

LIGHT mode (UI di default)

DARK mode (Cliente1 UI)


PRODOTTO

In questa pagina il colore delle icone che indicano la disponibilità e la giacenza è definito nel codice.

LIGHT mode (UI di default)

Nell’immagine qui sopra “Primary Color” viene utilizzato per colorare anche lo sfondo del pulsante “AGGIUNGI AL CARRELLO”, mentre per il colore del font viene utilizzato “On Primary Color“.

DARK mode (Cliente1 UI)

In questa configurazione, per lo sfondo del pulsante “AGGIUNGI AL CARRELLO” viene usato il colore definito in “Secondary Color Variant”, mentre per il colore del font viene utilizzato “On Secondary Color“.


CARRELLO

LIGHT mode (UI di default)

> CARRELLO Scontato (LIGHT mode)

DARK mode (Cliente1 UI)

> CARRELLO Scontato (DARK mode)


SCONTI

LIGHT mode (UI di default)

DARK mode (Cliente1 UI)


FINALIZZA ACQUISTO

LIGHT mode (UI di default)

DARK mode (Cliente1 UI)

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.