Muster

Muster bestehen aus einer Reihe von Miniaturbildern mit optionalen Bildlaufschaltflächen 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 Breite des Containers passen, werden keine Bildlaufschaltflächen angezeigt.

CSS-Eigenschaften der Muster

Das Erscheinungsbild des Containers "swatches"wird mithilfe der folgenden CSS-Klassenauswahl gesteuert:

.s7flyoutviewer .s7swatches

CSS-Eigenschaft

Beschreibung

width

Die Breite der Farbfelder.

height

Die Höhe der Farbfelder.

unten

Die vertikalen Farbfelder versetzen sich relativ zum Viewer-Container.

Beispiel: So richten Sie Muster auf 460 x 100 Pixel ein:

.s7flyoutviewer .s7swatches { 
 width: 460px; 
 height: 100px;  
}

CSS-Eigenschaften des Abstands des Miniaturansichten-Farbfelds

Der Abstand zwischen den Musterminiaturen wird mit der CSS-Klassenauswahl gesteuert:

.s7flyoutviewer .s7swatches .s7thumbcell

CSS-Eigenschaft

Beschreibung

margin

Die Größe des horizontalen und vertikalen Randes um die einzelnen Miniaturansichten. Der tatsächliche Abstand der Miniaturansichten entspricht der Summe des linken und rechten Randes, der für .s7thumbcell festgelegt wurde.

Beispiel: So legen Sie den Abstand sowohl vertikal als auch horizontal auf 10 Pixel fest:

.s7flyoutviewer .s7swatches .s7thumbcell { 
 margin: 5px; 
}

CSS-Eigenschaften der 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 Rand der Miniaturansichten.

HINWEIS

Die Miniaturansicht unterstützt die Attributauswahl state, mit der verschiedene Skins auf verschiedene Miniaturansichten angewendet werden. Insbesondere entspricht state="selected" der Miniaturansicht für das Bild, das derzeit in der Haupt-Ansicht angezeigt wird, state="default" dem Rest der Miniaturbilder und state="over" wird beim Bewegen der Maus verwendet.

Beispiel: Zum Einrichten von Miniaturbildern mit 56 x 56 Pixel, einem hellgrauen Standardrand und einem dunkelgrauen 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

Die Darstellung der Schaltflächen für den Bildlauf nach links und rechts 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 Bildlauftaste.

background-image

Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der verschiedene Skins auf die Schaltflächenzustände up, down, over und disabled angewendet werden.

Die QuickInfos für Schaltflächen können lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: So richten Sie Bildlaufschaltflächen ein, die 56 x 56 Pixel groß sind und für jeden Status ein anderes Bildmaterial 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); 
}

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now