Interaktive Muster interactive-swatches

Das interaktive Bedienfeld "Muster"wird neben dem Videoinhalt angezeigt, wenn interaktive Daten in der Konfiguration an den Viewer übergeben wurden. Es besteht aus einem Banner oben, das Text wie "Click to View", eine Spalte mit mindestens einem interaktiven Farbfeld und zwei Bildlauftasten (nur auf Desktop-Systemen verfügbar) rendert.

Auf Desktop-Systemen und Touch-Geräten werden interaktive Muster im Querformat vertikal rechts neben dem Videoinhalt gerendert. Auf Touch-Geräten mit Hochformatausrichtung werden sie unten im Viewer als horizontale Zeile mit Farbfeldern angezeigt.

Der folgende CSS-Klassenselektor steuert die Position und Ausrichtung des interaktiven Bedienfelds "Muster":

.s7interactivevideoviewer .s7interactiveswatches

CSS-Eigenschaften der interaktiven Muster css-properties-of-the-interactive-swatches

width
Breite des interaktiven Farbfeldbedienfelds
height
Höhe des interaktiven Farbfeldbedienfelds.
Anfang
Position am oberen Rand des interaktiven Bedienfelds "Muster".
unten
Untere Position des interaktiven Bedienfelds "Muster".
links
Linke Position des interaktiven Bedienfelds "Muster".
rechts
Die rechte Position des interaktiven Bedienfelds "Muster".

Die Laufzeitposition und -ausrichtung des interaktiven Bedienfelds wird durch eine Kombination der oben genannten CSS-Eigenschaften wie folgt definiert:

  • Um interaktive Muster horizontal am unteren Rand des Viewers zu rendern, legen Sie die Höhe auf einen absoluten Pixelwert fest. von links und von unten nach 0px; width, right und top to auto.
  • Um interaktive Muster vertikal rechts neben dem Videoinhalt zu rendern, legen Sie die Breite auf ein absolutes Pixel fest. von rechts und von oben bis 0px; Höhe, links und unten bis Auto.

Es ist möglich, CSS-Markierungen mit diesem Stil zu verwenden, um eine adaptive Platzierung des interaktiven Bedienfelds "Muster"zu erreichen.

Beispiel example

So richten Sie ein interaktives Bedienfeld für Muster ein, das am unteren Rand des Viewers auf Touch-Geräten horizontal im Querformat dargestellt wird. Und um ihn in allen anderen Fällen vertikal rechts neben dem Videoinhalt anzuzeigen:

.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;
}

Größe und Position des Banners werden von der interaktiven Farbfeldkomponente verwaltet, die auf anderen Stilen basiert, die mit CSS angewendet werden, und können nicht explizit festgelegt werden.

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild des Bannerbereichs:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

CSS-Eigenschaften des Bannerbedienfelds css-properties-of-the-banner-panel

background-color
Hintergrundfarbe des Bannerbedienfelds.
color
Textfarbe im Bannerbereich.
rand
Rand um das Bannerbedienfeld herum.
Schriftstärke
Die Schriftstärke für den Text im Bannerbereich.
Schriftgröße
Die Schriftgröße, die für den Text im Bannerbereich verwendet werden soll.
Schriftfamilie
Die Schriftfamilie, die für den Text im Bannerbereich verwendet werden soll.
font-align
Die Schriftausrichtung für den Text im Bannerbereich.

Die Banner-QuickInfo kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

Beispiel section-e8caea0a303c425a8a637c2a47c06355

Um ein Banner mit dunkelgrauem Hintergrund einzurichten, verwenden Sie einen helleren, zwei Pixel langen Rahmen und den horizontal zentrierten weißen Text:

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

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Muster:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

CSS-Eigenschaften des Farbfeldbereichs css-properties-of-the-swatches-area

background-color
Hintergrundfarbe des Farbfeldbereichs.

Beispiel section-9cadd62a09fd44a280f55ff42437e416

So richten Sie einen Farbfeldbereich mit dunkelgrauem Hintergrund ein:

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

Der folgende CSS-Klassenselektor steuert den Abstand zwischen Musterminiaturansichten:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

CSS-Eigenschaften des Farbfeldminiaturenabstands css-properties-of-the-swatches-thumbnail-spacing

margin
Die Größe des horizontalen und vertikalen Rands um jede Miniaturansicht. Der tatsächliche Miniaturansichtabstand entspricht der Summe des linken und rechten Rands, der für .s7thumbcell festgelegt wurde.

Beispiel section-39fb270b7e494a9d99e6e8f6890ec53c

So legen Sie einen vertikalen Abstand von zehn Pixel fest:

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

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild einzelner Miniaturansichten:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

CSS-Eigenschaften des Erscheinungsbilds einzelner Miniaturansichten css-properties-of-the-appearance-of-individual-thumbnails

width
Breite der Miniaturansicht.
height
Höhe der Miniaturansicht.
rand
Rand der Miniaturansicht.
NOTE
Miniaturansicht unterstützt die Attributauswahl state, mit der Sie verschiedene Skins auf verschiedene Miniaturansichten anwenden können. Insbesondere state="selected" entspricht der Miniaturansicht für das aktuell ausgewählte Bild; state="default" entspricht dem Rest der Miniaturansichten; state="over" wird beim Bewegen der Maus verwendet.

Beispiel section-69fec189ffaa440b97b6b846c320b75b

So richten Sie Miniaturansichten mit einer Größe von 100 x 75 Pixel ein:

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

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Miniaturansichtsbeschriftung:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

CSS-Eigenschaften des Erscheinungsbilds der Bezeichnung der Miniaturansicht css-properties-of-the-appearance-of-the-thumbnail-label

color
Textfarbe.
rand
Beschriftungsrahmen
text-align
Horizontale Textausrichtung.
Schriftfamilie
Schriftname.

Beispiel section-eb141eb6c1154183baa69796edb90536

So richten Sie Beschriftungen für linksbündig, weiß, 12 Pixel in der Helvetica®-Schriftart und einen unteren Rand ein:

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

Der folgende CSS-Klassenselektor steuert das Erscheinungsbild der Bildlaufschaltflächen nach oben und unten:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

Es ist nicht möglich, die Bildlauftasten mithilfe der CSS-Eigenschaften top, left, bottom und right zu positionieren. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

CSS-Eigenschaften des Erscheinungsbilds der Bildlaufschaltflächen nach oben und unten css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons

width
Breite der Bildlaufschaltfläche.
height
Höhe der Bildlaufschaltfläche.
background-image
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.
background-position

Die Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.

Siehe auch CSS-Sprites.

NOTE
Diese Schaltfläche unterstützt den Attributselektor state , mit dem Sie verschiedene Skins auf die Schaltflächenzustände anwenden können: " up", " down", " over"und " disabled".

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

Beispiel section-e6ce4fa084b84288bc7583342b2c510c

Um eine Bildlaufschaltfläche von 60 x 36 Pixel einzurichten, verwenden Sie für jeden Status ein anderes Bildmaterial und nehmen dieses Bildmaterial aus dem Sprite-Bild der Komponente:

.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