E-Mail-Freigabe email-share

Das Tool zur E-Mail-Freigabe besteht aus einer Schaltfläche, die zum Bedienfeld Social-Media-Freigabe und zum modalen Dialogfeld hinzugefügt wird und angezeigt wird, wenn das Tool aktiviert wird. Die Position der Schaltfläche wird vollständig vom Tool Social Share verwaltet.

Das Erscheinungsbild der Schaltfläche „E-Mail-Freigabe“ wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emailshare

CSS-Eigenschaften des E-Mail-Freigaben-Tools

Sie können die Schaltfläche aus dem Bedienfeld Social-Freigabe entfernen, indem Sie display:none CSS-Eigenschaft für die CSS-Klasse festlegen.

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: Einrichten einer E-Mail-Freigabeschaltfläche mit 28 x 28 Pixeln, über die ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus angezeigt wird.

.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);
}

Die Hintergrundüberlagerung, die Web-Seiten abdeckt, wenn das Dialogfeld aktiv ist, wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

CSS-Eigenschaften der Backoverlay-

Beispiel: So richten Sie eine Hintergrundüberlagerung ein, die mit einer Deckkraft von 70 % grau dargestellt wird:

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

Standardmäßig wird das modale Dialogfeld auf Desktop-Systemen zentriert auf dem Bildschirm angezeigt und nimmt auf Touch-Geräten den gesamten Web-Seitenbereich ein. In allen Fällen werden die Positionierung und Größe des Dialogfelds von der Komponente verwaltet. Das Dialogfeld wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

CSS-Eigenschaften des Dialogfelds

Beispiel: So richten Sie ein Dialogfeld ein, um das gesamte Browser-Fenster zu verwenden und auf Touch-Geräten einen weißen Hintergrund zu verwenden:

.s7ecatalogsearchviewer .s7touchinput .s7emaildialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

Die Dialogfeldkopfzeile besteht aus einem Symbol, einem Titeltext und einer Schaltfläche Schließen. Der Header-Container wird mit dem folgenden CSS-Klassenselektor gesteuert

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader

CSS-Eigenschaften der Dialogfeldkopfzeile

Das Symbol und der Titeltext werden in einen zusätzlichen Container eingeschlossen, der von gesteuert wird.

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

CSS-Eigenschaften der Dialogfeldzeile

Das Kopfzeilensymbol wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon

CSS-Eigenschaften des Dialogfeldkopfzeilensymbols

Der Header-Titel wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

CSS-Eigenschaften des Dialogfeldkopfzeilentextes

Die Schaltfläche „Schließen“ wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

CSS-Eigenschaften des Schließen-Button-

Die QuickInfo für die Schaltfläche „Schließen“ und der Dialogfeldtitel können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel : Zum Einrichten einer Dialogkopfzeile mit Abstand, einem 24 x 17-Pixel-Symbol und einem fettigen 16-Punkt-Titel. Und schließlich positionierte eine Schaltfläche zum Schließen mit 28 x 28 Pixeln zwei Pixel oben und zwei Pixel rechts vom Dialogfeldcontainer:

.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);
}

Die Fußzeile des Dialogfelds besteht aus den Schaltflächen Abbrechen und E-Mail senden . Der Fußzeilen-Container wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter

CSS-Eigenschaften des ​ für die Dialogfeldfußzeile

Die Fußzeile hat einen inneren Container, der beide Schaltflächen behält. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer

CSS-Eigenschaften des Schaltflächen-Containers für Dialogfelder

Die Schaltfläche „Abbrechen“ wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton

CSS-Eigenschaften des Dialogfelds Schaltfläche „Abbrechen“

Die Schaltfläche „E-Mail senden“ wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

CSS-Eigenschaften der Aktionsschaltfläche des Dialogfelds

Darüber hinaus verwenden beide Schaltflächen eine gemeinsame CSS-Klasse, die CSS-Einstellungen enthalten kann, die für andere Dialogfeldschaltflächen identisch sind:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

CSS-Eigenschaften der Schaltfläche

Die QuickInfos dieser Schaltfläche können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: So richten Sie eine Fußzeile für ein Dialogfeld mit der Schaltfläche Abbrechen (64 x 34) und einer Schaltfläche E-Mail senden (82 x 34) ein, wobei die Textfarbe und die Hintergrundfarbe für jeden Schaltflächenstatus unterschiedlich sind:

.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;
}

Der Hauptdialogbereich zwischen Kopf- und Fußzeile enthält scrollbaren Dialogfeldinhalt und das Bildlauffeld auf der rechten Seite. In allen Fällen verwaltet die Komponente die Breite dieses Bereichs. Sie kann nicht in CSS festgelegt werden. Der Hauptdialogbereich wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea

CSS-Eigenschaften des Anzeigebereichs- des Dialogfelds

Beispiel: Das Hauptdialogfeld sollte zunächst eine Höhe von 300 Pixeln und bei Anzeige der Bestätigungsmeldung eine Höhe von 100 Pixeln aufweisen. Es sollte ein Rand von 10 Pixeln vorhanden sein und ein weißer Hintergrund verwendet werden:

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

