L’outil Incorporer le partage est constitué d’un bouton ajouté au panneau de partage Social et de la boîte de dialogue modale qui s’affiche lorsque l’outil est activé. La position du bouton est entièrement gérée par l’outil de partage Social.
L’aspect du bouton de partage incorporé est contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embedshare
Propriétés CSS de l’outil de partage incorporé
width |
Largeur du bouton. |
height |
Hauteur du bouton. |
image d’arrière-plan |
Image affichée pour un état de bouton donné. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi CSS Sprites . |
Ce bouton prend en charge le sélecteur d’attributs state
, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.
Il est possible de supprimer le bouton du panneau de partage Social en définissant la propriété display:none
CSS sur sa classe CSS.
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 partage incorporé de 28 x 28 pixels et afficher une image différente pour chacun des quatre états de bouton différents :
.s7ecatalogsearchviewer .s7embedshare {
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}
L’incrustation d’arrière-plan qui couvre la page Web lorsque la boîte de dialogue est principale est contrôlée avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay
Propriétés CSS de l’incrustation d’arrière-plan
opacité |
Opacité de l’incrustation en arrière-plan. |
arrière-plan-couleur |
Couleur d’incrustation d’arrière-plan. |
Exemple - pour configurer une incrustation d’arrière-plan de manière à ce qu’elle soit grise avec une opacité de 70 % :
.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
Par défaut, la boîte de dialogue modale s’affiche au centre de l’écran sur les systèmes de bureau et occupe l’intégralité de la zone de page Web sur les périphériques tactiles. Dans tous les cas, le positionnement et le dimensionnement de la boîte de dialogue sont gérés par le composant. La boîte de dialogue est contrôlée avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialog
Propriétés CSS de la boîte de dialogue
border-radius |
Rayon de bordure de la boîte de dialogue, au cas où la boîte de dialogue ne prendrait pas l’intégralité du navigateur. |
arrière-plan-couleur |
Couleur d’arrière-plan de la boîte de dialogue. |
width |
Doit être désactivée ou définie à 100 %, auquel cas la boîte de dialogue prend la totalité de la fenêtre du navigateur (ce mode est préférable sur les périphériques tactiles). |
hauteur |
Doit être désactivée ou définie à 100 %, auquel cas la boîte de dialogue prend la totalité de la fenêtre du navigateur (ce mode est préférable sur les périphériques tactiles). |
Exemple : pour configurer la boîte de dialogue afin d’utiliser la fenêtre entière du navigateur et d’avoir un arrière-plan blanc sur les périphériques tactiles :
.s7ecatalogsearchviewer .s7touchinput .s7embeddialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
L'en-tête de la boîte de dialogue se compose d'une icône, d'un texte de titre et d'un bouton de fermeture. Le conteneur d’en-tête est contrôlé avec
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader
Propriétés CSS de l’en-tête de la boîte de dialogue
remplissage |
Marge intérieure du contenu de l’en-tête. |
L’icône et le texte du titre sont placés dans un conteneur supplémentaire contrôlé par
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline
Propriétés CSS de la ligne de dialogue
remplissage |
Marge intérieure de l’icône d’en-tête et du titre |
L'icône d'en-tête est contrôlée avec le sélecteur de classe CSS suivant
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon
Propriétés CSS de l’icône d’en-tête de la boîte de dialogue
width |
Largeur de l’icône. |
hauteur |
Hauteur de l’icône. |
image d’arrière-plan |
Image d’icône. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi CSS Sprites . |
Le titre d’en-tête est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext
Propriétés CSS du texte d’en-tête de la boîte de dialogue
font-poids |
Poids des polices. |
font-size |
Hauteur de la police. |
font-family |
Famille de polices. |
remplissage |
Marge intérieure du texte. |
Le bouton Fermer est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton
Propriétés CSS du bouton de fermeture
haut |
Position verticale du bouton par rapport au conteneur d’en-tête. |
droite |
Position horizontale du bouton par rapport au conteneur d’en-tête. |
width |
Largeur du bouton. |
hauteur |
Hauteur du bouton. |
remplissage |
Marge intérieure du bouton. |
image d’arrière-plan |
Image de bouton pour chaque état. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi CSS Sprites . |
Ce bouton prend en charge le sélecteur d’attributs state
, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.
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 en-tête de boîte de dialogue avec remplissage, une icône de 24 x 14 pixels, un titre de 16 points en gras et un bouton de fermeture de 28 x 28 pixels, positionné deux pixels en haut et deux pixels en bas à droite du conteneur de boîte de dialogue :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader {
padding: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon {
background-image: url("images/sdk/dlgembed_cap.png");
height: 14px;
width: 24px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
Le pied de page de la boîte de dialogue se compose du bouton "Annuler". Le conteneur de pied de page est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter
Propriétés CSS du pied de page de la boîte de dialogue
bordure |
Bordure que vous pouvez utiliser pour séparer visuellement le pied de page du reste de la boîte de dialogue. |
Le pied de page comporte un conteneur interne qui conserve le bouton. Il est contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer
Propriétés CSS du conteneur de bouton de la boîte de dialogue
remplissage |
Marge intérieure entre le pied de page et le bouton. |
Le bouton Sélectionner tout est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton
Le bouton est disponible uniquement sur les systèmes de bureau.
Propriétés CSS du bouton Sélectionner tout
width |
Largeur du bouton. |
hauteur |
Hauteur du bouton. |
color |
Couleur du texte des boutons pour chaque état. |
arrière-plan-couleur |
Couleur d’arrière-plan du bouton pour chaque état. |
Le bouton Sélectionner tout prend en charge le sélecteur d’attributs state
, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.
Le bouton Annuler est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton
Propriétés CSS du bouton Annuler de la boîte de dialogue
width |
Largeur du bouton. |
hauteur |
Hauteur du bouton. |
color |
Couleur du texte des boutons pour chaque état. |
arrière-plan-couleur |
Couleur d’arrière-plan du bouton pour chaque état. |
Ce bouton prend en charge le sélecteur d’attributs state
, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.
En outre, les deux boutons partagent la même classe CSS commune qui peut contenir des paramètres CSS identiques pour les autres boutons de boîte de dialogue :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button
Propriétés CSS du bouton
font-poids |
Poids de police de bouton. |
font-size |
Taille de police des boutons. |
font-family |
Famille de polices de bouton. |
ligne-hauteur |
Hauteur du texte à l’intérieur du bouton. Affecte l’alignement vertical. |
box-shadow |
Déposez l'ombre. |
marge droite |
Marge du bouton droit. |
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 pied de page de boîte de dialogue avec un bouton Annuler de 64 x 34, un bouton Sélectionner tout de 82 x 34 et dont la couleur de texte et la couleur d’arrière-plan diffèrent pour chaque état de bouton :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
La zone de dialogue principale (entre l’en-tête et le pied de page) contient le contenu de la boîte de dialogue défilante et le panneau de défilement sur la droite. Dans tous les cas, le composant gère la largeur de cette zone, il n'est pas possible de la définir dans CSS. La zone de dialogue principale est contrôlée avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea
Propriétés CSS de la zone d’affichage de la boîte de dialogue
hauteur |
Hauteur de la zone de boîte de dialogue principale. Elle ne doit être spécifiée que lorsque la boîte de dialogue fonctionne en mode Bureau. Il n’est pas applicable lorsque la boîte de dialogue est dimensionnée pour occuper l’intégralité de la fenêtre du navigateur. |
arrière-plan-couleur |
Couleur d’arrière-plan de la zone de boîte de dialogue principale. |
margin |
Marge extérieure. |
Exemple : pour définir une zone de boîte de dialogue principale de 300 pixels de hauteur, une marge de dix pixels et un arrière-plan blanc :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
Tout le contenu du formulaire (comme les libellés et les champs de saisie) se trouve dans un conteneur contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody
Si la hauteur de ce conteneur semble supérieure à la zone de boîte de dialogue principale, un défilement vertical est activé automatiquement par le composant.
Propriétés CSS du corps de la boîte de dialogue
remplissage |
Marge intérieure. |
Exemple - pour configurer le contenu du formulaire de sorte qu’il ait un remplissage de dix pixels :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody {
padding: 10px;
}
Tous les libellés statiques du formulaire de boîte de dialogue sont contrôlés avec
.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel
Cette classe n’est pas adaptée au contrôle de la taille ou de la position de l’étiquette, car vous pouvez l’appliquer à des textes situés à divers endroits de l’interface utilisateur du formulaire.
Propriétés CSS du libellé de la boîte de dialogue.
font-poids |
Poids de police d’étiquette. |
font-size |
Taille de police du libellé. |
font-family |
Libeller la famille de polices. |
color |
Couleur du texte du libellé. |
Les étiquettes de boîte de dialogue peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Exemple : pour définir toutes les étiquettes en gris, en gras avec une police de neuf pixels :
.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
La taille de la copie de texte affichée au-dessus du code incorporé est contrôlée avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide
Propriétés CSS du champ large d’entrée de la boîte de dialogue
width |
Largeur du champ d’entrée. |
remplissage |
Marge intérieure. |
Exemple : pour définir la copie de texte sur 430 pixels de large et disposer d’un remplissage de dix pixels en bas :
.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
Le code incorporé est encapsulé dans le conteneur et contrôlé avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer
Propriétés CSS du conteneur d’entrée de la boîte de dialogue
width |
Largeur du conteneur de code incorporé. |
bordure |
Bordure autour du conteneur de code incorporé. |
remplissage |
Marge intérieure. |
Exemple : pour définir une bordure grise d’un pixel autour du texte du code incorporé, définissez une largeur de 430 pixels et un remplissage de 10 pixels :
.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 10px;
width: 430px;
}
Le texte du code incorporé réel est contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer
Propriétés CSS du conteneur d’entrée de la boîte de dialogue
retour à la ligne |
Style d’encapsulation des mots. |
Exemple - pour configurer le code incorporé afin d’utiliser l’encapsulation de mot break-word
:
.s7ecatalogsearchviewer .s7embeddialog .s7dialogmessage {
word-wrap: break-word;
}
Le libellé et la liste déroulante Taille d’intégration se trouvent dans le bas de la boîte de dialogue et sont placés dans un conteneur contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel
Propriétés CSS du panneau Taille d’intégration de la boîte de dialogue
remplissage |
Marge intérieure. |
Exemple : pour configurer un panneau de taille d’incorporation afin qu’il ait dix pixels de remplissage :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel {
padding: 10px;
}
La taille et l’alignement de l’étiquette de taille incorporée sont contrôlés à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel
Propriétés CSS du panneau Taille d’intégration de la boîte de dialogue
alignement vertical |
Alignement vertical des étiquettes. |
width |
Largeur du libellé. |
Exemple : pour définir le libellé de la taille d’intégration de sorte qu’il soit aligné en haut et de 80 pixels de large :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizelabel {
vertical-align: top;
width: 80px;
}
La largeur de la zone de liste modifiable de taille d’intégration est contrôlée à l’aide du sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7combobox
Propriétés CSS de la zone combinée
width |
Largeur de la zone de liste déroulante. |
La zone combinée prend en charge le sélecteur d’attributs expanded
avec les valeurs possibles true
et false
. true
est utilisée lorsque la zone de liste modifiable affiche l’une des tailles d’intégration prédéfinies, et doit donc prendre toute la largeur disponible. false
est utilisée lorsque l’option de taille personnalisée est sélectionnée dans la zone de liste modifiable. Elle doit donc être réduite afin d’autoriser l’espace pour les champs de saisie de largeur et de hauteur personnalisés.
Exemple : pour définir la zone de liste modifiable de taille d’incorporation sur 300 pixels de large lors de l’affichage d’un élément prédéfini et 110 pixels de large lors de l’affichage d’une taille personnalisée :
.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="true"] {
width: 300px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="false"] {
width: 110px;
}
La hauteur du texte de la zone de liste modifiable est définie par un élément interne spécial et est contrôlée par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext
Propriétés CSS du texte de la zone de liste modifiable
hauteur |
Hauteur du texte de la zone de liste déroulante. |
Exemple : pour définir la hauteur de texte de la zone de liste modifiable de taille d’intégration sur 40 pixels :
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext {
height: 40px;
}
La zone combinée comporte un bouton déroulant à droite et est contrôlée avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton
Propriétés CSS du bouton de zone combinée
haut |
Position verticale du bouton dans la zone de liste déroulante. |
droite |
Position du bouton horizontal dans la zone de liste déroulante. |
width |
Largeur du bouton. |
hauteur |
Hauteur du bouton. |
image d’arrière-plan |
Image de bouton pour chaque état. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi CSS Sprites . |
Ce bouton prend en charge le sélecteur d’attributs state
, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.
Exemple : pour définir un bouton déroulant sur 28 x 28 pixels et disposer d’une image distincte pour chaque état :
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton {
width:28px;
height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
background-image:url(images/sdk/cboxbtndn_up.png);
}
Le panneau dont la liste des tailles incorporées est affichée à l’ouverture d’une zone de liste modifiable est contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown
La taille et la position du panneau sont contrôlées par le composant. Il n’est pas possible de le modifier via CSS.
Propriétés CSS de la liste déroulante Zone de liste modifiable
bordure |
Bordure du panneau. |
Exemple : pour définir le panneau de zone de liste modifiable sur une bordure grise d’un pixel :
.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown {
border: 1px solid #CCCCCC;
}
Un seul élément dans un panneau déroulant contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor
Propriétés CSS de l’ancre d’élément déroulant
arrière-plan-couleur |
Arrière-plan de l'élément. |
Exemple : pour définir l’élément du panneau de la zone de liste modifiable sur un arrière-plan blanc :
.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor {
background-color: #FFFFFF;
}
Coche affichée à gauche de l’élément sélectionné dans le panneau de la zone de liste modifiable et contrôlée par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7checkmark
Propriétés CSS de la case à cocher
width |
Largeur de l’icône. |
hauteur |
Hauteur de l’icône. |
image d’arrière-plan |
Image de l’élément. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi CSS Sprites . |
Exemple : pour définir l'icône de coche sur 25 x 25 pixels :
.s7ecatalogsearchviewer .s7embeddialog .s7checkmark {
background-image: url("images/sdk/cboxchecked.png");
height: 25px;
width: 25px;
}
Lorsque l’option Taille personnalisée est sélectionnée dans la zone combinée Taille d’incorporation, la boîte de dialogue affiche deux champs d’entrée supplémentaires à droite pour permettre à l’utilisateur de saisir une taille d’incorporation personnalisée. Ces champs sont encapsulés dans un conteneur contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel
Propriétés CSS du panneau Taille personnalisée de la boîte de dialogue
gauche |
Distance par rapport à la zone de liste déroulante Taille d’intégration. |
Exemple : pour définir le panneau des champs de saisie de taille personnalisée sur 20 pixels à droite de la zone de liste modifiable :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel {
left: 20px;
}
Chaque champ de saisie de taille personnalisée est encapsulé dans un conteneur qui effectue le rendu d’une bordure et définit la marge entre les champs. Il est contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize
Propriétés CSS de la boîte de dialogue taille personnalisée
bordure |
Bordure autour du champ d’entrée. |
width |
Largeur du champ d’entrée. |
marge |
Marge du champ d’entrée. |
remplissage |
Marge intérieure des champs d’entrée. |
Exemple : pour définir les champs de saisie de taille personnalisée avec une bordure, une marge, un remplissage d’un pixel gris et une largeur de 70 pixels :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize {
border: 1px solid #CCCCCC;
margin-right: 20px;
padding-left: 2px;
padding-right: 2px;
width: 70px;
}
Si un défilement vertical est nécessaire, la barre de défilement est générée dans le panneau situé près du bord droit de la boîte de dialogue, qui est contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel
Propriétés CSS du panneau de défilement de la boîte de dialogue
width |
Largeur du panneau de défilement. |
Exemple : pour configurer un panneau de défilement d’une largeur de 44 pixels
.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel {
width: 44px;
}
L’aspect de la zone de barre de défilement est contrôlé par le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar
Propriétés CSS de la barre de défilement
width |
Largeur de la barre de défilement. |
haut |
Décalage de la barre de défilement verticale à partir du haut du panneau de défilement. |
bas |
Décalage de la barre de défilement verticale à partir du bas du panneau de défilement. |
droite |
Décalage de la barre de défilement horizontale à partir du bord droit du panneau de défilement. |
Exemple : pour configurer une barre de défilement de 28 pixels de large avec une marge de huit pixels en haut, à droite et en bas du panneau de défilement :
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar {
bottom: 8px;
right: 8px;
top: 8px;
width: 28px;
}
Le suivi de la barre de défilement est la zone située entre les boutons de défilement supérieur et inférieur. Le composant définit automatiquement la position et la hauteur de la piste. Le suivi est contrôlé avec le sélecteur de classe CSS suivant
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack
Propriétés CSS du suivi de la barre de défilement
width |
Largeur du suivi. |
arrière-plan-couleur |
Suivi de la couleur d’arrière-plan. |
Exemple : pour configurer une piste de barre de défilement de 28 pixels de large et dont l’arrière-plan est gris :
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}
Le curseur de la barre de défilement se déplace verticalement dans une zone de suivi de défilement. Sa position verticale est entièrement contrôlée par la logique des composants. Cependant, la hauteur du curseur ne change pas de manière dynamique en fonction de la quantité de contenu. La hauteur du pouce et d’autres aspects peuvent être configurés avec le sélecteur de classe CSS suivant :
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb
Propriétés CSS du curseur de la barre de défilement
width |
Largeur du pouce. |
hauteur |
Hauteur du pouce. |
remplissage-haut |
Marge intérieure verticale entre le haut de la piste. |
remplissage-bas |
Marge intérieure verticale entre le bas de la piste. |
image d’arrière-plan |
Image affichée pour un état de pouce donné. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi CSS Sprites . |
Thumb prend en charge le sélecteur d’attributs state
, qui peut être utilisé pour appliquer différents habillages à différents états de pouce : up
, down
, over
et disabled
.
Exemple : pour configurer un pouce de barre de défilement de 28 x 45 pixels, avec une marge de dix pixels en haut et en bas et une illustration différente pour chaque état :
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
height: 45px;
padding-bottom: 10px;
padding-top: 10px;
width: 28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}
L’aspect des boutons de défilement supérieur et inférieur est contrôlé par les sélecteurs de classe CSS suivants :
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton
Il n’est pas possible de positionner les boutons de défilement à l’aide des propriétés CSS top
, left
, bottom
et right
. La logique du lecteur les positionne automatiquement.
Propriétés CSS des boutons de défilement supérieur et inférieur
width |
Largeur du bouton. |
hauteur |
Hauteur du bouton. |
image d’arrière-plan |
Image affichée pour un état de bouton donné. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir aussi CSS Sprites . |
Ces boutons prennent en charge le sélecteur d’attributs state
, qui peut être utilisé pour appliquer différents habillages à différents états de bouton : up
, down
, over
et disabled
.
Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Exemple : pour configurer des boutons de défilement de 28 x 32 pixels et présentant des illustrations différentes pour chaque état :
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/sdk/scroll_down_disabled.png);
}