スウォッチ 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);
}