ページビュー page-view
メインビューは、カタログ画像で構成されます。 スワイプして別のページに移動したり、ズームしたりできます。
メインビューア領域の CSS プロパティ
表示領域の外観は、次の CSS クラスセレクターで制御します。
.s7ecatalogviewer .s7pageview
CSS プロパティ
説明
の背景色の
メインビューの背景色（16 進数形式）。
cursor
メイン ビューに表示されるカーソル。
例 – メインビューを透明にする。
.s7ecatalogviewer .s7pageview {
background-color: transparent;
}
デスクトップシステムでは、コンポーネントは、クラスに適用できる cursortype 属性セレクター .s7pageview サポートしており、コンポーネントの状態とユーザーアクションに基づいてカーソルのタイプを制御します。 次の cursortype 値がサポートされています。
値
説明
default
画像の解像度が低い、コンポーネント設定がある、またはその両方が原因で画像をズームできない場合に表示されます。
zoomin
画像をズームインできる場合に表示されます。
reset
画像が最大ズームレベルにあり、初期状態にリセットできる場合に表示されます。
ドラッグ
ズームイン状態の画像をユーザーがパンすると表示されます。
スライド
ユーザーが水平方向のスワイプまたはフリックを行って画像の入れ替えを実行すると表示されます。
カタログスプレッドの左右のページを視覚的に区切るページディバイダーは、次の CSS クラスセレクターで制御します。
.s7ecatalogviewer .s7pageview .s7pagedivider
CSS プロパティ
説明
幅
ページ区切りの幅。 ディバイダーを完全に非表示にするには、 0 px に設定します。
background-image
ページディバイダーとして使用する画像。
例 – 半透明の画像を持つ 40 ピクセルの幅のページディバイダーを持つこと。
.s7ecatalogviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
NOTE
frametransition 修飾子が turn または auto （デスクトップシステム上）に設定されている場合、ページディバイダーの外観は pageturnstyle 修飾子で制御され、.s7pagedivider CSS クラスは無視されます。メインビューア領域でのカスタムマウスカーソルの表示を設定できます。 この機能は、CSS クラスに適用された追加の属性セレクターで制御 .s7ecatalogviewer .s7pageview れます。
CSS プロパティ
説明
default
通常、矢印はズームできない画像を示します。
zoomin
画像をズームインできるタイミングを表示します。
reset
画像が最大ズーム時を示し、リセット可能です。
ドラッグ
ユーザーがズームインされた画像にドラッグ操作を実行すると表示されます
スライド
ユーザーがスライド ジェスチャを使用して画像の入れ替えを実行したときに表示します
例 – コンポーネントの状態のタイプごとに異なるマウスカーソルがある
.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