Delen insluiten embed-share

Het gereedschap Delen insluiten bestaat uit een knop die wordt toegevoegd aan het deelvenster Delen via sociale media 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 Delen insluiten wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embedshare

CSS-eigenschappen van het gereedschap Delen insluiten

width
Knopbreedte.
height
Hoogte van knop.
achtergrondafbeelding
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

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 Delen insluiten van 28 x 28 pixels instellen en een andere afbeelding weergeven voor elk van de vier verschillende knopstatussen:

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

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

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay

CSS-eigenschappen van de achtergrondoverlay

dekking
Dekking van achtergrondbedekking.
background-color
Kleur van achtergrondbedekking.

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

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

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

.s7ecatalogsearchviewer .s7embeddialog .s7dialog

CSS-eigenschappen van het dialoogvenster

border-radius
De randstraal van het dialoogvenster voor het geval dat het dialoogvenster niet de volledige browser neemt.
background-color
Achtergrondkleur van dialoogvenster.
width
De instelling moet ongedaan worden gemaakt of op 100% worden ingesteld. In dat geval gebruikt het dialoogvenster het volledige browservenster (deze modus heeft de voorkeur op aanraakapparaten).
height
De instelling moet ongedaan worden gemaakt of op 100% worden ingesteld. In dat geval gebruikt het dialoogvenster het volledige browservenster (deze modus heeft de voorkeur op aanraakapparaten).

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

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

De koptekst van het dialoogvenster bestaat uit een pictogram, een titeltekst en een sluitknop. De koptekstcontainer wordt bestuurd met

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader

CSS-eigenschappen van de koptekst van het dialoogvenster

opvullen
Opvulling binnen voor koptekstinhoud.

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

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline

CSS-eigenschappen van de dialoogregel

opvullen
Opvulling binnen voor koptekstpictogram en titel

Koptekstpictogram wordt bestuurd met de volgende CSS-klassenkiezer

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon

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

width
Pictogrambreedte.
height
Hoogte pictogram.
achtergrondafbeelding
Pictogramafbeelding.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

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

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext

CSS-eigenschappen van de koptekst van het dialoogvenster

font-weight
Fontgewicht.
tekengrootte
Hoogte lettertype.
font-family
Fontfamilie.
opvullen
Opvulling van interne tekst.

Knop Sluiten wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7closebutton

CSS-eigenschappen van de knop close ​

top
Verticale knoppositie ten opzichte van koptekstcontainer.
right
Horizontale knoppositie ten opzichte van koptekstcontainer.
width
Knopbreedte.
height
Hoogte van knop.
opvullen
Opvulling binnen van knop.
achtergrondafbeelding
Knopafbeelding voor elk frame.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

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

Voorbeeld - Een dialoogkoptekst instellen met opvulling, een pictogram van 24 x 14 pixels en een vette titel van 16 punten. Tot slot een knop Sluiten van 28 x 28 pixels, geplaatst op twee pixels van de bovenkant en twee pixels van de rechterkant van de dialoogcontainer:

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

Dialoogvoettekst bestaat uit de knop Annuleren. De voettekstcontainer wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter

CSS-eigenschappen van de voettekst van het dialoogvenster ​

border
Rand die u kunt gebruiken om de voettekst visueel te scheiden van de rest van het dialoogvenster.

De voettekst heeft een binnencontainer waarmee de knop behouden blijft. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer

CSS-eigenschappen van de knopcontainer van het dialoogvenster

opvullen
Opvulling binnen tussen de voettekst en de knop.

Selecteer Alle knoop wordt gecontroleerd met de volgende CSS klassenselecteur:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton

De knop is alleen beschikbaar op desktopsystemen.

CSS-eigenschappen van de knop Alles selecteren

width
Knopbreedte.
height
Hoogte van knop.
kleur
De tekstkleur van de knoop voor elke staat.
background-color
Achtergrondkleur van knop voor elk frame.
NOTE
De knop Alles selecteren ondersteunt de knop state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

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

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton

CSS-eigenschappen van de knop cancel van het dialoogvenster

width
Knopbreedte.
height
Hoogte van knop.
kleur
De tekstkleur van de knoop voor elke staat.
background-color
Achtergrondkleur van knop voor elk frame.
NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

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

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button

CSS-eigenschappen van de knop

font-weight
Dikte van lettertype knop.
tekengrootte
Tekengrootte van knop.
font-family
Lettertypefamilie knop.
regelhoogte
Teksthoogte in de knop. Heeft invloed op de verticale uitlijning.
box-shadow
Slagschaduw.
marge-rechts
Marge rechterknop.

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, een knop Alles selecteren van 82 x 34 en een tekstkleur en achtergrondkleur die voor elke knoptoestand anders zijn:

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

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 .s7embeddialog .s7dialogviewarea

