Seitenansicht page-view

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 cursortype -Attributauswahl, auf die angewendet werden kann .s7pageview -Klasse und steuert den Typ des Cursors basierend auf dem Komponentenstatus und der Benutzeraktion. Folgendes 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. Legen Sie fest auf 0 px , um die Trennlinie vollständig zu verbergen.
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);
}
NOTE
Wenn die frametransition modifier ist auf turn oder auto (auf Desktop-Systemen) wird das Erscheinungsbild des Seiten-Dividers mit dem pageturnstyle -Modifikator und die .s7pagedivider CSS-Klasse wird ignoriert.

Es ist möglich, die Anzeige der benutzerdefinierten Mauszeiger über dem Hauptanzeige-Bereich zu konfigurieren. Diese Funktion wird mit den zusätzlichen Attributselektoren gesteuert, die auf .s7ecatalogviewer .s7pageview CSS-Klasse:

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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8