Muster bestehen aus einer Zeile von Miniaturbildern mit optionalen Bildlauftasten auf der linken und rechten Seite.
Bildlaufschaltflächen sind nur dann auf dem Desktop sichtbar, wenn alle Miniaturansichten nicht in die Breite des Containers passen. Auf Mobilgeräten oder wenn Miniaturansichten in die Container-Breite passen, werden keine Bildlauftasten angezeigt.
CSS-Eigenschaften der Muster
Das Erscheinungsbild des Farbmuster-Containers wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7flyoutviewer .s7swatches
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Die Breite der Farbfelder. |
height |
Die Höhe der Muster. |
unten |
Die vertikalen Farbfelder versetzen sich relativ zum Viewer-Container. |
Beispiel: Zum Einrichten von Farbfeldern auf 460 x 100 Pixel:
.s7flyoutviewer .s7swatches {
width: 460px;
height: 100px;
}
CSS-Eigenschaften des Abstands der Miniaturansichten für Muster
Der Abstand zwischen Musterminiaturansichten wird mit dem CSS-Klassenselektor gesteuert:
.s7flyoutviewer .s7swatches .s7thumbcell
CSS-Eigenschaft |
Beschreibung |
---|---|
margin |
Die Größe des horizontalen und vertikalen Rands um jede Miniaturansicht. Der tatsächliche Abstand der Miniaturansichten entspricht der Summe des linken und rechten Rands, der für .s7thumbcell . |
Beispiel: Zum Festlegen eines Abstands von 10 Pixel sowohl vertikal als auch horizontal:
.s7flyoutviewer .s7swatches .s7thumbcell {
margin: 5px;
}
CSS-Eigenschaften der Muster für Miniaturansichten
Das Erscheinungsbild der einzelnen Miniaturansichten wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7flyoutviewer .s7swatches .s7thumb
CSS-Eigenschaft |
Beschreibung |
---|---|
width |
Die Breite der Miniaturansichten. |
height |
Die Höhe der Miniaturansichten. |
rand |
Der Rahmen der Miniaturansichten. |
Miniaturansichten unterstützen die state
-Attributauswahl, die verwendet wird, 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 56 x 56 Pixel, einem hellgrauen Standardrahmen und einem dunkelgrauen ausgewählten Rahmen:
.s7flyoutviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7flyoutviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7flyoutviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
CSS-Eigenschaften der Schaltflächen für den linken und rechten Bildlauf
Das Erscheinungsbild der linken und rechten Bildlaufschaltflächen wird mit den folgenden CSS-Klassenselektoren gesteuert:
.s7flyoutviewer .s7swatches .s7scrollleftbutton
.s7flyoutviewer .s7swatches .s7scrollrightbutton
Es ist nicht möglich, 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 Bildlaufschaltfläche. |
height |
Die Höhe der Bildlaufschaltfläche. |
background-image |
Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird. |
background-position |
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden. Siehe CSS-Sprites . |
Diese Schaltfläche unterstützt state
Attributauswahl, die verwendet wird, um verschiedene Skins auf Schaltflächenstatus anzuwenden up
, down
, over
und disabled
.
Die QuickInfos für Schaltflächen können lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.
Beispiel: Zum Einrichten von Bildlaufschaltflächen mit einer Größe von 56 x 56 Pixel und unterschiedlicher Grafik für jeden Status:
.s7flyoutviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}