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 umgeschaltet, indem Sie in der Hauptsteuerungsleiste auf die Schaltfläche "Miniaturansicht"klicken. Wenn Miniaturansichten aktiv sind, werden sie im Modalmodus über der Benutzeroberfläche des Viewers angezeigt. Die Viewer-Logik passt die Größe des Containers "Miniaturansichten"automatisch an den gesamten Viewer-Bereich an.

Das Erscheinungsbild des Containers thumbnails wird mithilfe der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview

Beispiel: Um Miniaturansichten so einzurichten, dass sie 32 Pixel von oben, 5 Pixel Ränder von links und rechts und 8 Pixel Ränder von unten mit einem Hintergrund von 0xDDDDDD versetzen.

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

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

.s7ecatalogviewer .s7thumbnailgridview .s7thumbcell

Beispiel: Um einen 10-Pixel-Raum sowohl vertikal als auch horizontal festzulegen.

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

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

.s7ecatalogviewer .s7thumbnailgridview .s7thumb

Bei Touch-Geräten kann der Viewer bei der Drehung in den Hochformat die Größe von Miniaturbildern auf die Hälfte der konfigurierten Größe anpassen, falls er beschließt, den Katalogbogen in einzelne Seiten zu teilen.

Beispiel: Zum Einrichten von Miniaturbildern mit einer Größe von 120 x 85 Pixel, einem weißen Hintergrund, einem hellgrauen Standardrand und einem dunkelgrauen 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; 
}

Die Darstellung der Miniaturansichtsbeschriftung wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7label

Beispiel: Um Beschriftungen so einzurichten, dass eine Helvetica-Schrift mit 14 Pixel verwendet wird.

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

Wenn mehr Miniaturansichten vorhanden sind, als vertikal in die Ansicht passen können, rendert das Miniaturbild die vertikale Bildlaufleiste auf der rechten Seite. Das Erscheinungsbild des Bereichs der Bildlaufleiste wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar

Beispiel: Zum Einrichten einer Bildlaufleiste mit einer Breite von 28 Pixeln und einem Rand von 8 Pixeln von oben, rechts und unten im Bereich der Miniaturansichten.

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

Die Bildlaufleistenspur ist der Bereich zwischen den Schaltflächen für den oberen und unteren Bildlauf. Die Komponente legt automatisch die Position und Höhe der Leiste fest. Die Spur wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

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

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

Der Bildlaufleistenminiaturbereich bewegt sich vertikal innerhalb des Bildlaufspurbereichs. Seine vertikale Position wird vollständig durch die Komponentenlogik gesteuert, die Höhe des Thumbs ändert sich jedoch nicht dynamisch je nach Inhaltsmenge. Die Thumb-Höhe und andere Aspekte werden mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Beispiel: Zum Einrichten eines Bildlaufleistenminiaturbilds mit 28 x 45 Pixeln, mit 10 Pixeln am oberen und unteren Rand und unterschiedlicher Grafik für jeden Status.

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

Die Darstellung der Schaltflächen für den oberen und unteren Bildlauf wird mithilfe der folgenden CSS-Klassenselektoren gesteuert:

.s7ecatalogviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogviewer .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 für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Um Bildlaufschaltflächen einzurichten, die 28 x 32 Pixel groß sind und für jeden Status ein anderes Bildmaterial haben.

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