Bouton Rechercher search-button
Propriétés CSS de la zone de visionneuse principale
L’aspect du bouton est contrôlé avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7searchbutton
Propriété CSS
Description
largeur
Largeur du bouton.
de hauteur
Hauteur du bouton.
de la marge supérieure
Décalage par rapport au haut de la barre de contrôle.
la marge de gauche
Distance par rapport au bouton suivant à gauche, ou sur le côté gauche de la barre de contrôle si ce bouton est le premier d’une ligne.
le image d’arrière-plan
Image affichée pour un état de bouton donné.
la position de l’arrière-plan
Positionnez à l’intérieur d’un sprite d’illustration si des sprites CSS sont utilisés.
Voir aussi desSprites CSS.
NOTE
Ce bouton prend en charge les sélecteurs d'attributs
state et selected, qui peuvent être utilisés pour appliquer différents habillages à différents états de bouton.En particulier,
selected='false' correspond à l'état initial du bouton de défilement, et selected='true' correspond à l'état lorsque le panneau de recherche est actif.L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Exemple : pour configurer un bouton de recherche de 28 x 28 pixels qui affiche une image différente pour chacun des quatre états de bouton, qu’il soit sélectionné ou non.
.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