DokumentationDynamic Media Viewer-Referenzhandbuch

Anzeige einstellen set-indicator

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Entwickler
  • Benutzende

Set Indicator ist eine Reihe von Punkten, die auf Hauptmustern gerendert werden, wenn ein Viewer auf einem Touch-Gerät verwendet wird. Die Punkte helfen Benutzern, durch Seiten von Miniaturansichten zu navigieren, wenn keine Bildlaufschaltflächen verfügbar sind.

CSS-Eigenschaften des festgelegten Indikators

Das Erscheinungsbild des set-Indikator-Containers wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7setindicator
CSS-Eigenschaft
Beschreibung
background-color
Die Hintergrundfarbe im hexadezimalen Format des Set-Indikators.

Beispiel - So erstellen Sie einen Indikator mit einem weißen Hintergrund:

.s7mixedmediaviewer .s7setindicator {
 background-color: #FFFFFF;
}

Das Erscheinungsbild eines einzelnen Satzanzeigepunkts wird mit der CSS-Klassenauswahl gesteuert:

.s7mixedmediaviewer .s7setindicator .s7dot

CSS-Eigenschaft
Beschreibung
width
Breite des festgelegten Anzeigepunkts.
Höhe
Höhe des festgelegten Anzeigepunkts.
margin-left
Linker Rand in Pixel.
margin-top
Oberer Rand in Pixel.
margin-right
Rechter Rand in Pixel.
margin-bottom
Unterer Rand in Pixel.
border-radius
Rahmenradius in Pixel.
background-color
Hintergrundfarbe im hexadezimalen Format.
NOTE
Der Set Indicator Punkt unterstützt die “state”-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Miniaturansichten anzuwenden. Insbesondere entspricht state="selected" der aktuellen Seite der Miniaturansichten, state="unselected" dem Standardpunktstatus.

Beispiel: So erstellen Sie einen festgelegten Anzeigepunkt mit 15 x 15 Pixel mit einem horizontalen Rand von zwei Pixeln, einem oberen Rand von fünf Pixeln, einem unteren Rand von einem Pixel, einem Radius von 12 Pixeln, einer Standardfarbe von #D5D3D3 und einer aktiven Farbe von #9393:

.s7mixedmediaviewer .s7setindicator .s7dot {
 width:15px;
 height:15px;
 margin-left:2px;
 margin-top:5px;
 margin-right:2px;
 margin-bottom:1px;
 border-radius:12px;
 background-color:#D5D3D3;
}
.s7mixedmediaviewer .s7setindicator .s7dot[state="selected"] {
 background-color:#939393;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8