Der gesamte Formularinhalt (z. B. Beschriftungen und Eingabefelder) befindet sich in einem Container, der mit dem folgenden CSS-Klassenselektor gesteuert wird:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody

Wenn die Höhe dieses Containers größer als der Bereich des Hauptdialogfelds zu sein scheint, wird automatisch ein vertikaler Bildlauf durch die Komponente aktiviert.

CSS-Eigenschaften des Dialogfeldhauptteils

Beispiel: So richten Sie Formularinhalte mit zehn Pixel Abstand ein:

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

Das Dialogfeldformular wird Zeile für Zeile ausgefüllt, wobei jede Zeile einen Teil des Formularinhalts enthält (z. B. eine Beschriftung und ein Texteingabefeld). Eine einzelne Formulareinstellung wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

CSS-Eigenschaften der Dialogfeldzeile

Beispiel: So richten Sie ein Dialogfeldformular ein, das für jede Zeile zehn Pixel Abstand aufweist:

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

Alle statischen Beschriftungen im Dialogfeldformular werden mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

Diese Klasse eignet sich nicht zur Steuerung der Größe oder Position von Beschriftungen, da Sie sie auf Texte an verschiedenen Stellen der Benutzeroberfläche des Formulars anwenden können.

CSS-Eigenschaften der Dialogfeldbezeichnung. ​

Dialogfeldbeschriftungen können lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: So legen Sie fest, dass alle Beschriftungen grau, fett und mit einer Schriftart von neun Pixeln dargestellt werden:

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

Alle statischen Beschriftungen, die links neben den Formulareingabefeldern angezeigt werden, werden mit Folgendem gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

CSS-Eigenschaften der Eingabelabel des Dialogfelds

Beispiel: Um Eingabefeldbeschriftungen so einzurichten, dass sie 50 Pixel breit, rechtsbündig, zehn Pixel Abstand und einen zehn Pixel-Rand rechts sind:

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

Jedes Formulareingabefeld ist in den -Container eingeschlossen, sodass Sie einen benutzerdefinierten Rahmen um das Eingabefeld anwenden können. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

CSS-Eigenschaften des Eingabecontainers für das Dialogfeld

Die meisten Eingabefelder, die sich von der Beschriftung auf der linken Seite bis zum rechten Rand des Dialogfeldkörpers erstrecken (einschließlich der Felder Von und Nachricht ), werden mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

CSS-Eigenschaften des Eingabefelds des Dialogfelds

Das Feld An ist enger gefasst, da es rechts Platz für die Schaltfläche E-Mail entfernen zuweist. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

CSS-Eigenschaften des kurzen Eingabefelds des Dialogfelds

Beispiel: So richten Sie ein Formular ein, das einen grauen Rahmen mit einem Pixel und neun Pixel Abstand um alle Eingabefelder hat. Für Felder, bei denen die Validierung fehlschlägt, soll derselbe Rahmen rot dargestellt werden. Und schließlich, um 250 Pixel breit zu haben, und den Rest der Eingabefelder 300 Pixel breit:

.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;
}

Das Eingabefeld für E-Mail-Nachrichten wird ebenfalls wie folgt gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

Mit dieser Klasse können Sie bestimmte Eigenschaften für das zugrunde liegende TEXTAREA festlegen.

CSS-Eigenschaften der Dialogfeldmeldung

Beispiel: So legen Sie eine E-Mail-Nachricht mit einer Höhe von 50 Pixel und break-word Zeilenumbruch fest:

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

Mit der Schaltfläche Weitere E-Mail-Adresse hinzufügen können Benutzende mehr als einen Empfänger in das E-Mail-Formular einfügen. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

CSS-Eigenschaften des Dialogfelds Schaltfläche E-Mail-Adresse hinzufügen

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: Um die Schaltfläche „Weitere E-Mail-Adresse hinzufügen“ so einzurichten, dass sie 25 Pixel hoch ist, verwenden Sie eine 12-Punkt-Fettschrift mit rechter Ausrichtung und einer anderen Textfarbe und einem anderen Bild für jeden Status:

.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);
}

Mit der Schaltfläche Entfernen können Benutzer zusätzliche Adressen aus dem E-Mail-Formular entfernen. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

CSS-Eigenschaften des Dialogfelds - Schaltfläche zum Entfernen der E-Mail

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: So legen Sie eine Entfernen-Schaltfläche auf 25 x 25 Pixel fest und verwenden für jeden Status ein anderes Bild:

.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);
}

Der freigegebene Inhalt wird unten im Dialogfeld angezeigt und enthält eine Miniaturansicht, einen Titel, eine Ursprungs-URL und eine Beschreibung. Sie wird in einen Container eingeschlossen, der mit dem folgenden CSS-Klassenselektor gesteuert wird:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

CSS-Eigenschaften des ​

Beispiel: So richten Sie einen unteren Container ein, der einen gepunkteten Rahmen mit einem Pixel und keinen Abstand aufweist:

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

