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:
.s7ecatalogsearchviewer .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.
.s7ecatalogsearchviewer .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:
.s7ecatalogsearchviewer .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 einem halbtransparenten Bild zu haben.
.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
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 Fähigkeit wird durch die zusätzlichen Attributselektoren gesteuert, die auf .s7ecatalogsearchviewer .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.
.s7ecatalogsearchviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}