Muster

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 festgelegt wurde.

Beispiel: Um den Abstand sowohl vertikal als auch horizontal auf 10 Pixel festzulegen:

.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.

HINWEIS

Miniaturansichten unterstützen den Attributselektor state, der verwendet wird, um verschiedene Skins auf verschiedene Miniaturansichten anzuwenden. Insbesondere entspricht state="selected" der Miniaturansicht des Bildes, das derzeit in der Hauptansicht angezeigt wird, state="default" dem Rest der Miniaturansichten 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 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 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 .

HINWEIS

Diese Schaltfläche unterstützt den Attributselektor state, der verwendet wird, um verschiedene Skins auf die Schaltflächenzustände up, down, over und disabled anzuwenden.

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

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

Auf dieser Seite