DokumentationReferenshandbok för Dynamic Media Viewer

Bädda in resurs embed-share

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Utvecklare
  • Användare

Verktyget Bädda in delning består av en knapp som läggs till på panelen Dela via sociala medier och den modala dialogruta som visas när verktyget aktiveras. Knappens position hanteras helt av verktyget för social delning.

Utseendet på knappen för att bädda in delning styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embedshare

CSS-egenskaper för det inbäddade delningsverktyget

width
Knappbredd.
height
Knapphöjd.
background-image
Bilden som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Det går att ta bort knappen från panelen Dela via CSS-egenskapen display:none i CSS-klassen.

Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Så här ställer du in en inbäddad delningsknapp som är 28 x 28 pixlar och visar olika bilder för de fyra olika knapplägena:

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

Bakgrundsöverlägget som täcker webbsidan när dialogrutan är aktiv styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay

CSS-egenskaper för bakgrundsövertäckningen

opacitet
Opacitet för bakgrundsövertäckning.
background-color
Bakgrundsövertäckningsfärg.

Exempel - om du vill ställa in en bakgrundsövertäckning som grå med 70 % opacitet:

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

Som standard visas den modala dialogrutan centrerat på skärmen på stationära datorer och tar hela webbsidans område på touchenheter. I samtliga fall hanteras placeringen och storleken på dialogrutan av komponenten. Dialogrutan styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialog

CSS-egenskaper för dialogrutan

border-radius
Dialogrutans kantradie, om dialogrutan inte tar hela webbläsaren.
background-color
Dialogrutans bakgrundsfärg.
width
Ska antingen vara unset eller inställd på 100 %, vilket innebär att dialogrutan tar hela webbläsarfönstret (det här läget rekommenderas på pekenheter).
height
Ska antingen vara unset eller inställd på 100 %, vilket innebär att dialogrutan tar hela webbläsarfönstret (det här läget rekommenderas på pekenheter).

Exempel - för att ställa in dialogrutan så att den använder hela webbläsarfönstret och har en vit bakgrund på pekenheter:

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

Dialogrutans rubrik består av en ikon, en titeltext och en stängningsknapp. Rubrikbehållaren styrs med

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader

CSS-egenskaper för dialogrutans rubrik

utfyllnad
Inre utfyllnad för rubrikinnehåll.

Ikonen och rubriktexten placeras i en extra behållare som styrs med

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline

CSS-egenskaper för dialograden

utfyllnad
Inre utfyllnad för rubrikikonen och titeln

Rubrikikonen styrs med följande CSS-klassväljare

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon

CSS-egenskaper för dialogrutans rubrikikon

width
Ikonens bredd.
height
Ikonhöjd.
background-image
Ikonbild.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

Rubriken styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext

CSS-egenskaper för dialogrutans rubriktext

font-weight
Teckenbredd.
font-size
Teckenhöjd.
font-family
Teckensnittsfamilj.
utfyllnad
Intern textutfyllnad.

Stängningsknappen styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7closebutton

CSS-egenskaper för stängningsknappen ​

övre
Lodrät knappposition i förhållande till rubrikbehållare.
höger
Vågrät knappposition i förhållande till rubrikbehållare.
width
Knappbredd.
height
Knapphöjd.
utfyllnad
Knappens inre utfyllnad.
background-image
Knappbild för varje läge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Om du vill ställa in ett dialoghuvud med utfyllnad, en 24 x 14 pixlar-ikon och en 16 punkters fetstil. Slutligen en stängningsknapp på 28 x 28 pixlar, placerad två pixlar uppifrån och två pixlar från höger i dialogrutan:

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

Sidfoten i dialogrutan består av knappen "Avbryt". Sidfotsbehållaren styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter

CSS-egenskaper för dialogrutans sidfot ​

kant
Kant som du kan använda för att visuellt separera sidfoten från resten av dialogrutan.

