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