Miniaturen thumbnails

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

Das Umschalten zwischen Miniaturen erfolgt durch Klicken auf die Schaltfläche Miniaturen in der Hauptsteuerleiste. Wenn Miniaturansichten aktiv sind, werden sie im modalen Modus angezeigt, der über der Viewer-Benutzeroberfläche überlagert ist. Durch die Viewer-Logik wird die Größe des Containers für Miniaturen automatisch auf den gesamten Viewer-Bereich geändert.

Das Erscheinungsbild des Containers für Miniaturen wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7thumbnailgridview

Beispiel - Sie können Miniaturen so einrichten, dass sie einen Abstand von 32 Pixeln von oben, 5 Pixeln Seitenrändern links und rechts und 8 Pixeln Seitenrändern unten und mit 0xDDDDDD Hintergrund haben.

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

Der Abstand zwischen Miniaturen wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

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

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

Das Erscheinungsbild einzelner Miniaturansichten wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

Auf Touch-Geräten kann der Viewer bei einer Drehung in den Hochformat-Modus die Größe der Miniaturen auf die Hälfte der konfigurierten Größe reduzieren, falls er beschließt, die Katalogstreuung in einzelne Seiten aufzuteilen.

Beispiel: So richten Sie Miniaturen mit einer Größe von 120 x 85 Pixel ein, die einen weißen Hintergrund, einen hellgrauen Standardrahmen und einen dunkelgrauen ausgewählten Rahmen aufweisen.

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

Das Erscheinungsbild der Miniaturbildbeschriftung wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

Beispiel - zum Einrichten von Beschriftungen für die Verwendung der Helvetica®-Schriftart mit 14 Pixeln.

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

Beispiel: So richten Sie eine Bildlaufleiste ein, die 28 Pixel breit ist und einen 8-Pixel-Rand vom oberen, rechten und unteren Rand des Bereichs „Miniaturen“ aufweist.

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

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

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Beispiel: So richten Sie eine Bildlaufleistenspur ein, die 28 Pixel breit ist und einen halbtransparenten grauen Hintergrund hat.

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

Der Daumen der Bildlaufleiste bewegt sich vertikal innerhalb des Bereichs der Bildlaufspur. Die vertikale Position wird vollständig durch die Komponentenlogik gesteuert, die Daumenhöhe ändert sich jedoch je nach Inhaltsmenge nicht dynamisch. Die Höhe des Daumens und andere Aspekte werden mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Beispiel - Zum Einrichten eines Thumbs für eine Bildlaufleiste mit 28 x 45 Pixel, mit 10 Pixel-Rändern oben und unten und unterschiedlichen Bildmaterialien für jeden Status.

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

Die Darstellung der oberen und unteren Bildlaufschaltflächen wird mit den folgenden CSS-Klassenselektoren gesteuert:

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .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.

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

Beispiel: So richten Sie Bildlaufschaltflächen ein, die 28 x 32 Pixel groß sind und für jeden Status unterschiedliche Grafiken aufweisen.

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