Partage email email-share

L’outil de partage de courrier électronique se compose d’un bouton ajouté au panneau de partage de Social et à 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 d’e-mail est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emailshare

Propriétés CSS de l’outil de partage d’e-mail

Il est possible de supprimer le bouton du panneau de partage Social en définissant display:none la propriété CSS sur sa classe CSS.

L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - Pour configurer un bouton de partage de courrier électronique de 28 x 28 pixels qui affiche une image différente pour chacun des quatre états différents du bouton.

.s7ecatalogsearchviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}

La superposition d’arrière-plan, qui couvre la page Web lorsque la boîte de dialogue est active, est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

Propriétés CSS du recouvrement arrière

Exemple - Pour définir le recouvrement d’arrière-plan de manière à ce qu’il soit gris avec un taux d’opacité de 70 % :

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Par défaut, la boîte de dialogue modale s’affiche centrée sur l’écran sur les ordinateurs de bureau et occupe toute la zone de la page Web sur les appareils 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 par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

Propriétés CSS de la boîte de dialogue

Exemple : pour configurer une boîte de dialogue afin d’utiliser toute la fenêtre du navigateur et d’afficher un arrière-plan blanc sur les appareils tactiles :

.s7ecatalogsearchviewer .s7touchinput .s7emaildialog .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 Fermer . Le conteneur d’en-tête est contrôlé avec le sélecteur de classe CSS suivant

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader

Propriétés CSS de l’en-tête de boîte de dialogue

L’icône et le texte du titre sont placés dans un conteneur supplémentaire contrôlé par

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

Propriétés CSS de la boîte de dialogue

L’icône d’en-tête est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon

Propriétés CSS de l’icône d’en-tête de boîte de dialogue

Le titre de l’en-tête est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

Propriétés CSS du texte de l’en-tête de boîte de dialogue

Le bouton Fermer est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

Propriétés CSS de l’ du bouton Fermer

L’info-bulle du bouton Fermer et le titre de la boîte de dialogue peuvent être localisés. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - Pour configurer l’en-tête de boîte de dialogue avec remplissage, icône de 24 x 17 pixels et titre en gras en 16 points. Et enfin, et un bouton Fermer de 28 x 28 pixels positionné à deux pixels du haut et à deux pixels de la droite du conteneur de la boîte de dialogue :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgemail_cap.png");
    height: 17px;
    width: 24px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

Le pied de page de boîte de dialogue se compose des boutons Annuler et Envoyer un courrier électronique. Le conteneur de pied de page est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter

Propriétés CSS du pied de page de boîte de dialogue ​

Le pied de page comporte un conteneur interne qui conserve les deux boutons. Il est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer

Propriétés CSS du conteneur de boutons de boîte de dialogue

Le bouton Annuler est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton

Propriétés CSS du bouton Annuler de la boîte de dialogue

Le bouton Envoyer un courrier électronique est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

Propriétés CSS du bouton d’action de la boîte de dialogue

En outre, les deux boutons partagent une classe CSS commune qui peut contenir des paramètres CSS identiques pour les autres boutons de boîte de dialogue :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

Propriétés CSS du bouton

Les info-bulles de ce bouton peuvent être localisées. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - pour configurer un pied de page de boîte de dialogue avec un bouton Annuler 64 x 34 et un bouton Envoyer un courrier électronique de 82 x 34, la couleur du texte et la couleur d’arrière-plan étant différentes pour chaque état du bouton :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7emaildialog .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 par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea

Propriétés CSS de la zone d’affichage de la boîte de dialogue ​

Exemple : pour définir la zone de la boîte de dialogue principale de manière à ce qu’elle ait initialement une hauteur de 300 pixels et une hauteur de 100 pixels lorsque le message de confirmation s’affiche, ayez une marge de dix pixels et utilisez un fond blanc :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
 height:100px;
}

Tout le contenu du formulaire (comme les libellés et les champs de saisie) réside dans un conteneur contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .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 ​

Exemple : pour configurer le contenu d’un formulaire avec un remplissage de dix pixels :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody {
    padding: 10px;
}

