Campioni interattivi interactive-swatches

Il pannello campioni interattivi viene visualizzato accanto al contenuto video se i dati interattivi sono stati passati al visualizzatore nella configurazione. È costituito da un banner nella parte superiore che esegue il rendering del testo, ad esempio "Fai clic per visualizzare", una colonna di uno o più campioni interattivi e due pulsanti di scorrimento (disponibili solo sui sistemi desktop).

Sui sistemi desktop e sui dispositivi touch, in orientamento orizzontale, i campioni interattivi vengono riprodotti verticalmente a destra del contenuto video. Sui dispositivi touch con orientamento verticale, vengono visualizzati nella parte inferiore del visualizzatore, come una riga orizzontale di campioni.

Il seguente selettore di classe CSS controlla la posizione e l’orientamento del pannello dei campioni interattivi:

.s7interactivevideoviewer .s7interactiveswatches

Proprietà CSS dei campioni interattivi css-properties-of-the-interactive-swatches

larghezza
Larghezza del pannello dei campioni interattivi
altezza
Altezza del pannello dei campioni interattivi.
primi
Posizione superiore del pannello dei campioni interattivi.
in basso
Posizione inferiore del pannello dei campioni interattivi.
ha lasciato
Posizione sinistra del pannello dei campioni interattivi.
a destra
Posizione destra nel pannello dei campioni interattivi.

La posizione in fase di esecuzione e l’orientamento del pannello dei campioni interattivi sono definiti da una combinazione delle proprietà CSS sopra riportate, come segue:

  • Per eseguire il rendering orizzontale dei campioni interattivi nella parte inferiore del visualizzatore, impostate l'altezza su un valore in pixel assoluto; sinistra e inferiore su 0 px; larghezza, destra e superiore su auto.
  • Per eseguire il rendering dei campioni interattivi in verticale a destra del contenuto video, imposta la larghezza su un pixel assoluto; da destra e dall'alto a 0 px; da altezza, da sinistra e dal basso a automatico.

Con questo stile è possibile utilizzare marcatori CSS per ottenere il posizionamento adattivo del pannello dei campioni interattivo.

Esempio example

Impostare un pannello di campioni interattivo per il rendering orizzontale nella parte inferiore del visualizzatore sui dispositivi touch con orientamento orizzontale. E, per mostrarlo verticalmente a destra del contenuto video in tutti gli altri casi:

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
 width:120px;
 height:auto;
 right:0px;
 top:0px;
 left:auto;
 bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
 width:auto;
 height:136px;
 right:auto;
 top:auto;
 left:0px;
 bottom:0px;
}

Le dimensioni e la posizione del banner vengono gestite dal componente campioni interattivi in base ad altri stili applicati con gli stili CSS e non possono essere impostate in modo esplicito.

Il seguente selettore di classe CSS controlla l'aspetto del pannello del banner:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

Proprietà CSS del pannello banner css-properties-of-the-banner-panel

colore di sfondo
Colore di sfondo del pannello del banner.
colore
Colore del testo nel pannello del banner.
bordo
Bordo intorno al pannello del banner.
font-weight
Spessore del font da utilizzare per il testo all'interno del pannello del banner.
font-size
Dimensione font da utilizzare per il testo all'interno del pannello del banner.
famiglia di caratteri
Famiglia di font da utilizzare per il testo all'interno del pannello del banner.
allineamento font
Allineamento del font da utilizzare per il testo all'interno del pannello del banner.

La descrizione del banner può essere localizzata. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio section-e8caea0a303c425a8a637c2a47c06355

Per impostare un banner con sfondo grigio scuro, bordo grigio più chiaro di due pixel e testo bianco centrato orizzontalmente:

.s7interactivevideoviewer .s7interactiveswatches .s7banner {
    background-color: #222222;
    border-bottom: 2px solid #444444;
    color: #ffffff;
    text-align: center;
}

Il seguente selettore di classe CSS controlla l’aspetto dei campioni:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

Proprietà CSS dell'area campioni css-properties-of-the-swatches-area

colore di sfondo
Colore di sfondo dell'area dei campioni.

Esempio section-9cadd62a09fd44a280f55ff42437e416

Per impostare l'area dei campioni con sfondo grigio scuro:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
    background-color: #222222;
}

Il seguente selettore di classe CSS controlla la spaziatura tra le miniature dei campioni:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

Proprietà CSS per la spaziatura delle miniature dei campioni css-properties-of-the-swatches-thumbnail-spacing

margine
Dimensione del margine orizzontale e verticale intorno a ciascuna miniatura. La spaziatura effettiva delle miniature è uguale alla somma dei margini sinistro e destro impostati per .s7thumbcell .

Esempio section-39fb270b7e494a9d99e6e8f6890ec53c

Per impostare la spaziatura verticale su dieci pixel:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
 margin: 5px;
}

Il seguente selettore di classe CSS controlla l’aspetto delle singole miniature:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

Proprietà CSS dell'aspetto delle singole miniature css-properties-of-the-appearance-of-individual-thumbnails

larghezza
Larghezza della miniatura.
altezza
Altezza della miniatura.
bordo
Bordo della miniatura.
NOTE
La miniatura supporta il selettore di attributi state, che è possibile utilizzare per applicare interfacce diverse a stati di miniatura diversi. In particolare, state="selected" corrisponde alla miniatura per l'immagine attualmente selezionata; state="default" corrisponde al resto delle miniature; state="over" viene utilizzato al passaggio del mouse.

Esempio section-69fec189ffaa440b97b6b846c320b75b

Per impostare miniature di 100 x 75 pixel:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
 width:100px;
 height:75px;
}

Il seguente selettore di classe CSS controlla l’aspetto dell’etichetta della miniatura:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

Proprietà CSS dell’aspetto dell’etichetta della miniatura css-properties-of-the-appearance-of-the-thumbnail-label

colore
Colore testo.
bordo
Bordo etichetta.
allinea testo
Allineamento orizzontale del testo.
famiglia di caratteri
Nome font.

Esempio section-eb141eb6c1154183baa69796edb90536

Per impostare le etichette in modo da utilizzare caratteri Helvetica® bianchi, allineati a sinistra e con 12 pixel e un bordo inferiore:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
 border-bottom: 1px solid #e9e9e9;
 text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}

Il seguente selettore di classe CSS controlla l'aspetto dei pulsanti di scorrimento verso l'alto e verso il basso:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

Non è possibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS top, left, bottom e right, ma la logica del visualizzatore li posiziona automaticamente.

Proprietà CSS dell'aspetto dei pulsanti di scorrimento verso l'alto e verso il basso css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons

larghezza
Larghezza del pulsante di scorrimento.
altezza
Altezza del pulsante di scorrimento.
immagine di sfondo
Immagine visualizzata per un determinato stato del pulsante.
background-position

La posizione all'interno dello sprite del disegno, se vengono utilizzati sprite CSS.

Vedere anche sprite CSS.

NOTE
Questo pulsante supporta il selettore di attributi state, che è possibile utilizzare per applicare interfacce diverse agli stati dei pulsanti: " up", " down", " over" e " disabled".

Le descrizioni dei pulsanti possono essere localizzate. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio section-e6ce4fa084b84288bc7583342b2c510c

Per impostare un pulsante di scorrimento verso l'alto di 60 x 36 pixel, avere un disegno diverso per ciascuno stato e prendere tale disegno dall'immagine di sprite del componente:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
 background-size: 120px;
 width: 60px;
 height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
 background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8