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
CSS-Eigenschaft |
Beschreibung |
---|---|
Anfang |
Der vertikale Versatz des Containers "Miniaturansichten"vom oberen Rand des Viewers. |
margin-top |
Der obere Rand. |
margin-left |
Der linke Rand. |
margin-right |
Der rechte Rand. |
margin-bottom |
Der untere Rand. |
background-color |
Die Hintergrundfarbe des Bereichs "Miniaturansichten". |
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
CSS-Eigenschaft |
Beschreibung |
---|---|
margin |
Die Größe des horizontalen und vertikalen Randes um die einzelnen Miniaturansichten. Der tatsächliche horizontale Abstand der Miniaturansichten ist gleich der Summe des linken und rechten Randes, der für .s7thumbcell festgelegt wird. Der vertikale Abstand der Miniaturansichten entspricht der Summe des oberen und unteren Randes. |
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
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Die Breite der Miniaturansicht. |
height |
Die Höhe der Miniaturansicht. |
rand |
Der Rand der Miniaturansicht. |
background-color |
Die Hintergrundfarbe der Miniaturansicht. |
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.
Die Miniaturansicht unterstützt die Attributauswahl state
, mit der verschiedene Skins auf verschiedene Miniaturansichten angewendet werden können. Insbesondere entspricht state="selected"
der Miniaturansicht für das Bild, das derzeit in der Haupt-Ansicht angezeigt wird, state="default"
dem Rest der Miniaturansichten entspricht und state="over"
beim Bewegen der Maus verwendet wird.
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
CSS-Eigenschaft |
Beschreibung |
---|---|
font-family |
Schriftname. |
font-size |
Schriftgröße. |
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
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Die Breite der Bildlaufleiste. |
Anfang |
Die vertikale Bildlaufleiste wird vom oberen Rand des Miniaturansichtsbereichs versetzt. |
unten |
Die vertikale Bildlaufleiste wird vom unteren Rand des Bereichs der Miniaturansichten versetzt. |
rechts |
Die horizontale Bildlaufleiste wird vom rechten Rand des Bereichs der Miniaturansichten versetzt. |
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
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Die Breite der Bildlaufleistenspur. |
background-color |
Die Hintergrundfarbe der Bildlaufleistenspur. |
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
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Die Breite des Bildlaufleistenminiaturbilds. |
height |
Die Höhe der Miniaturansicht der Bildlaufleiste. |
padding-top |
Die vertikale Umrandung zwischen dem oberen Rand der Bildlaufleistenspur. |
padding-bottom |
Die vertikale Auffüllung zwischen dem unteren Rand der Bildlaufleistenspur. |
background-image |
Das Bild, das für einen bestimmten Daumenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites . |
Thumb unterstützt die Attributauswahl state
, mit der verschiedene Skins auf die Thumb-Status up
, down
, over
und disabled
angewendet werden können.
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.
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Die Breite der Schaltfläche. |
height |
Die Höhe der Schaltfläche. |
background-image |
Das Bild, das für einen bestimmten Daumenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites . |
Diese Schaltflächen unterstützen die Attributauswahl state
, mit der verschiedene Skins auf die verschiedenen Schaltflächenzustände up
, down
, over
und disabled
angewendet werden können.
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);
}