E-mailshare email-share

Het gereedschap E-mail delen bestaat uit een knop die wordt toegevoegd aan het deelvenster Sociaal delen en het modale dialoogvenster dat wordt weergegeven wanneer het gereedschap wordt geactiveerd. De positie van de knop wordt volledig beheerd met het gereedschap Sociaal delen.

De vormgeving van de knop E-mail delen wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emailshare

CSS-eigenschappen van het gereedschap voor het delen van e-mail

Het is mogelijk de knop uit het deelvenster Sociaal delen te verwijderen door de instelling display:none CSS-eigenschap in de CSS-klasse.

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - Een knop voor e-maildelen instellen van 28 x 28 pixels en een andere afbeelding voor elk van de vier verschillende knopstatussen.

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

De achtergrondoverlay die de webpagina bedekt wanneer het dialoogvenster actief is, wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

CSS-eigenschappen van de backoverlay

Voorbeeld - als u een achtergrondbedekking wilt instellen die grijs is met een dekking van 70%:

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

Standaard wordt het modale dialoogvenster gecentreerd weergegeven op het scherm op desktopsystemen en wordt het hele webpaginagebied op aanraakapparaten weergegeven. In alle gevallen, wordt het plaatsen en het rangschikken van de dialoogdoos beheerd door de component. Het dialoogvenster wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

CSS-eigenschappen van het dialoogvenster

Voorbeeld - als u een dialoogvenster wilt instellen waarin het volledige browservenster wordt gebruikt en dat een witte achtergrond heeft op aanraakapparaten:

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

De koptekst van het dialoogvenster bestaat uit een pictogram, een titeltekst en een knop Sluiten. De koptekstcontainer wordt bestuurd met de volgende CSS-klassenkiezer

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader

CSS-eigenschappen van de koptekst van het dialoogvenster

Het pictogram en de titeltekst worden verpakt in een extra container die wordt bestuurd met

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

CSS-eigenschappen van de dialoogregel

Koptekstpictogram wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon

CSS-eigenschappen van het pictogram van de koptekst in het dialoogvenster

De titel van de koptekst wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

CSS-eigenschappen van de koptekst van het dialoogvenster

Knop Sluiten wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

CSS-eigenschappen van de knop close ​

De knopinfo Sluiten en de titel van het dialoogvenster kunnen worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - Aan opstellingsheader met opvulling, pictogram 24 x 17 pixel, en gewaagde 16 punttitel. En ten slotte, en een dicht dicht knoop van 28 x 28 pixel plaatste twee pixel van de bovenkant en twee pixel van het recht van de container van de dialoogdoos:

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

Dialoogvoettekst bestaat uit de knoppen Annuleren en E-mail verzenden. De voettekstcontainer wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter

CSS-eigenschappen van de voettekst van het dialoogvenster ​

De voettekst heeft een binnencontainer die beide knoppen bevat. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer

CSS-eigenschappen van de knopcontainer van het dialoogvenster

De knop Annuleren wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton

CSS-eigenschappen van de knop cancel van het dialoogvenster

De knop E-mail verzenden wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

CSS-eigenschappen van de actieknop van het dialoogvenster

Bovendien delen beide knoppen dezelfde algemene CSS-klasse die CSS-instellingen kan bevatten die hetzelfde zijn voor andere knoppen in dialoogvensters:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

CSS-eigenschappen van de knop

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - om een dialoogvakje footer met 64x 34Cancel knoop en een 82x 34send e-mailknoop te plaatsen, met de tekstkleur en achtergrondkleur verschillend voor elke knoopstaat:

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

Het hoofddialoogvenster tussen de kop- en voettekst bevat schuifbare inhoud in het dialoogvenster en het schuifvenster aan de rechterkant. In alle gevallen beheert de component de breedte van dit gebied. Het is niet mogelijk om dit in CSS in te stellen. Het hoofddialoogvenster wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea

CSS-eigenschappen van het weergavegebied van het dialoogvenster ​

Voorbeeld: als u het hoofddialoogvenster wilt instellen op een hoogte van 300 pixels in eerste instantie en een hoogte van 100 pixels in het bevestigingsbericht, hebt u een marge van 10 pixels en gebruikt u een witte achtergrond:

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

