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