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