Alle formulierinhoud (zoals labels en invoervelden) bevindt zich in een container die wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody

Als de hoogte van deze container groter lijkt te zijn dan het gebied van het hoofddialoogvenster, wordt automatisch een verticaal schuiven ingeschakeld door de component.

CSS-eigenschappen van de hoofdtekst van het dialoogvenster ​

Voorbeeld - als u formulierinhoud wilt instellen met tien pixelopvulling:

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

Het formulier in het dialoogvenster wordt regel voor regel ingevuld, waarbij elke regel een deel van de formulierinhoud bevat (zoals een label en een tekstinvoerveld). Eén formulierregel wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

CSS-eigenschappen van de regel met dialoogvensters

Voorbeeld - als u een dialoogvenster wilt instellen met tien pixelopvulling voor elke regel:

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

Alle statische labels in het dialoogvenster worden beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

Deze klasse is niet geschikt voor het beheren van de grootte of positie van labels, omdat u deze kunt toepassen op tekst in verschillende locaties van de gebruikersinterface van het formulier.

CSS-eigenschappen van het label van het dialoogvenster. ​

Labels in dialoogvensters kunnen worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - als u alle labels wilt instellen op grijs, vet en met een lettertype van negen pixels:

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

Alle statische labels die links van de formulierinvoervelden worden weergegeven, worden beheerd met:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

CSS-eigenschappen van het invoerlabel van het dialoogvenster

Voorbeeld - als u invoerveldlabels wilt instellen op een breedte van 50 pixels, rechts uitgelijnd, hebt u tien pixels opvulling en een marge van tien pixels rechts:

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

Elk formulierinvoerveld wordt in de container geplaatst, zodat u een aangepaste rand rond het invoerveld kunt toepassen. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

CSS-eigenschappen van de invoercontainer van het dialoogvenster

De meeste invoervelden die zich uitstrekken van het label links tot aan de rechterrand van de hoofdtekst van het dialoogvenster (waaronder het veld Van en het veld Bericht), worden bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

CSS-eigenschappen van het invoerveld van het dialoogvenster

Het veld Aan is smaller omdat er ruimte wordt toegewezen voor de knop E-mail verwijderen aan de rechterkant. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

CSS-eigenschappen van het korte veld voor invoer in het dialoogvenster

Voorbeeld - Een formulier zo instellen dat het een grijze rand van één pixel heeft met negen pixels opvulling rond alle invoervelden. Dezelfde rand in rode kleur gebruiken voor velden waarvoor de validatie is mislukt. En tot slot, om 250 pixel breed te hebben aan gebied, en de rest inputgebieden 300 pixel breed:

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

Het invoerveld voor e-mailberichten wordt ook beheerd met:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

Met deze klasse kunt u specifieke eigenschappen instellen voor de onderliggende TEXTAREA element.

CSS-eigenschappen van het bericht in het dialoogvenster

Voorbeeld - als u een e-mailbericht wilt instellen op 50 pixels hoog en gebruiken break-word tekstterugloop:

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

Met de knop Een ander e-mailadres toevoegen kan een gebruiker meer dan één adres toevoegen in een e-mailformulier. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

CSS-eigenschappen van het dialoogvenster toevoegen, knop E-mailadres

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld: als u de knop Een ander e-mailadres toevoegen wilt instellen op 25 pixels hoog, gebruikt u 12-punts vet lettertype met de juiste uitlijning en een andere tekstkleur en afbeelding voor elke 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);
}

Met de knop Verwijderen kan een gebruiker extra adressen uit het e-mailformulier verwijderen. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

CSS-eigenschappen van het dialoogvenster verwijderen de knop E-mail

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - als u een verwijderknop wilt instellen op 25 x 25 pixels en voor elke status een andere afbeelding wilt gebruiken:

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

De inhoud die wordt gedeeld, wordt onder in de hoofdtekst van het dialoogvenster weergegeven en bevat een miniatuur, titel, oorsprong-URL en beschrijving. De container wordt verpakt in een container die wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

CSS-eigenschappen van de inhoud van het dialoogvenster ​

Voorbeeld - als u een container onder een container wilt instellen met een gestippelde rand van één pixel en geen opvulling:

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

De miniatuurafbeelding wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

De background-image wordt ingesteld door de componentlogica.