Le formulaire de boîte de dialogue est rempli ligne par ligne, chaque ligne portant une partie du contenu du formulaire (comme une étiquette et un champ de saisie de texte). La ligne de formulaire unique est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

Propriétés CSS de la ligne de boîte de dialogue

Exemple - pour configurer un formulaire de boîte de dialogue avec une marge intérieure de dix pixels pour chaque ligne :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

Tous les libellés statiques du formulaire de boîte de dialogue sont contrôlés avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

Cette classe ne convient pas pour contrôler la taille ou la position des libellés, car vous pouvez l’appliquer à des textes à différents endroits de l’interface utilisateur du formulaire.

Propriétés CSS du libellé de la boîte de dialogue. ​

Les libellés des boîtes de dialogue peuvent être localisés. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - pour configurer toutes les étiquettes en gris, gras, avec une police de neuf pixels :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

Tous les libellés statiques affichés à gauche des champs de saisie de formulaire sont contrôlés par :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

Propriétés CSS du libellé d’entrée de la boîte de dialogue

Exemple : pour configurer les libellés des champs de saisie sur une largeur de 50 pixels, alignés à droite, avec une marge intérieure de dix pixels et une marge de dix pixels à droite :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel {
    margin-right: 10px;
    padding: 10px;
    text-align: right;
    width: 50px;
}

Chaque champ de saisie de formulaire est encapsulé dans le conteneur qui vous permet d’appliquer une bordure personnalisée autour du champ de saisie. Il est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

Propriétés CSS du conteneur d’entrée de boîte de dialogue

La plupart des champs de saisie qui s’étendent de l’étiquette sur la gauche jusqu’au bord droit du corps de la boîte de dialogue (qui inclut le champ From et le champ Message) sont contrôlés par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

Propriétés CSS du champ largeur d’entrée de la boîte de dialogue

Le champ À est plus étroit, car il alloue de l’espace pour le bouton Supprimer l’e-mail à droite. Il est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

Propriétés CSS du champ court d’entrée de la boîte de dialogue

Exemple - Pour configurer un formulaire avec une bordure grise d’un pixel avec neuf pixels de marge intérieure autour de tous les champs de saisie. Avoir la même bordure de couleur rouge pour les champs dont la validation échoue. Enfin, pour avoir une largeur de champ To de 250 pixels et une largeur de champ de 300 pixels pour le reste des champs d’entrée :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
    border: 1px solid #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort {
    width: 250px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide {
    width: 300px;
}

Le champ d’entrée des e-mails est également contrôlé avec :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

Cette classe vous permet de définir des propriétés spécifiques pour l’élément de TEXTAREA sous-jacent.

Propriétés CSS du message de boîte de dialogue

Exemple : pour configurer un message électronique de 50 pixels de haut et utiliser le break-word retour automatique à la ligne :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage {
    height: 50px;
    word-wrap: break-word;
}

Le bouton Ajouter une autre adresse e-mail permet d’ajouter plusieurs adresses dans un formulaire d’e-mail. Il est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

Propriétés CSS de la boîte de dialogue Bouton Ajouter une adresse électronique

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 le bouton « Ajouter une autre adresse e-mail » sur une hauteur de 25 pixels, utilisez une police en gras de 12 points avec un alignement droit et une couleur de texte et une image différentes pour chaque état :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton {
 text-align:right;
 font-size:12pt;
 font-weight:bold;
 background-position:left center;
 line-height:25px;
 padding-left:30px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
 color:#000000;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
 color:#000000;
 text-decoration:underline;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}

Le bouton Supprimer permet à l’utilisateur de supprimer des adresses supplémentaires du formulaire d’e-mail. Il est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

Propriétés CSS de la boîte de dialogue Supprimer le bouton de suppression de l’adresse électronique

L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - pour définir un bouton Supprimer de 25 x 25 pixels et utiliser une image différente pour chaque état :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
 background-image:url(images/sdk/dlgremove_up.png);
}

Le contenu partagé s’affiche au bas du corps de la boîte de dialogue et comprend une miniature, un titre, une URL d’origine et une description. Il est placé dans un conteneur contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

Propriétés CSS du contenu de la boîte de dialogue ​

