Interaktive Farbfelder interactive-swatches

Das Bedienfeld Interaktive Farbfelder wird neben dem Videoinhalt angezeigt, wenn in der -Konfiguration interaktive Daten an den Viewer übergeben wurden. Es besteht aus einem Banner oben, das Text rendert, z. B. „Click to View“, eine Spalte mit einem oder mehreren interaktiven Farbfeldern und zwei Bildlaufschaltflächen (nur auf Desktop-Systemen verfügbar).

Auf Desktop-Systemen und auf Touch-Geräten werden interaktive Farbfelder in Querformat vertikal rechts neben dem Videoinhalt gerendert. Auf Touch-Geräten in Hochformat werden sie am unteren Rand des Viewers als horizontale Reihe von Farbfeldern angezeigt.

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

.s7interactivevideoviewer .s7interactiveswatches

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

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

Es ist möglich, CSS-Markierungen mit diesem Stil zu verwenden, um eine adaptive Platzierung des interaktiven Farbfeldbedienfelds zu erzielen.

Beispiel example

So richten Sie ein interaktives Farbfeld ein, das auf Touch-Geräten im Querformat horizontal am unteren Rand des Viewers gerendert wird. Und , um sie 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;
}

Die Größe und Position des Banners werden von der interaktiven Farbfeld-Komponente auf der Grundlage anderer Stile verwaltet, die mit CSS angewendet werden, und können nicht explizit festgelegt werden.

Der folgende CSS-Klassenselektor steuert die Darstellung des Bannerbereichs:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

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

Die QuickInfo des Banners kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel section-e8caea0a303c425a8a637c2a47c06355

So richten Sie ein Banner mit dunkelgrauem Hintergrund, einem hellgrauen Rahmen mit zwei Pixeln und einem horizontal zentrierten weißen Text ein:

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

Der folgende CSS-Klassenselektor steuert die Darstellung der Farbfelder:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

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

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 Musterminiaturen:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

CSS-Eigenschaften der Miniaturansichten des Farbfelds css-properties-of-the-swatches-thumbnail-spacing

Beispiel section-39fb270b7e494a9d99e6e8f6890ec53c

So legen Sie einen vertikalen Abstand von 10 Pixeln fest:

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

Der folgende CSS-Klassenselektor steuert die Darstellung einzelner Miniaturen:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

CSS-Eigenschaften der Darstellung einzelner Miniaturen css-properties-of-the-appearance-of-individual-thumbnails

Beispiel section-69fec189ffaa440b97b6b846c320b75b

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

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

Der folgende CSS-Klassenselektor steuert die Darstellung der Miniaturbildbeschriftung:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

CSS-Eigenschaften der Darstellung der Miniaturbildbeschriftung css-properties-of-the-appearance-of-the-thumbnail-label

Beispiel section-eb141eb6c1154183baa69796edb90536

So richten Sie Beschriftungen für die Verwendung von linksbündig, weiß, 12 Pixel, in der Helvetica®-Schriftart und mit einem unteren Rahmen 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 die Darstellung der Schaltflächen für den Bildlauf nach oben und unten:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

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

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

Die QuickInfos für die Schaltfläche können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel section-e6ce4fa084b84288bc7583342b2c510c

Um eine Bildlaufschaltfläche einzurichten, die 60 x 36 Pixel groß ist, weisen für jeden Status unterschiedliche Grafiken auf und nehmen diese Grafiken 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; }