Anzeige einstellen

Letzte Aktualisierung: 2022-01-26
  • Erstellt für:
  • Developer
    User

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 Set Indicators

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.

height

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.

HINWEIS

Der Anzeigepunkt "Festlegen"unterstützt state -Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Miniaturansichten anzuwenden. Insbesondere state="selected" entspricht der aktuellen Seite der Miniaturansichten; state="unselected" entspricht 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;
}

Auf dieser Seite