Sidfoten har en inre behållare som behåller knappen. Den styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer

CSS-egenskaper för dialogruteknappbehållaren

utfyllnad
Inre utfyllnad mellan sidfoten och knappen.

Knappen Markera allt styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton

Knappen är bara tillgänglig på stationära datorer.

CSS-egenskaper för knappen Markera allt

width
Knappbredd.
height
Knapphöjd.
färg
Knapptextfärg för varje läge.
background-color
Knappbakgrundsfärg för varje läge.
NOTE
Knappen Markera allt har stöd för attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Knappen Avbryt styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton

CSS-egenskaper för knappen Avbryt i dialogrutan

width
Knappbredd.
height
Knapphöjd.
färg
Knapptextfärg för varje läge.
background-color
Knappbakgrundsfärg för varje läge.
NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Båda knapparna har dessutom en gemensam CSS-klass som kan innehålla CSS-inställningar som är desamma för andra dialogruteknappar:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button

CSS-egenskaper för knappen

font-weight
Knappens teckensnittsbredd.
font-size
Knappens teckenstorlek.
font-family
Knappteckensnittsfamilj.
line-height
Texthöjd inuti knappen. Påverkar lodrät justering.
box-shadow
Skugga.
marginal-right
Högerknappsmarginal.

Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Om du vill ställa in en sidfot i en dialogruta med en Avbryt-knapp på 64 x 34, en Markera alla-knapp på 82 x 34 och har en textfärg och bakgrundsfärg som är olika för varje knappläge:

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

Huvuddialogrutan, mellan sidhuvudet och sidfoten, innehåller rullningsbart dialogruteinnehåll och rullningspanelen till höger. I samtliga fall hanterar komponenten bredden på det här området, det går inte att ange den i CSS. Huvudområdet i dialogrutan styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea

CSS-egenskaper i dialogrutans visningsområde ​

height
Höjden på området i huvuddialogrutan. Den ska bara anges när dialogrutan fungerar i skrivbordsläge. Det är inte tillämpligt när dialogrutans storlek ändras så att den upptar hela webbläsarfönstret.
background-color
Bakgrundsfärgen i huvuddialogrutan.
marginal
Yttre marginal.

Exempel - Om du vill ställa in ett huvudområde i dialogrutan till 300 pixlars höjd har du en marginal på tio pixlar och använder en vit bakgrund:

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

Allt formulärinnehåll (som etiketter och inmatningsfält) finns i en behållare som styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody

Om höjden på den här behållaren verkar vara större än huvudområdet i dialogrutan aktiveras en lodrät rullning automatiskt av komponenten.

CSS-egenskaper för dialogrutans brödtext ​

utfyllnad
Inre utfyllnad.

Exempel - om du vill ställa in formulärinnehåll så att det har en utfyllnad på tio pixlar:

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

Alla statiska etiketter i dialogruteformuläret styrs med

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel

Den här klassen är inte lämplig för att styra etikettens storlek eller placering eftersom du kan använda den på texter på olika ställen i användargränssnittet.

CSS-egenskaper för dialogruteetiketten. ​

font-weight
Etikettens teckensnittsbredd.
font-size
Teckensnittsstorlek för etikett.
font-family
Etikettteckensnittsfamilj.
färg
Textfärg för etikett.

Dialogruteetiketter kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - om du vill ställa in alla etiketter till grått, fet med ett teckensnitt på nio pixlar:

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

Storleken på textkopian som visas ovanpå inbäddningskoden styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide

CSS-egenskaper för dialogrutans inmatningsfält

width
Bredd på indatafält.
utfyllnad
Inre utfyllnad.

Exempel - för att ange att textkopian ska vara 430 pixlar bred och ha en utfyllnad på tio pixlar längst ned:

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

Inbäddningskoden kapslas i behållaren och styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

CSS-egenskaper för dialogrutans indatabehållare