CSS-eigenschappen van het weergavegebied van het dialoogvenster ​

height
De hoogte van het gebied van het hoofddialoogvenster. Deze mag alleen worden opgegeven wanneer het dialoogvenster in de bureaubladmodus werkt. Deze optie is niet van toepassing wanneer de grootte van het dialoogvenster zodanig is dat het volledige browservenster wordt ingenomen.
background-color
De achtergrondkleur van het gebied van het hoofddialoogvenster.
marge
Buitenmarge.

Voorbeeld - Als u een gebied in het hoofddialoogvenster wilt instellen op een hoogte van 300 pixels, hebt u een marge van 10 pixels en gebruikt u een witte achtergrond:

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

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

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

opvullen
Opvulling binnen.

Voorbeeld - als u formulierinhoud wilt instellen met tien pixelopvulling:

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

Alle statische labels in het dialoogvenster worden beheerd met

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel

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

CSS-eigenschappen van het label van het dialoogvenster. ​

font-weight
Breedte van lettertype label.
tekengrootte
Tekengrootte label.
font-family
Lettertypefamilie label.
kleur
Labeltekstkleur.

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

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

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

De grootte van de tekstkopie die boven op de insluitcode wordt weergegeven, wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide

CSS-eigenschappen van het invoerveld van het dialoogvenster

width
Breedte van invoerveld.
opvullen
Opvulling binnen.

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

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

De insluitcode wordt ondergebracht in container en bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

CSS-eigenschappen van de invoercontainer van het dialoogvenster

width
De breedte van de insluitcodecontainer.
border
Rand rondom de container van de insluitcode.
opvullen
Opvulling binnen.

Voorbeeld - Als u een grijze rand van één pixel wilt instellen rondom de ingesloten codetekst, maakt u deze 430 pixels breed en hebt u een opvulling van tien pixels:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

De eigenlijke ingesloten codetekst wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

CSS-eigenschappen van de invoercontainer van het dialoogvenster

tekstomloop
Tekstomloopstijl.

Voorbeeld: de insluitcode instellen voor gebruik break-word tekstterugloop:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

Label en vervolgkeuzelijst voor insluitgrootte bevinden zich onder in het dialoogvenster en worden geplaatst in een container die wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

CSS-eigenschappen van het dialoogvenster sluiten formaatvenster in

opvullen
Opvulling binnen.

Voorbeeld - als u een deelvenster met insluitgrootte wilt instellen met tien pixels opvulling:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

De grootte en uitlijning van het label voor de insluitgrootte worden bepaald met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

CSS-eigenschappen van het dialoogvenster sluiten formaatvenster in

vertical-align
Verticale uitlijning van labels.
width
Labelbreedte.

Voorbeeld - om het insluitingsgroottelabel in te stellen op top-align en 80 pixels breed:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

De breedte van de keuzelijst met insluitgrootte wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox

CSS-eigenschappen van de keuzelijst met invoervak

width
Breedte van keuzelijst met invoervak.
NOTE
De keuzelijst met invoervak ondersteunt de expanded kenmerkkiezer met mogelijke waarden voor true en false. De waarde true wordt gebruikt wanneer in een keuzelijst met invoervak een van de vooraf gedefinieerde insluitgrootten wordt weergegeven. Dit betekent dat alle beschikbare breedte in beslag moet worden genomen. De waarde false wordt gebruikt wanneer de optie voor aangepaste grootte is geselecteerd in de keuzelijst met invoervak, zodat deze kleiner wordt zodat ruimte beschikbaar is voor invoervelden voor aangepaste breedte en hoogte.

Voorbeeld - om het invoervak Grootte insluiten in te stellen op 300 pixels breed bij het weergeven van een vooraf gedefinieerd item en op 110 pixels breed bij het weergeven van een aangepaste grootte:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

De hoogte van de tekst van de keuzelijst met invoervak wordt gedefinieerd door een speciaal binnenelement en wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext

CSS-eigenschappen van de tekst van het invoervak

height
Hoogte van tekstvak met invoervak.

Voorbeeld - voor het instellen van de ingesloten grootte voor de teksthoogte in het invoervak op 40 pixels:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

De keuzelijst met invoervak heeft rechts een 'vervolgkeuzelijst' en wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton

CSS-eigenschappen van de keuzelijst met invoervak

top
Verticale knoppositie in de keuzelijst met invoervak.
right
Horizontale knoppositie binnen de keuzelijst met invoervak.
width
Knopbreedte.
height
Hoogte van knop.
achtergrondafbeelding
Knopafbeelding voor elk frame.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

