スウォッチ swatches
スウォッチは、一連のサムネール画像と、左側および右側のオプションのスクロールボタンで構成されます。
スクロールボタンは、デスクトップで、すべてのサムネールがコンテナの幅に収まらない場合にのみ表示されます。 モバイルデバイスの場合や、サムネールがコンテナの幅に収まる場合は、スクロールボタンは表示されません。
スウォッチの CSS プロパティ
スウォッチコンテナの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7flyoutviewer .s7swatches
例 — スウォッチを 460 x 100 ピクセルに設定するには、次のように記述します。
.s7flyoutviewer .s7swatches {
width: 460px;
height: 100px;
}
サムネールスウォッチの間隔の CSS プロパティ
スウォッチサムネールの間隔は、CSS クラスセレクターで制御します。
.s7flyoutviewer .s7swatches .s7thumbcell
例 — 垂直方向と水平方向の間隔を 10 ピクセルに設定するには、次のように記述します。
.s7flyoutviewer .s7swatches .s7thumbcell {
margin: 5px;
}
サムネールスウォッチの CSS プロパティ
個々のサムネールの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7flyoutviewer .s7swatches .s7thumb
state 属性セレクター。サムネールの状態ごとに異なるスキンを適用するために使用します。 特に state="selected" は、メインビューに現在表示されている画像のサムネールに対応します。 state="default" は残りのサムネールに対応し、 state="over" は、マウスポインターを置いたときに使用されます。例 — 56 x 56 ピクセルで、初期設定の境界線がライトグレー、選択された境界線がダークグレーのサムネールを設定するには、次のように記述します。
.s7flyoutviewer .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7flyoutviewer .s7swatches .s7thumb[state="default"] {
border: 1px solid #dddddd;
}
.s7flyoutviewer .s7swatches .s7thumb[state="selected"] {
border: 1px solid #666666;
}
左右のスクロールボタンの CSS プロパティ
左右のスクロールボタンの外観は、以下の CSS クラスセレクターを使用して制御します。
.s7flyoutviewer .s7swatches .s7scrollleftbutton
.s7flyoutviewer .s7swatches .s7scrollrightbutton
CSS を使用してスクロールボタンを配置することはできません。 top, left, bottom、および right プロパティ。 代わりに、ビューアのロジックによって自動的に配置されます。
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
詳しくは、 CSS スプライト.
state 属性セレクター。ボタンの状態に異なるスキンを適用するために使用します。 up, down, over、および disabled.ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 — 56 x 56 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定するには、次のように記述します。
.s7flyoutviewer .s7swatches .s7scrollleftbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton {
background-size: auto;
width: 56px;
height: 56px;
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="up"]{
background-image:url(images/v2/ScrollRightButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="over"]{
background-image:url(images/v2/ScrollRightButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="down"]{
background-image:url(images/v2/ScrollRightButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollrightbutton[state="disabled"]{
background-image:url(images/v2/ScrollRightButton_disabled.png);
}