スウォッチ swatches

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

開発者
ユーザー

スウォッチは、左右にオプションのスクロールボタンを備えたサムネール画像の行で構成されます。

スクロールボタンは、すべてのサムネールがコンテナの幅に収まらない場合にのみ、デスクトップに表示されます。モバイルデバイスで、またはサムネールがコンテナの幅に収まる場合、スクロールボタンが表示されません。

スウォッチの CSS プロパティ

スウォッチコンテナの外観は、次の CSS クラスセレクターで制御します。

.s7flyoutviewer .s7swatches

CSS プロパティ

説明

幅

スウォッチの幅。

高さ

スウォッチの高さ。

下

ビューアコンテナを基準とした垂直方向のスウォッチのオフセット。

例 – スウォッチを 460 x 100 ピクセルに設定するには：

.s7flyoutviewer .s7swatches {
 width: 460px;
 height: 100px;
}

サムネールスウォッチ間隔の CSS プロパティ

スウォッチサムネール間の間隔は、CSS クラスセレクターで制御します。

.s7flyoutviewer .s7swatches .s7thumbcell

CSS プロパティ

説明

margin

各サムネールの周囲の水平方向と垂直方向の余白のサイズ。実際のサムネールの間隔は、.s7thumbcell に設定された左右の余白合計と等しくなります。

例 – 垂直方向と水平方向の両方で 10 ピクセルになるように間隔を設定するには：

.s7flyoutviewer .s7swatches .s7thumbcell {
 margin: 5px;
}

サムネールスウォッチの CSS プロパティ

個々のサムネールの外観は、次の CSS クラスセレクターで制御します。

.s7flyoutviewer .s7swatches .s7thumb

CSS プロパティ

説明

幅

サムネールスウォッチの幅。

高さ

サムネールスウォッチの高さ。

境界線

サムネールスウォッチのボーダーです。

NOTE

サムネールでは、異なるサムネール状態に異なるスキンを適用するために使用される 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 プロパティ

説明

幅

スクロールボタンの幅を指定します。

高さ

スクロールボタンの高さです。

background-image

特定のボタン状態に対して表示される画像。

background-position

CSS スプライトを使用する場合、アートワークスプライト内に配置します。

CSS スプライトージ参照してください。

NOTE

このボタンは、ボタンの状態 up、down、over、disabled に様々なスキンを適用するために使用される state 属性セレクターをサポートしています。

ボタンのツールチップはローカライズできます。詳しくは、ユーザーインターフェイス要素のローカライゼーションを参照してください。

例 – 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);
}

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8