Miniaturansichten

Miniaturansichten bestehen aus einem Raster von Miniaturbildern mit einer optionalen Bildlaufleiste auf der rechten Seite, um einen vertikalen Bildlauf zu ermöglichen.

Miniaturansichten werden durch Klicken auf die Schaltfläche "Miniatur"in der Hauptsteuerleiste ein-/ausgeblendet. Wenn Miniaturansichten aktiv sind, werden sie im Modalmodus angezeigt, der über der Viewer-Benutzeroberfläche überlagert wird. Die Viewer-Logik passt die Größe des Containers für Miniaturansichten automatisch an den gesamten Viewer-Bereich an.

Das Erscheinungsbild des Containers für Miniaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview

Beispiel: Um Miniaturansichten so einzurichten, dass sie einen Abstand von 32 Pixel von der oberen Seite, 5 Pixel Ränder von links und rechts und 8 Pixel Ränder von unten haben, mit 0xDDDDDD Hintergrund.

.s7ecatalogviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

Der Abstand zwischen Miniaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell

Beispiel: Zum Festlegen eines 10-Pixel-Bereichs sowohl vertikal als auch horizontal.

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

Das Erscheinungsbild der einzelnen Miniaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7thumb

Wenn der Viewer auf Touch-Geräten in den Hochformat gedreht wird, kann er die Größe von Miniaturansichten auf die Hälfte der konfigurierten Größe anpassen, falls er beschließt, den Katalog-Spread in einzelne Seiten aufzuteilen.

Beispiel: Zum Einrichten von Miniaturansichten mit einer Größe von 120 x 85 Pixel, einem weißen Hintergrund, einem hellgrauen Standardrahmen und einem dunkelgrauen ausgewählten Rahmen.

.s7ecatalogviewer .s7thumbnailgridview .s7thumb {
 width:120px;
 height:85px;
 background-color: rgb(255, 255, 255);
 border: solid 1px #999999;
}
.s7ecatalogviewer .s7thumbnailgridview .s7thumb[state="selected"]{
 border: solid 2px #666666;
}

Das Erscheinungsbild der Miniaturansichtsbeschriftung wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7label

Beispiel: Zum Einrichten von Beschriftungen für die Verwendung der Helvetica®-Schriftart mit 14 Pixel.

.s7ecatalogviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

Wenn mehr Miniaturansichten vorhanden sind, als vertikal in die Ansicht passen, rendern Miniaturansichten die vertikale Bildlaufleiste auf der rechten Seite. Das Erscheinungsbild des Bildlaufleistenbereichs wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar

Beispiel: Zum Einrichten einer Bildlaufleiste, die 28 Pixel breit ist und eine 8-Pixel-Spanne von oben, rechts und unten im Bereich der Miniaturansichten aufweist.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

Die Bildlaufleisten-Spur ist der Bereich zwischen den oberen und unteren Bildlauftasten. Die Komponente legt automatisch die Position und Höhe der Spur fest. Die Verfolgung wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Beispiel: Zum Einrichten einer Bildlaufleiste mit einer Breite von 28 Pixel und einem halbtransparenten grauen Hintergrund.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

Der Bildlaufleisten-Daumen bewegt sich innerhalb des Bildlaufverfolgungsbereichs vertikal. Seine vertikale Position wird vollständig von der Komponentenlogik gesteuert, die Thumb-Höhe ändert sich jedoch nicht dynamisch in Abhängigkeit von der Menge des Inhalts. Die Daumenhöhe und andere Aspekte werden mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Beispiel: Um einen Bildlaufleisten-Daumen mit 28 x 45 Pixel einzurichten, hat oben und unten 10 Pixel Ränder und hat für jeden Status unterschiedliche Grafiken.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

Das Erscheinungsbild der oberen und unteren Bildlaufschaltflächen wird mithilfe der folgenden CSS-Klassenselektoren gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

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

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.

Beispiel: Zum Einrichten von Bildlaufschaltflächen mit 28 x 32 Pixel und unterschiedlicher Bilddarstellung für jeden Status.

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}