Das Miniaturbild wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

Die background-image-Eigenschaft wird durch die Komponentenlogik festgelegt.

CSS-Eigenschaften des Miniaturbilds des Dialogfelds

Beispiel: So legen Sie fest, dass die Miniaturansicht 90 x 60 Pixel groß und mit zehn Pixel Abstand oben ausgerichtet ist:

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

Inhaltstitel, Herkunft und Beschreibung werden außerdem in einem Bedienfeld rechts neben der Inhaltsminiatur gruppiert. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

CSS-Eigenschaften des Informationsbereichs des Dialogfelds

Beispiel: So richten Sie ein Bedienfeld mit Inhaltsinformationen ein, das 300 Pixel breit ist:

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

Der Inhaltstitel wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

CSS-Eigenschaften des Dialogfeldtitels

Beispiel: So richten Sie einen Inhaltstitel so ein, dass er eine fette Schriftart mit einem Rand von zehn Pixeln verwendet:

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

Der Inhaltsursprung wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

CSS-Eigenschaften des Inhaltsursprungs ​ Dialogfelds

Beispiel - Zum Einrichten des Inhaltsursprungs mit einem Rand von zehn Pixeln:

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

Die Inhaltsbeschreibung wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

CSS-Eigenschaften des Dialogfelds Inhaltsbeschreibung

Beispiel : Einrichten einer Inhaltsbeschreibung mit einem Rand von zehn Pixeln und Verwendung einer Schriftart mit neun Punkten:

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

Wenn Benutzende falsche Eingabedaten eingeben und die Inline-Validierung fehlschlägt, wird oben im Dialogfeldtext eine Meldung angezeigt. Diese Meldung wird auch angezeigt, wenn das Dialogfeld beim Senden des Formulars einen Fehler oder eine Bestätigungsmeldung rendern muss. Sie wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

CSS-Eigenschaften der Fehlermeldung im Dialogfeld

Die QuickInfo der Schaltfläche kann lokalisiert werden.

Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: Um eine Nachricht so einzurichten, dass sie eine fett gedruckte Schriftart mit zehn Punkten verwendet, weisen Sie eine Zeilenhöhe von 25 Pixel und einen Abstand von 20 Pixel auf der linken Seite auf. Verwenden Sie abschließend ein Ausrufezeichen-Symbol: einen roten Text, wenn ein Fehler auftritt, kein -Symbol und einen grünen Text, wenn der Vorgang erfolgreich war:

.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;
}

Wenn ein vertikaler Bildlauf erforderlich ist, wird die Bildlaufleiste im Bedienfeld nahe dem rechten Rand des Dialogfelds gerendert, das mit dem folgenden CSS-Klassenselektor gesteuert wird:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel

CSS-Eigenschaften des Bildlaufbedienfelds des Dialogfelds

Beispiel: So richten Sie ein Bildlauffeld mit einer Breite von 44 Pixeln ein:

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

Das Erscheinungsbild des Bildlaufleistenbereichs wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

CSS-Eigenschaften der Bildlaufleiste

Beispiel: So richten Sie eine Bildlaufleiste ein, die 28 Pixel breit ist, und zwar einen Rand von acht Pixeln oben, rechts und unten im Bildlaufbedienfeld:

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

Die Bildlaufleistenspur ist der Bereich zwischen den oberen und unteren Bildlaufschaltflächen. Die Komponente legt automatisch die Position und Höhe der Spur fest. Die Spur wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

CSS-Eigenschaften der Scroll-Spur

Beispiel: So richten Sie eine Bildlaufleistenspur ein, die 28 Pixel breit ist und einen grauen Hintergrund hat:

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

Der Daumen der Bildlaufleiste bewegt sich vertikal innerhalb eines Bereichs der Bildlaufspur. Die vertikale Position wird vollständig von der Komponentenlogik gesteuert, jedoch ändert sich die Daumenhöhe je nach Inhaltsmenge nicht dynamisch. Sie können die Höhe der Miniaturen und andere Aspekte mit dem folgenden CSS-Klassenselektor konfigurieren:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

CSS-Eigenschaften des Thumbs der Bildlaufleiste

Beispiel - Zum Einrichten eines Thumbs für eine Bildlaufleiste mit 28 x 45 Pixel, einem Rand von zehn Pixeln oben und unten und unterschiedlichen Grafiken für jeden Status:

.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");
}

Die Darstellung der oberen und unteren Bildlaufschaltflächen wird mit den folgenden CSS-Klassenselektoren gesteuert:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

Scroll-Schaltflächen können nicht mit den Eigenschaften CSS top, left, bottom und right positioniert werden. Stattdessen werden sie von der Viewer-Logik automatisch positioniert.

CSS-Eigenschaften der oberen und unteren Bildlaufschaltflächen

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiel: So richten Sie Bildlaufschaltflächen ein, die eine Größe von 28 x 32 Pixeln haben und für jeden Status unterschiedliche Bildmotive aufweisen:

.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);
}