検索ボタン search-button
メイン ビューア領域のCSS プロパティ
ボタンの外観は、次のCSS クラスセレクターで制御されます。
.s7ecatalogsearchviewer .s7searchbutton
CSS プロパティ
説明
幅
ボタンの幅。
の高さ
ボタンの高さ。
margin-top
コントロールバーの上部からのオフセット。
margin-left
左の次のボタンまでの距離、またはこのボタンが行の最初のボタンの場合はコントロールバーの左側までの距離。
背景画像
特定のボタン状態に対して表示される画像。
background-position
CSS スプライトを使用する場合は、アートワークスプライト内に配置します。
CSS スプライトも参照してください。
NOTE
このボタンは、
stateおよびselected属性セレクターをサポートしています。これらのセレクターを使用すると、異なるスキンを異なるボタンの状態に適用できます。特に、
selected='false'は最初のスクロールボタンの状態に対応し、selected='true'は検索パネルがアクティブな状態に対応します。ボタンツールのヒントはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。
例 – 28 x 28 ピクセルの検索ボタンを設定し、選択または選択されていない場合に、4つの異なるボタンの状態ごとに異なる画像を表示します。
.s7ecatalogsearchviewer .s7searchbutton{
margin-top: 4px;
margin-left: 10px;
width:28px;
height:28px;
display: inline-block;
background-size:contain;
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='up'] {
background-image:url(images/v2/Search_dark_up.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='over'] {
background-image:url(images/v2/Search_dark_over.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='down'] {
background-image:url(images/v2/Search_dark_down.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/Search_dark_disabled.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='up'] {
background-image:url(images/v2/Search_dark_over.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='over'] {
background-image:url(images/v2/Search_dark_over.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='down'] {
background-image:url(images/v2/Search_dark_over.png);
}
.s7ecatalogsearchviewer.s7mouseinput .s7searchbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/Search_dark_disabled.png);
}
recommendation-more-help
dynamic-media-developer-resources-help-aem-viewers-ref