メイン表示は、カタログ画像で構成されます。 スワイプして別のページに移動したり、ズームしたりできます。
メインビューア領域のCSSプロパティ
表示領域の外観は、以下のCSSクラスセレクターを使用して制御します。
.s7ecatalogviewer .s7pageview
CSSプロパティ |
説明 |
---|---|
background-color |
16進数形式のメイン表示の背景色。 |
cursor |
メイン表示の上に表示されるカーソル。 |
例 — メイン表示を透明にするには、次のように記述します。
.s7ecatalogviewer .s7pageview {
background-color: transparent;
}
デスクトップシステムでは、コンポーネントは.s7pageview
クラスに適用できるcursortype
属性セレクターをサポートし、コンポーネントの状態とユーザー操作に基づいてカーソルのタイプを制御します。 次のcursortype
値がサポートされています。
値 |
説明 |
---|---|
デフォルト |
画像解像度が低い、コンポーネントの設定またはその両方が原因で画像がズーム可能でない場合に表示されます。 |
zoomin |
画像がズームイン可能な場合に表示されます。 |
リセット |
画像が最大ズームレベルに達し、初期状態にリセット可能な場合に表示されます。 |
ドラッグ |
ユーザーがズームイン状態の画像をパンした場合に表示されます。 |
slide |
ユーザーが水平スワイプまたはフリックで画像の入れ替えを実行した場合に表示されます。 |
カタログ見開きの左右のページを視覚的に区切るページ区切りは、以下の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 |
画像がズームイン可能な場合に表示されます。 |
リセット |
画像が最大ズームに達し、リセット可能な場合に表示します。 |
ドラッグ |
ズームインされた画像に対してドラッグ操作を実行するときに表示されます。 |
slide |
ユーザーがスライドジェスチャを使用して画像の入れ替えを行うときに表示されます |
例 — コンポーネント状態のタイプごとに異なるマウスカーソルを設定します。
.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;
}