Exemple - pour configurer un conteneur inférieur de sorte qu’il ait une bordure en pointillés d’un pixel sans marge intérieure :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
    border: 1px dotted #A0A0A0;
    padding: 0;
}

L’image miniature est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

La background-image propriété est définie par la logique du composant.

Propriétés CSS de l’image miniature de la boîte de dialogue

Exemple - pour configurer une miniature de 90 x 60 pixels, alignée en haut avec dix pixels de marge intérieure :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail {
    height: 60px;
    padding: 10px;
    vertical-align: top;
    width: 90px;
}

Le titre, l’origine et la description du contenu sont ensuite regroupés dans un panneau à droite de la miniature du contenu. Elle est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

Propriétés CSS du panneau d’informations de la boîte de dialogue

Exemple - pour configurer un panneau d’informations de contenu sur une largeur de 300 pixels :

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel {
    width: 300px;
}

Le titre du contenu est contrôlé avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

Propriétés CSS du titre de la boîte de dialogue

Exemple - pour configurer un titre de contenu afin d’utiliser une police en gras et d’avoir une marge de dix pixels :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle {
    font-weight: bold;
    margin: 10px;
}

L’origine du contenu est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

Propriétés CSS de l’origine du contenu de la boîte de dialogue ​

Exemple : pour configurer l’origine du contenu de sorte qu’elle ait une marge de dix pixels :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin {
    margin: 10px;
}

La description du contenu est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

Propriétés CSS de la boîte de dialogue description du contenu

Exemple - pour configurer une description de contenu avec une marge de dix pixels et utiliser une police à neuf points :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription {
    font-size: 9pt;
    margin: 10px;
}

Lorsqu’un utilisateur saisit des données d’entrée incorrectes et que la validation en ligne échoue, un message s’affiche en haut du corps de la boîte de dialogue. Ce message apparaît également lorsque la boîte de dialogue doit rendre une erreur ou un message de confirmation lorsque le formulaire est envoyé. Elle est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

Propriétés CSS de la boîte de dialogue message d’erreur

L’info-bulle du bouton peut être localisée.

Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple - Pour configurer un message afin d’utiliser une police en gras de dix points, ayez une hauteur de ligne de 25 pixels et un remplissage de 20 pixels sur la gauche. Enfin, utilisez une icône représentant un point d’exclamation, du texte rouge en cas d’erreur, ainsi qu’aucune icône et du texte vert en cas de réussite :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage {
    background-position: left center;
    font-size: 10pt;
    font-weight: bold;
    line-height: 25px;
    padding-left: 20px;
}

Si un défilement vertical est nécessaire, la barre de défilement est rendue dans le panneau près du bord droit de la boîte de dialogue, qui est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel

Propriétés CSS du panneau de défilement de la boîte de dialogue

Exemple - pour configurer un panneau de défilement sur une largeur de 44 pixels :

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel {
    width: 44px;
}

L’aspect de la zone de la barre de défilement est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

Propriétés CSS de la barre de défilement

Exemple : pour configurer une barre de défilement d’une largeur de 28 pixels, avec une marge de huit pixels en haut, à droite et en bas du panneau de défilement :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

La piste 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. La piste est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

Propriétés CSS de la piste de défilement

Exemple - pour configurer une piste de barre de défilement de 28 pixels de large avec un arrière-plan gris :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

Le pouce de la barre de défilement se déplace verticalement dans une zone de piste de défilement. Sa position verticale est entièrement contrôlée par la logique du composant, mais la hauteur du pouce ne change pas dynamiquement en fonction de la quantité de contenu. Vous pouvez configurer la hauteur du pouce et d’autres aspects à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

Propriétés CSS du pouce de la barre de défilement

Exemple : pour configurer une barre de défilement de 28 x 45 pixels avec une marge de dix pixels en haut et en bas et des illustrations différentes pour chaque état :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7emaildialog .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é avec les sélecteurs de classe CSS suivants :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

Il n’est pas possible de positionner des boutons de défilement à l’aide des propriétés CSS top, left, bottom et right. Au lieu de cela, la logique de la visionneuse les positionne automatiquement.

Propriétés CSS des boutons de défilement supérieur et inférieur

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 des boutons de défilement de 28 x 32 pixels avec des illustrations différentes pour chaque état :

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}