Voorbeeld - om een drop-down knoop aan 28 x 28 pixel te plaatsen en een afzonderlijke beeld voor elke staat te hebben:

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

Het deelvenster met de lijst met insluitgrootten die wordt weergegeven wanneer de keuzelijst met invoervak wordt geopend, wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown

De grootte en positie van het deelvenster worden bepaald door de component. Het is niet mogelijk deze te wijzigen met CSS.

CSS-eigenschappen van de keuzelijst met invoervak

border
Rand van deelvenster.

Voorbeeld - als u het deelvenster met invoervak wilt instellen op een grijze rand van één pixel:

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

Eén item in een vervolgkeuzelijst dat wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor

CSS-eigenschappen van het vervolgkeuzepuntanker

background-color
Achtergrond van item.

Voorbeeld - als u het deelvensteritem van de keuzelijst met invoervak wilt instellen op een witte achtergrond:

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

Een vinkje links van het geselecteerde item in het deelvenster met keuzelijst met invoervak dat wordt bestuurd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark

CSS-eigenschappen van het selectievakje

width
Pictogrambreedte.
height
Hoogte pictogram.
achtergrondafbeelding
Afbeelding item.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

Voorbeeld - om het pictogram van het vinkje aan 25 x 25 pixel te plaatsen:

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

Als de optie Aangepaste grootte is geselecteerd in de keuzelijst Grootte insluiten, worden rechts in het dialoogvenster twee extra invoervelden weergegeven waarmee de gebruiker een aangepaste insluitgrootte kan invoeren. Deze velden worden verpakt in een container die wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel

CSS-eigenschappen van het deelvenster Aangepaste grootte van het dialoogvenster

left
Afstand tot het invoervak Grootte insluiten.

Voorbeeld - als u het deelvenster voor invoervelden met een aangepaste grootte wilt instellen op 20 pixels rechts van de keuzelijst met invoervak:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

Elk invoerveld met een aangepaste grootte wordt verpakt in een container die een rand rendert en de marge tussen de velden instelt. De klasse wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize

CSS-eigenschappen van de aangepaste grootte van het dialoogvenster

border
Rand rond het invoerveld.
width
Breedte van invoerveld.
marge
Invoerveldmarge.
opvullen
Opvulling invoerveld.

Voorbeeld - U kunt als volgt de invoervelden voor aangepaste grootten instellen met een grijze rand, marge, opvulling en een breedte van 70 pixels:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

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 .s7embeddialog .s7dialogscrollpanel

CSS-eigenschappen van het schuifvenster van het dialoogvenster

width
Breedte van deelvenster Schuiven.

Voorbeeld: een schuifvenster instellen op 44 pixels breed

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

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

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar

CSS-eigenschappen van de schuifbalk

width
Breedte schuifbalk.
top
De verticale verschuiving van de schuifbalk vanaf de bovenkant van het schuifvenster.
bottom
De verticale verschuiving van de schuifbalk vanaf de onderkant van het schuifvenster.
right
De verschuiving van de horizontale schuifbalk ten opzichte van de rechterrand van het schuifvenster.

Voorbeeld - om een schuifbalk in te stellen die 28 pixels breed is en een marge van 8 pixels heeft vanaf de bovenkant, de rechterkant en de onderkant van het schuifvenster:

.s7ecatalogsearchviewer .s7embeddialog .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 .s7embeddialog .s7scrollbar .s7scrolltrack

CSS-eigenschappen van schuifbalktrack

width
Trackbreedte.
background-color
Achtergrondkleur bijhouden.

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

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

Het schuifbalkblokje beweegt verticaal binnen een schuiftrackgebied. De verticale positie wordt volledig bepaald door de componentlogica. De hoogte van het blokje verandert echter niet dynamisch, afhankelijk van de hoeveelheid inhoud. De duimhoogte en andere aspecten kunnen met de volgende CSS klassenselecteur worden gevormd:

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb

CSS-eigenschappen van het blokje van de schuifbalk

width
Breedte duim.
height
Hoogte duim.
opvullen boven
De verticale opvulling tussen de bovenkant van de track.
opvullen-onder
De verticale opvulling tussen de onderkant van de track.
achtergrondafbeelding
De afbeelding die wordt weergegeven voor een bepaalde blokstatus.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

NOTE
Miniatuur ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende blokstatussen: up, down, over, en disabled.

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

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

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7embeddialog .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

width
Knopbreedte.
height
Hoogte van knop.
achtergrondafbeelding
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

NOTE
Deze knoppen ondersteunen de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden: up, down, over, en disabled.

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 .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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8