CSS-eigenschappen van de miniatuurafbeelding van het dialoogvenster

Voorbeeld - als u een miniatuur wilt instellen op 90 x 60 pixels en de miniatuur aan de bovenzijde uitgelijnd met tien pixels aan de opvulling:

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

De titel, oorsprong en beschrijving van de inhoud worden verder gegroepeerd in een deelvenster rechts van de miniatuur van de inhoud. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

CSS-eigenschappen van het informatievenster van het dialoogvenster

Voorbeeld: als u een deelvenster met inhoudsgegevens wilt instellen op een breedte van 300 pixels:

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

De titel van de inhoud wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

CSS-eigenschappen van de titel van het dialoogvenster

Voorbeeld - als u een titel voor inhoud wilt instellen voor het gebruik van een vet lettertype met een marge van 10 pixels:

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

De oorsprong van de inhoud wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

CSS-eigenschappen van oorsprong van inhoud in het dialoogvenster ​

Voorbeeld - als u de oorsprong van de inhoud wilt instellen op een marge van 10 pixels:

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

De beschrijving van de inhoud wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

CSS-eigenschappen van de inhoudsbeschrijving van het dialoogvenster

Voorbeeld - als u een inhoudsbeschrijving wilt instellen met een marge van 10 pixels en een 9-punts lettertype wilt gebruiken:

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

Wanneer een gebruiker onjuiste invoergegevens invoert en inlinevalidering mislukt, wordt een bericht weergegeven boven aan de hoofdtekst van het dialoogvenster. Dit bericht wordt ook weergegeven wanneer het dialoogvenster een foutbericht of een bevestigingsbericht moet weergeven wanneer het formulier wordt verzonden. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

CSS-eigenschappen van het foutbericht van het dialoogvenster

De knopinfo kan worden gelokaliseerd.

Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - Als u een bericht wilt instellen dat een lettertype van tien punten vet wordt gebruikt, hebt u een regelhoogte van 25 pixels en een opvulling van 20 pixels aan de linkerkant. En ten slotte, gebruik een pictogram van het uitroepteken, rode tekst als er een fout is, en geen pictogram en groene tekst als er succes is:

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

Als verticaal schuiven nodig is, wordt de schuifbalk weergegeven in het deelvenster aan de rechterrand van het dialoogvenster, dat wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel

CSS-eigenschappen van het schuifvenster van het dialoogvenster

Voorbeeld: als u een schuifvenster wilt instellen op een breedte van 44 pixels:

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

De vormgeving van het gebied van de schuifbalk wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

CSS-eigenschappen van de schuifbalk

Voorbeeld - als u een schuifbalk wilt instellen die 28 pixels breed is, een marge van 8 pixels vanaf de bovenkant, de rechterkant en de onderkant van het schuifvenster:

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

Schuifbalktrack is het gebied tussen de bovenste en onderste schuifknop. De component stelt automatisch de positie en de hoogte van het spoor in. De track wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

CSS-eigenschappen van de schuiftrack

Voorbeeld - voor het instellen van een schuifbalkvak met een breedte van 28 pixels en een grijze achtergrond:

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

De schuifbalkduim beweegt verticaal binnen een schuiftrackgebied. De verticale positie wordt volledig bepaald door de componentlogica, maar de hoogte van het blokje verandert niet dynamisch afhankelijk van de hoeveelheid inhoud. U kunt de duimhoogte en andere aspecten met de volgende CSS klassenselecteur vormen:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

CSS-eigenschappen van het blokje van de schuifbalk

Voorbeeld: als u een schuifbalkblokje van 28 x 45 pixels wilt instellen, hebt u een marge van 10 pixels boven en onder aan de schuifbalk en hebt u voor elke staat een andere illustratie:

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

De vormgeving van de bovenste en onderste schuifknoppen wordt bepaald door de volgende CSS-klassekiezers:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

Het is niet mogelijk om schuifknoppen met CSS te positioneren top, left, bottom, en right eigenschappen. In plaats daarvan worden ze automatisch door de viewerlogica geplaatst.

CSS-eigenschappen van de schuifknoppen boven en onder

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - voor het instellen van schuifknoppen met een resolutie van 28 x 32 pixels en voor elke status een andere illustratie:

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