検索結果パネル search-results-panel
検索結果パネルは、上部の検索入力ボックスと、情報メッセージまたは検索結果が表示されるメイン領域で構成されます。
メインビューア領域の CSS プロパティ
パネルがアクティブな場合、ビューアのユーザーインターフェイスは半透明の塗りつぶしで覆われます。 この塗りつぶしのカラーと不透明度は、次の CSS クラスセレクターで制御します。
.s7ecatalogviewer .s7searchpanel .s7backoverlay
検索結果パネルは、常に、使用可能なすべてのビューアの高さを占めます。 ただし、幅を設定することはできます。 幅は絶対ピクセル値に設定できます。この値は、中程度のサイズと大きいサイズのブレークポイントのデフォルト設定です。 または、幅を 100% に設定すると、検索結果パネルがビューア領域全体に表示されるようになります。 パネルの幅は、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7searchpanel .s7searchresultspace
検索結果空間の CSS プロパティ
例 – 幅 250 ピクセルの検索結果パネルを大および中サイズのブレークポイントに設定し、小サイズのブレークポイントでフルサイズのパネルを使用する
.s7ecatalogsearchviewer.s7size_large .s7searchpanel .s7searchresultspanel, .s7ecatalogsearchviewer.s7size_medium .s7searchpanel .s7searchresultspanel {
width:250px;
}
.s7ecatalogsearchviewer.s7size_small .s7searchpanel .s7searchresultspanel {
width:100%;
}
検索結果パネルの上部は、検索入力ボックス専用です。 入力ボックスの端のパディングは、次の CSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7searchpanel .s7searchinputcontainer
検索入力コンテナの CSS プロパティ
検索入力フィールドは、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7searchpanel .s7searchinput
検索入力フィールドの CSS プロパティ
例 – 0 ピクセルの高さと 14 ピクセルのテキストフォントを使用して検索入力フィールドを設定するには：
.s7ecatalogsearchviewer .s7searchpanel .s7searchinput {
padding-left:5px;
height:30px;
font-size:14px;
}
デフォルトで「looking glass」の形式の検索入力フィールドの左側にある検索ボタンは、次の CSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton
検索入力ボタンの CSS プロパティ
例 – 26 x 26 ピクセルの「Looking Glass」アイコンと、30 ピクセルのサイズで 1 ピクセルの境界線を持つ検索ボタンを設定するには：
.s7ecatalogsearchviewer .s7searchpanel .s7searchinputbutton {
width:30px;
height:30px;
background-size:26px 26px;
background-image: url(images/v2/Search_form_field.png);
font-size:14px;
border: 1px solid #696969;
}
フィーチャが最初に呼び出されたときに、検索結果パネルにテキスト プロンプトが表示される場合があります。 また、ユーザーの検索が結果を返さなかった場合もメッセージが表示されます。 どの場合でも、テキストは検索結果パネルのメイン部分に表示され、次の CSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo
検索情報の CSS プロパティ
state 属性セレクターがサポートされており、これを使用して、様々なテキストメッセージに異なるスタイルを適用できます。 特に、state='prompt' は、パネルが初めて呼び出されたときに表示されるテキストプロンプトに対応しています。 state='results' は、検索ヒット数に関する情報を含むテキストに対応します。 最後に、state='no_results' は、検索クエリが結果を返さなかった場合に表示されるテキストに対応します。メッセージテキストはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – グレーの 18 ピクセルフォントを使用するテキストパネルを設定するには：
.s7ecatalogsearchviewer .s7searchpanel .s7searchinfo {
font-size: 18px;
color: #696969;
}
検索結果は、検索ヒットを含むページの 1 列または 1 行のサムネールとしてレンダリングされます。 検索結果のサムネール間の間隔は、次の CSS クラスセレクターで制御します。
.ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell
サムネールセルの CSS プロパティ
例 – 10 ピクセル間隔を設定するには：
.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumbcell {
margin: 5px;
}
個々のサムネールの外観は、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb
サムネールの CSS プロパティ
例 – 215 x 129 ピクセルのサムネールで、デフォルトの境界線が薄いグレーで、選択した境界線が濃いグレーになるように設定するには：
.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7thumb {
width: 215px;
height: 129px;
}
サムネールラベルの外観は、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer
.s7searchpanel .s7swatches .s7label
ラベルの CSS プロパティ
例 – 12 ピクセル、グレー、Helvetica® フォントを使用するラベルを設定するには：
.s7ecatalogsearchviewer .s7searchpanel .s7swatches .s7label {
font-family: Helvetica,sans-serif;
color: #4c4c4c;
font-size: 12px;
}
マウス入力を使用するシステムでは、ユーザーが検索結果をスクロールすると、検索結果パネルの下部に 2 つのスクロールボタンが表示されます。 上下のスクロールボタンの外観は、次の CSS クラスセレクターで制御します。
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton
CSS の top、left、bottom、right プロパティを使用してスクロールボタンを配置することはできません。 代わりに、ビューアロジックによって自動的に配置されます。
スクロールアップボタンとスクロールダウンボタンの CSS プロパティ
"up"、"down"、"over"、"disabled" のボタン状態に異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – 125 x 35 ピクセルで、状態ごとに異なるアートワークを持つスクロールアップボタンを設定するには：
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton {
width:125px;
height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/searchpanel_scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='over'] {
background-image:url(images/sdk/searchpanel_scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='down'] {
background-image:url(images/sdk/searchpanel_scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrollupbutton[state='disabled'] {
background-image:url(images/sdk/searchpanel_scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton {
width:125px;
height:35px;
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='up'] {
background-image:url(images/sdk/searchpanel_scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='over'] {
background-image:url(images/sdk/searchpanel_scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='down'] {
background-image:url(images/sdk/searchpanel_scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7searchpanel .s7scrolldownbutton[state='disabled'] {
background-image:url(images/sdk/searchpanel_scroll_down_disabled.png);