width
Bredden på behållaren för inbäddningskoden.
kant
Kant runt behållaren för inbäddningskoden.
utfyllnad
Inre utfyllnad.

Exempel - om du vill ange en grå kant på en pixel runt inbäddad kodtext, gör den 430 pixlar bred och har en utfyllnad på tio pixlar:

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

Den faktiska inbäddningskodtexten styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

CSS-egenskaper för dialogrutans indatabehållare

automatisk radbrytning
Radbrytningsformat.

Exempel - Så här ställer du in inbäddningskoden så att break-word ordomslutning används:

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

Etiketten och listrutan för inbäddningsstorlek finns längst ned i dialogrutan och placeras i en behållare som styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

CSS-egenskaper i dialogrutan, bädda in storlekspanelen

utfyllnad
Inre utfyllnad.

Exempel - för att ställa in en panel för inbäddningsstorlek så att den har tio pixlar utfyllnad:

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

Storleken och justeringen för etiketten för inbäddningsstorlek styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

CSS-egenskaper i dialogrutan, bädda in storlekspanelen

lodrät justering
Lodrät etikettjustering.
width
Etikettens bredd.

Exempel - för att ange att etiketten för inbäddningsstorlek ska vara justerad uppåt och 80 pixlar bred:

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

Bredden på kombinationsrutan för inbäddningsstorlek styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox

CSS-egenskaper för kombinationsrutan

width
Bredd på kombinationsruta.
NOTE
Kombinationsrutan stöder attributväljaren expanded med möjliga värden true och false. Värdet true används när kombinationsrutan visar en av fördefinierade inbäddningsstorlekar, vilket innebär att all tillgänglig bredd bör användas. Värdet false används när alternativet för anpassad storlek väljs i kombinationsrutan, så det bör krympa för att tillåta utrymme för anpassade indatafält för bredd och höjd.

Exempel - Att ställa in kombinationsrutan för inbäddningsstorlek till 300 pixlar bred när ett fördefinierat objekt visas och 110 pixlar bred när en anpassad storlek visas:

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

Höjden på kombinationsrutetexten definieras av ett särskilt inre element och styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext

CSS-egenskaper för kombinationsruttexten

height
Texthöjd för kombinationsruta.

Exempel - för att ställa in kombinationsrutans inbäddningsstorlek på 40 pixlar:

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

Kombinationsrutan har en nedrullningsknapp till höger och den styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton

CSS-egenskaper för kombinationsruteknappen

övre
Lodrät knappposition inuti kombinationsrutan.
höger
Vågrät knappposition inuti kombinationsrutan.
width
Knappbredd.
height
Knapphöjd.
background-image
Knappbild för varje läge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Den här knappen stöder attributväljaren state som kan användas för att tillämpa olika skal på olika knapplägen.

Exempel - om du vill ställa in en nedrullningsknapp på 28 x 28 pixlar och ha en separat bild för varje läge:

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

Panelen med listan över inbäddningsstorlekar som visas när kombinationsrutan öppnas, styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown

Panelens storlek och position styrs av komponenten. Det går inte att ändra den med CSS.

CSS-egenskaper för kombinationsrutans listruta

kant
Panelkant.

Exempel - för att ange att kombinationsrutepanelen ska ha en grå kant på en pixel:

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

Ett enskilt objekt i en nedrullningsbar panel som styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor

CSS-egenskaper för det nedrullningsbara objektets ankarpunkt

background-color
Objektbakgrund.

Exempel - om du vill ange att objektet i kombinationsrutepanelen ska ha en vit bakgrund:

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

En bock visas till vänster om det markerade objektet i kombinationsrutepanelen som styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark

CSS-egenskaper för kryssrutan

width
Ikonens bredd.
height
Ikonhöjd.
background-image
Objektbild.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

Exempel - för att ange bockmarkeringsikonen till 25 x 25 pixlar:

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

