Seitenansicht

Die Hauptansicht besteht aus dem Katalogbild. Es kann wischt werden, um zu einer anderen Seite zu gelangen oder zu zoomen.

CSS-Eigenschaften des Haupt-Viewer-Bereichs

Das Erscheinungsbild des Anzeigebereichs wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7pageview

CSS-Eigenschaft

Beschreibung

background-color

Hintergrundfarbe der Hauptansicht im hexadezimalen Format.

Cursor

Cursor, der über der Hauptansicht angezeigt wird.

Beispiel - um die Hauptansicht transparent zu machen.

.s7ecatalogviewer .s7pageview { 
 background-color: transparent; 
}

Auf Desktop-Systemen unterstützt die Komponente die Attributauswahl cursortype , die auf die Klasse .s7pageview angewendet werden kann, und steuert den Typ des Cursors basierend auf dem Komponentenstatus und der Benutzeraktion. Die folgenden cursortype -Werte werden unterstützt:

Wert

Beschreibung

Standard

Wird angezeigt, wenn das Bild aufgrund einer geringen Bildauflösung, Komponenteneinstellungen oder beidem nicht vergrößert werden kann.

Zoomin

Wird angezeigt, wenn das Bild vergrößert werden kann.

zurücksetzen

Wird angezeigt, wenn sich das Bild auf dem maximalen Zoomfaktor befindet und auf den anfänglichen Status zurückgesetzt werden kann.

ziehen

Wird angezeigt, wenn der Benutzer das Bild schaltet, das gezoomt ist.

Folie

Wird angezeigt, wenn der Benutzer einen Bildtausch durch horizontales Wischen oder Klick durchführt.

Der Seitenaufteiler, der die linke und rechte Seite des Katalogaufschlags visuell trennt, wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7pageview .s7pagedivider

CSS-Eigenschaft

Beschreibung

width

Die Breite des Seiten-Dividers. Auf 0 px setzen, um den Divider vollständig auszublenden.

background-image

Das Bild, das Sie als Seitenaufteilung verwenden möchten.

Beispiel - um einen Seitenaufleger mit einer Breite von 40 Pixel mit halbtransparentem Bild zu haben.

.s7ecatalogviewer .s7pageview .s7pagedivider { 
 width:40px; 
 background-image:url(images/sdk/divider.png); 
}
HINWEIS

Wenn der Modifikator frametransition auf turn oder auto (auf Desktop-Systemen) gesetzt ist, wird das Erscheinungsbild des Seiten-Dividers mit dem Modifikator pageturnstyle gesteuert und die CSS-Klasse .s7pagedivider wird ignoriert.

Es ist möglich, die Anzeige der benutzerdefinierten Mauszeiger über dem Hauptanzeige-Bereich zu konfigurieren. Dies wird durch zusätzliche Attributselektoren gesteuert, die auf die CSS-Klasse .s7ecatalogviewer .s7pageview angewendet werden:

CSS-Eigenschaft

Beschreibung

Standard

Normalerweise wird ein Pfeil für nicht vergrößerbare Bilder angezeigt.

Zoomin

Zeigt an, wann ein Bild vergrößert werden kann.

zurücksetzen

Zeigt an, wann sich ein Bild im maximalen Zoom befindet und zurückgesetzt werden kann.

ziehen

Zeigt an, wann der Benutzer beim Zoomen des Bildes den Ziehvorgang durchführt

Folie

Zeigt an, wann der Benutzer einen Bildtausch mithilfe einer Foliengeste durchführt

Beispiel: Für jeden Komponententyp gibt es unterschiedliche Mauszeiger.

.s7ecatalogviewer .s7pageview[cursortype="default"] { 
cursor:auto; 
} 
.s7ecatalogviewer .s7pageview[cursortype="zoomin"] { 
cursor:url(images/zoomin_cursor.cur), auto; 
} 
.s7ecatalogviewer .s7pageview[cursortype="reset"] { 
cursor:url(images/zoomout_cursor.cur), auto; 
} 
.s7ecatalogviewer .s7pageview [cursortype="slide"] { 
cursor:url(images/slide_cursor.cur), auto; 
} 
.s7ecatalogviewer .s7pageview[cursortype="drag"] { 
cursor:url(images/drag_cursor.cur), auto; 
}

Auf dieser Seite