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
CSS-Eigenschaft |
Beschreibung |
---|---|
Anfang |
Der vertikale Versatz des Containers für Miniaturansichten am 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 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
CSS-Eigenschaft |
Beschreibung |
---|---|
margin |
Die Größe des horizontalen und vertikalen Rands um jede Miniaturansicht. Der tatsächliche horizontale Abstand der Miniaturansichten entspricht der Summe des linken und rechten Rands, der für .s7thumbcell . Der vertikale Abstand der Miniaturansichten entspricht der Summe des oberen und unteren Rands. |
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
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Die Breite der Miniaturansicht. |
height |
Die Höhe der Miniaturansicht. |
rand |
Der Rahmen der Miniaturansicht. |
background-color |
Die Hintergrundfarbe der Miniaturansicht. |
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.
Miniaturansichten unterstützen die state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf verschiedene Miniaturansichten anzuwenden. Insbesondere state="selected"
entspricht der Miniaturansicht für das Bild, das derzeit in der Hauptansicht angezeigt wird, state="default"
dem Rest der Miniaturansichten entspricht und state="over"
wird beim Bewegen der Maus verwendet.
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
CSS-Eigenschaft |
Beschreibung |
---|---|
Schriftfamilie |
Schriftname. |
Schriftgröße |
Schriftgröße. |
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
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Die Breite der Bildlaufleiste. |
Anfang |
Der Versatz der vertikalen Bildlaufleiste am oberen Rand des Bereichs "Miniaturansichten". |
unten |
Der Versatz der vertikalen Bildlaufleiste am unteren Rand des Bereichs "Miniaturansichten". |
rechts |
Der horizontale Versatz der Bildlaufleiste vom rechten Rand des Bereichs "Miniaturansichten". |
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
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Die Breite der Bildlaufleiste. |
background-color |
Die Hintergrundfarbe der Bildlaufleiste. |
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
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Die Breite des Daumens der Bildlaufleiste. |
height |
Die Höhe der Miniaturansicht der Bildlaufleiste. |
Auffüllung |
Der vertikale Abstand zwischen dem oberen Rand des Bildlaufleisten-Tracks. |
padding-bottom |
Der vertikale Abstand zwischen dem unteren Rand des Bildlaufleisten-Trackings. |
background-image |
Das Bild, das für einen bestimmten Daumenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites . |
Thumb unterstützt die state
-Attributauswahl, mit der verschiedene Skins auf die Daumenstatus angewendet werden können up
, down
, over
und disabled
.
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
, bottom
und right
Eigenschaften. 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 Bildsprites, wenn CSS-Sprites verwendet werden. Siehe auch CSS-Sprites . |
Diese Schaltflächen unterstützen state
-Attributauswahl, die verwendet werden kann, um verschiedene Skins auf die verschiedenen Schaltflächenstatus anzuwenden up
, down
, over
und disabled
.
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);
}