サムネールは、サムネール画像のグリッドと、垂直方向にスクロールできる右側のオプションのスクロールバーで構成されます。
メインコントロールバーのサムネールボタンをクリックして、サムネールを切り替えます。 サムネールがアクティブな場合、サムネールは、ビューアのユーザーインターフェイスの上にオーバーレイされたモーダルモードで表示されます。 ビューアのロジックにより、サムネールコンテナのサイズがビューア領域全体に自動的に変更されます。
サムネールコンテナの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview
CSS プロパティ |
説明 |
---|---|
トップ |
ビューアの上部からのサムネールコンテナの垂直方向のオフセット。 |
margin-top |
上余白。 |
margin-left |
左マージン。 |
margin-right |
右マージン。 |
margin-bottom |
下余白。 |
background-color |
サムネール領域の背景色。 |
例 — 上から 32 ピクセル、左右に 5 ピクセル、下に 8 ピクセルの余白を持つサムネールを設定し、 0xDDDDDD
背景。
.s7ecatalogsearchviewer .s7thumbnailgridview {
top: 32px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 8px;
background-color: rgb(221, 221, 221);
}
サムネールの間隔は、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell
CSS プロパティ |
説明 |
---|---|
margin |
各サムネールの周囲の水平および垂直のマージンのサイズ。 実際のサムネールの水平方向の間隔は、 .s7thumbcell . サムネールの垂直方向の間隔は、上下の余白の合計に等しくなります。 |
例 — 垂直方向と水平方向の両方に 10 ピクセルのスペースを設定します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
margin: 5px;
}
個々のサムネールの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb
CSS プロパティ |
説明 |
---|---|
width |
サムネールの幅。 |
height |
サムネールの高さです。 |
枠線 |
サムネールの境界線。 |
background-color |
サムネールの背景色。 |
タッチデバイスでは、回転して縦長モードにすると、ビューアは、カタログ見開きを個々のページに分割する場合に、設定された半分のサイズにサムネールを表示できます。
サムネールでは、 state
属性セレクター。サムネールの状態ごとに異なるスキンを適用するのに使用できます。 特に state="selected"
は、メインビューに現在表示されている画像のサムネールに対応します。 state="default"
は残りのサムネールに対応し、 state="over"
は、マウスポインターを置いたときに使用されます。
例 — 120 x 85 ピクセルで、背景が白、標準の境界線がライトグレー、選択された境界線がダークグレーのサムネールを設定するには、次のように記述します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb {
width:120px;
height:85px;
background-color: rgb(255, 255, 255);
border: solid 1px #999999;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb[state="selected"]{
border: solid 2px #666666;
}
サムネールラベルの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7label
CSS プロパティ |
説明 |
---|---|
font-family |
フォント名。 |
font-size |
フォントサイズ。 |
例 — 14 ピクセルの Helvetica®フォントを使用するラベルを設定するには、次のように記述します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
font-family: Helvetica,sans-serif;
font-size: 12px;
}
垂直方向に表示できる数より多いサムネールがある場合、サムネールは右側の垂直方向のスクロールバーをレンダリングします。 スクロールバー領域の外観は、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar
CSS プロパティ |
説明 |
---|---|
width |
スクロールバーの幅。 |
トップ |
サムネール領域の上部からのスクロールバーの垂直方向のオフセット。 |
下 |
サムネール領域の下端からのスクロールバーの垂直方向のオフセット。 |
右 |
サムネール領域の右端からのスクロールバーの水平方向のオフセット。 |
例 — 幅が 28 ピクセルで、サムネール領域の上、右および下から 8 ピクセルのマージンがあるスクロールバーを設定します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
top:8px;
bottom:8px;
right:8px;
width:28px;
}
スクロールバートラックは、上下のスクロールボタンの間の領域です。 このコンポーネントは、トラックの位置と高さを自動的に設定します。 トラックは、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack
CSS プロパティ |
説明 |
---|---|
width |
スクロールバートラックの幅。 |
background-color |
スクロールバートラックの背景色。 |
例 — 幅が 28 ピクセルで、背景が半透明のグレーのスクロールバートラックを設定するには、次のように記述します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:28px;
background-color:rgba(102, 102, 102, 0.5);
}
スクロールバーサムは、スクロールトラック領域内で垂直方向に移動します。 サムネールの垂直方向の位置は、コンポーネントのロジックによって完全に制御されますが、サムの高さは、コンテンツの量に応じて動的に変化するわけではありません。 サムの高さやその他の要素は、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb
CSS プロパティ |
説明 |
---|---|
width |
スクロールバーサムの幅。 |
height |
スクロールバーサムネールの高さです。 |
padding-top |
スクロールバートラックの上部との間の垂直方向のパディング。 |
padding-bottom |
スクロールバートラックの下部の間の垂直方向のパディング。 |
background-image |
サムの特定の状態に対して表示される画像。 |
background-position |
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。 関連トピック CSS スプライト . |
サムは、 state
属性セレクター。サムネールの状態に異なるスキンを適用するのに使用できます。 up
, down
, over
、および disabled
.
例 — 28 x 45 ピクセルで、上と下に 10 ピクセルのマージンがあり、状態ごとに異なるアートワークを持つスクロールバーサムを設定します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
width:28px;
background-repeat:no-repeat;
background-position:center;
height:45px;
padding-top:10px;
padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
上下のスクロールボタンの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton
CSS を使用してスクロールボタンを配置することはできません。 top
, left
, bottom
、および right
プロパティ。 代わりに、ビューアのロジックによって自動的に配置されます。
CSS プロパティ |
説明 |
---|---|
width |
ボタンの幅。 |
height |
ボタンの高さ。 |
background-image |
サムの特定の状態に対して表示される画像。 |
background-position |
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。 関連トピック CSS スプライト . |
これらのボタンは、 state
属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。 up
, down
, over
、および disabled
.
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — 28 x 32 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定するには、次のように記述します。
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}