När alternativet Anpassad storlek är markerat i kombinationsrutan för inbäddningsstorlek visas två extra inmatningsfält till höger så att användaren kan ange en anpassad inbäddningsstorlek. Dessa fält placeras i en behållare som styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel

CSS-egenskaper för dialogrutans panel för anpassad storlek

kvar
Avstånd från kombinationsrutan för inbäddningsstorlek.

Exempel - om du vill att fältpanelen för anpassade indatastorlekar ska vara 20 pixlar till höger om kombinationsrutan:

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

Varje indatafält med anpassad storlek kapslas i en behållare som återger en kant och anger marginalen mellan fälten. Den styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize

CSS-egenskaper för dialogrutans anpassade storlek

kant
Kant runt inmatningsfältet.
width
Bredd på indatafält.
marginal
Indatafältsmarginal.
utfyllnad
Utfyllnad för indatafält.

Exempel - Så här anger du att indatafälten med en pixelgrå kant, marginal, utfyllnad och ska vara 70 pixlar breda:

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

Om du behöver rulla lodrätt återges rullningslisten i panelen nära den högra kanten av dialogrutan, som styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel

CSS-egenskaper för dialogrutans rullningspanel

width
Bredd på rullningspanelen.

Exempel - för att ställa in en rullningspanel så att den är 44 pixlar bred

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

Utseendet på rullningslistområdet styrs med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar

CSS-egenskaper för rullningslisten

width
Bredd på rullningslist.
övre
Den lodräta rullningslistens förskjutning från rullningspanelens överkant.
nederkant
Den lodräta rullningslistens förskjutning från rullningspanelens nederkant.
höger
Den vågräta rullningslistens förskjutning från rullningspanelens högra kant.

Exempel - för att ställa in en rullningslist som är 28 pixlar bred och har en åtta pixelmarginaler uppifrån, till höger och nedåt på rullningspanelen:

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

Rullningslistens spår är området mellan den övre och den nedre rullningsknappen. Komponenten ställer automatiskt in spårets position och höjd. Spåret styrs med följande CSS-klassväljare

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack

CSS-egenskaper för rullningslistspåret

width
Spårbredd.
background-color
Spåra bakgrundsfärg.

Exempel - för att ställa in ett rullningslistspår som är 28 pixlar brett och har en grå bakgrund:

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

Rullningslistens reglage rör sig lodrätt inom ett rullningsspårsområde. Dess lodräta position styrs helt av komponentlogiken. Höjden på tummen ändras dock inte dynamiskt beroende på mängden innehåll. Miniatyrhöjden och andra aspekter kan konfigureras med följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb

CSS-egenskaper för rullningslistens reglage

width
Miniatyrbredd.
height
Höjd på tummen.
-utfyllnadspunkt
Den lodräta utfyllnaden mellan spårets överkant.
utfyllnad-nederkant
Den lodräta utfyllnaden mellan spårets nederkant.
background-image
Bilden som visas för ett visst tumläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Tummen stöder attributväljaren state, som kan användas för att tillämpa olika skal på olika tumlägen: up, down, over och disabled.

Exempel - om du vill ställa in en rullningslist som är 28 x 45 pixlar, har en marginal på tio pixlar över och under och har olika teckningar för varje läge:

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

Utseendet på de övre och nedre rullningsknapparna styrs av följande CSS-klassväljare:

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

Det går inte att placera rullningsknappar med CSS-egenskaperna top, left, bottom och right. I stället placerar visningsprogramlogiken dem automatiskt.

CSS-egenskaper för den övre och undre rullningsknappen

width
Knappbredd.
height
Knapphöjd.
background-image
Bilden som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Dessa knappar har stöd för attributväljaren state, som kan användas för att tillämpa olika skal på olika knapplägen: up, down, over och disabled.

Knappens tips kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - för att ställa in rullningsknappar som är 28 x 32 pixlar och har olika teckningar för varje läge:

.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