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.
Impostazioni Comuni
Tipo di Vista
Vista Sovrapposta
Le viste sovrapposte fluttuano sopra altri contenuti su un sito web. Possono essere posizionate al centro dello schermo o lungo il bordo della pagina.
Le viste sovrapposte possono avere un 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 focalizzata.
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 un Selettore CSS.
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
L'incorporamento funziona in modo simile alla funzione del browser document.querySelector.
Ci possono essere situazioni in cui si desidera avere più selettori. Ad esempio, si dispone di un widget che viene mostrato sia su un sito desktop che mobile con 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.
Si consiglia di testare il tuo incorporamento sia su desktop che su mobile utilizzando uno strumento come la Modalità Dispositivo di Chrome.
Modalità di Incorporamento
Determina dove la vista è incorporata in relazione al contenitore di incorporamento. Le opzioni includono:
- Prependi All'interno - Inserisce la vista all'interno del contenitore di incorporamento prima di qualsiasi altro contenuto.
- Appendi All'interno - Inserisce la vista all'interno del contenitore di incorporamento dopo qualsiasi altro contenuto.
- Inserisci Prima - Inserisce la vista all'esterno del contenitore di incorporamento prima di esso.
- Inserisci Dopo - Inserisce la vista dopo il contenitore di incorporamento.
Tempistica di Incorporamento
L'impostazione Tempistica di Incorporamento controlla come un componente Vista si inserisce nel suo contenitore di incorporamento sulla pagina.
Immediata (predefinito) - Inserisce la Vista nel contenitore di incorporamento non appena il widget viene eseguito. Utilizza questa opzione quando il contenitore di incorporamento è garantito esistere già sulla pagina al momento del caricamento.
Attendi Elemento - Attende che l'elemento del contenitore di incorporamento esista nel DOM, quindi inserisce la Vista una volta che appare. Utilizza questa opzione quando il contenitore di incorporamento viene aggiunto dinamicamente — ad esempio da un altro script, un CMS o un routing lato client.
Quando Corrispondono Più Elementi
Per le viste incorporate, questo determina quale elemento utilizzare come target di incorporamento quando più elementi sono corrispondenti al selettore di incorporamento.
- Usa la Prima Corrispondenza - Utilizza il primo elemento corrispondente al selettore.
- Usa l'Ultima Corrispondenza - Utilizza l'ultimo elemento corrispondente al selettore.
Dimensionamento dell'Incorporamento
Altezza Fissa (predefinito) - La vista viene renderizzata all'altezza esatta in cui è definita.
Rapporto - Per le viste che utilizzano una larghezza e un'altezza di dimensioni fisse, questa opzione mantiene il rapporto tra la larghezza/altezza inizialmente definite e scala (riduce o ingrandisce) la vista per riempire il contenitore di incorporamento a questo rapporto di visualizzazione.
Altezza del Wrapper 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 può essere specificata un'altezza specifica.
Ad esempio, questo consentirebbe di incorporare e centrare verticalmente una vista in una parte della pagina rendendo l'altezza del wrapper maggiore dell'altezza della vista.
Z-Index
La proprietà z-index consente di sovrascrivere la posizione di impilamento della vista rispetto ad altri contenuti sulla pagina.
Per alcuni siti web potrebbe essere necessario specificare un valore elevato per z-index per garantire che la vista appaia sopra altri contenuti sulla pagina.
Transizioni
Le viste possono essere configurate per transizionare sullo schermo quando visualizzate.
Le transizioni vengono saltate quando una vista passa a un'altra utilizzando l'azione Passa a Vista. Questo viene fatto per consentire il caso d'uso comune in cui un widget avrà più viste che agiscono come schermate successive, come nel template del widget Offer Flyout.