Vista
Le Viste agiscono come pagine per i tuoi widget.
- Ogni widget deve avere almeno una vista.
- I widget hanno sempre una vista iniziale, che è la vista visualizzata quando il widget appare per la prima volta.
Tipi di Vista
Vista Overlay
Le viste overlay fluttuano sopra altri contenuti di un sito web. Possono essere posizionate al centro dello schermo o lungo il bordo della pagina.
Le viste overlay possono avere uno sfondo opzionale, che si trova dietro la vista coprendo l'intera pagina. Questo può essere utilizzato per oscurare o schiarire la pagina in modo che la vista sia visivamente messa a fuoco.
Vista Incorporata
Una vista incorporata viene inserita in una sezione specifica di una pagina. La vista occuperà spazio sulla pagina e influenzerà il flusso e il layout di altri elementi.
Selettore di Incorporamento
Il punto di inserimento per la vista è specificato come CSS Selector.
Ad esempio, il selettore #banner_container potrebbe essere utilizzato per mirare la sezione nel seguente documento HTML:
<!doctype html>
<html>
<head>
...
</head>
<body>
...
<div id="banner_container">...</div>
...
</body>
</html>Precedenza del Selettore di Incorporamento
INFO
L'incorporamento funziona in modo simile alla funzione del browser document.querySelector.
Potrebbero esserci situazioni in cui si desidera avere più selettori. Ad esempio, si ha un widget che viene mostrato sia su un sito desktop che mobile che ha un HTML diverso.
Esempio di selettore di incorporamento: #desktop-wrapper, .mobile-embed.
Questo troverebbe #desktop-wrapper o .mobile-embed, a seconda di quale appare per primo nel documento. Se appare solo uno di essi, anche questo è valido ed è dove apparirà il tuo incorporamento.
WARNING
Si consiglia di testare il tuo incorporamento sia su desktop che su mobile utilizzando strumenti come Chrome's Device Mode.
Modalità di Incorporamento
Le viste incorporate vengono aggiunte all'inizio o aggiunte alla fine della parte della pagina a cui sono destinate. Questo inserisce la vista prima o dopo qualsiasi altro contenuto già esistente nella sezione.
Altezza del Contenitore di Incorporamento
Le viste incorporate vengono create all'interno di un elemento "wrapper", prima di essere inserite nella pagina. Per impostazione predefinita, questo elemento wrapper assume automaticamente l'altezza della vista stessa, ma è possibile specificare un'altezza specifica.
Ad esempio, ciò consentirebbe di incorporare e centrare verticalmente una vista in una parte della pagina rendendo l'altezza del wrapper maggiore di quella della vista.
Z-Index
La proprietà z-index consente di sovrascrivere la posizione di impilamento della vista rispetto ad altri contenuti della pagina.
INFO
Per alcuni siti web potrebbe essere necessario specificare un valore elevato per z-index per garantire che la vista appaia sopra altri contenuti della pagina.
Transizioni
Le viste possono essere configurate per eseguire una transizione sullo schermo quando visualizzate.
INFO
Le transizioni vengono ignorate quando una vista passa a un'altra utilizzando l'azione Switch to View. Questo viene fatto per consentire il caso d'uso comune in cui un widget avrà più viste che agiscono come schermate successive, come nel modello di widget Offer Flyout.