Afdrukken print

Het gereedschap Afdrukken bestaat uit een knop die wordt toegevoegd aan de besturingsbalk en het modale dialoogvenster dat wordt weergegeven wanneer het gereedschap wordt geactiveerd.

De weergave van de knop Afdrukken wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7print

CSS-eigenschappen van de knop Afdrukken

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

Voorbeeld - Een afdrukknop van 28 x 28 pixels instellen en een andere afbeelding voor elk van de vier verschillende knopstatussen weergeven.

.s7ecatalogsearchviewer .s7print {
margin-top: 4px;
margin-left: 10px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7print[state='up'] {
background-image:url(images/v2/Print_dark_up.png);
}
.s7ecatalogsearchviewer .s7print[state='over'] {
background-image:url(images/v2/Print_dark_over.png);
}
.s7ecatalogsearchviewer .s7print[state='down'] {
background-image:url(images/v2/Print_dark_down.png);
}
.s7ecatalogsearchviewer .s7print[state='disabled'] {
background-image:url(images/v2/Print_dark_disabled.png);
}

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

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay

CSS-eigenschappen van de backoverlay

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

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

Standaard wordt het modale dialoogvenster gecentreerd weergegeven op het scherm van desktopsystemen. De positie en grootte van het dialoogvenster worden beheerd door de component. Het dialoogvenster wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

CSS-eigenschappen van het dialoogvenster

Voorbeeld - Een dialoogvenster instellen voor een grijze achtergrond:

.s7ecatalogsearchviewer .s7printdialog .s7dialog {
background-color: #dddddd;
}

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

CSS-eigenschappen van de koptekst van het dialoogvenster

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

CSS-eigenschappen van de dialoogregel

Koptekstpictogram wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7printdialog .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 .s7printdialog .s7dialogheadertext

CSS-eigenschappen van de koptekst van het dialoogvenster

Knop Sluiten wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7printdialog .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 22 x 22 pixel, en een gewaagde 16 punttitel. Tot slot plaatst een knop Sluiten van 28 x 28 pixels twee pixels van de bovenkant en twee pixels van de rechterkant van de container van het dialoogvenster:

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

De voettekst van het dialoogvenster bestaat uit de knoppen Annuleren en Verzenden naar afdrukken. De voettekstcontainer wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7printdialog .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 .s7printdialog .s7dialogbuttoncontainer

CSS-eigenschappen van de knopcontainer van het dialoogvenster

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

CSS-eigenschappen van de knop cancel van het dialoogvenster

De knop Verzenden naar afdrukken wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7printdialog .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 .s7printdialog .s7dialogfooter .s7button

CSS-eigenschappen van de knop

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

Voorbeeld - Een dialoogvenstervoettekst instellen met een knop Annuleren van 64 x 34 en een knop Verzenden naar afdruk van 96 x 34, waarbij de tekstkleur en de achtergrondkleur voor elke knopstatus anders zijn:

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton {
 width:96px;
 height:34px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

Het hoofddialoogvenster tussen de kop- en voettekst bevat inhoud van het dialoogvenster. 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 .s7printdialog .s7dialogviewarea

CSS-eigenschappen van het weergavegebied van het dialoogvenster ​

Voorbeeld - Als u een hoofddialoogvenster wilt instellen met een automatisch berekende hoogte, een marge van 10 pixels wilt hebben en een witte achtergrond wilt gebruiken:

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:auto;
}

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

CSS-eigenschappen van de hoofdtekst van het dialoogvenster ​

Voorbeeld - Formulierinhoud instellen op tien pixelopvulling:

.s7ecatalogsearchviewer .s7printdialog .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 - U stelt een dialoogvenster in met tien pixels opvulling voor elke regel:

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

De grootte van het blok met dialoogvenster-inhoud wordt beheerd met de volgende CSS-klassenkiezer:

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

CSS-eigenschappen van de invoerbreedte van het dialoogvenster

Voorbeeld - als u een inhoudsblok wilt instellen op 430 pixels breed en onderaan een opvulling van 10 pixels bevat:

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

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

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

Deze klasse is niet geschikt voor het bepalen van de grootte of positie van het label, omdat u deze kunt toepassen op tekst op verschillende plaatsen in 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 .s7printdialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

De controles van de input worden verpakt in de container en met de volgende CSS klassenselecteur bestuurd:

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

CSS-eigenschappen van de invoercontainer van het dialoogvenster

Voorbeeld - om een opvulling van 30 pixels in te stellen vanaf de linkerrand van het dialoogvenster.

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer {
    padding-left: 30px;
}

Keuzerondjes en de bijschrifttekst worden bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

CSS-eigenschappen van de optie van het dialoogvenster

De afstand tussen het keuzerondje en het bijschrift wordt geregeld met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

CSS-eigenschappen van de invoer van opties in het dialoogvenster

Numerieke kiezers voor het selecteren van het afdrukbereik worden beheerd met de volgende CSS-klassenkiezer

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

CSS-eigenschappen van het dialoogvenster: afdrukbereik

Voorbeeld - als u alle keuzerondjes wilt instellen op 150 pixels breed met zwarte tekst, een tussenruimte van tien pixels en een numerieke kiezer van 42 pixels breed:

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption {
    color: #000000;
    width: 150px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption input {
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange {
    margin-left: 10px;
    margin-right: 10px;
    width: 42px;
}

De horizontale scheidingslijn tussen de selectie van het paginabereik en de gedeelten van de afdruklay-out wordt geregeld met de volgende CSS-klassenkiezer:

 .s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider

CSS-eigenschappen van de horizontale scheidingslijn

Voorbeeld - voor het instellen van een grijze scheidingslijn van 430 pixels breed met een verticale opvulling van 10 pixels aan beide zijden en een marge van 10 pixels aan de bovenkant:

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
    border-top: 1px solid #aaaaaa;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 430px;
}