Farbfelder swatches
Farbfelder bestehen aus einer Reihe von Miniaturbildern mit optionalen Bildlaufschaltflächen auf der linken und rechten Seite.
Bildlaufschaltflächen sind nur dann auf der Arbeitsfläche sichtbar, wenn nicht alle Miniaturen in die Breite des Containers passen. Auf Mobilgeräten oder wenn Miniaturen in die Container-Breite passen, werden die Bildlaufschaltflächen nicht angezeigt.
CSS-Eigenschaften der Farbfelder
Das Erscheinungsbild des Farbfeld-Containers wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7flyoutviewer .s7swatches
Beispiel: So richten Sie Farbfelder auf 460 x 100 Pixel ein:
.s7flyoutviewer .s7swatches {
width: 460px;
height: 100px;
}
CSS-Eigenschaften des Farbfeldabstands für Miniaturen
Der Abstand zwischen Musterminiaturen wird mit dem CSS-Klassenselektor gesteuert:
.s7flyoutviewer .s7swatches .s7thumbcell
Beispiel: So legen Sie einen Abstand von 10 Pixeln sowohl vertikal als auch horizontal fest:
.s7flyoutviewer .s7swatches .s7thumbcell {
margin: 5px;
}
CSS-Eigenschaften der Miniaturansichten
Das Erscheinungsbild einzelner Miniaturansichten wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7flyoutviewer .s7swatches .s7thumb
state-Attributauswahl, mit der verschiedene Skins auf verschiedene Miniaturansichtszustände angewendet werden können. Insbesondere entspricht state="selected" der Miniatur für das Bild, das derzeit in der Hauptansicht angezeigt wird, state="default" entspricht dem Rest der Miniaturen, und state="over" wird beim Bewegen des Mauszeigers verwendet.Beispiel: Für Miniaturen mit einer Größe von 56 x 56 Pixel wird ein hellgrauer Standardrahmen und ein dunkelgrauer Rahmen ausgewählt:
.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 linken und rechten Bildlaufschaltflächen
Das Erscheinungsbild der linken und rechten Bildlaufschaltflächen wird mit den folgenden CSS-Klassenselektoren gesteuert:
.s7flyoutviewer .s7swatches .s7scrollleftbutton
.s7flyoutviewer .s7swatches .s7scrollrightbutton
Scroll-Schaltflächen können nicht mit den Eigenschaften CSS top, left, bottom und right positioniert werden. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.
Siehe von CSS-Sprites.
state-Attributauswahl, mit der verschiedene Skins auf Schaltflächenzustände up, down, over und disabled angewendet werden.Die QuickInfos für die Schaltfläche können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Beispiel: So richten Sie Bildlaufschaltflächen ein, die eine Größe von 56 x 56 Pixel aufweisen und unterschiedliche Bildmotive für jeden Status aufweisen:
.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);
}