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