DocumentatieNaslaggids voor dynamische mediasviewers

Sociaal aandeel social-share

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

Het gereedschap voor delen via sociale media wordt standaard in de linkerbovenhoek weergegeven. Het bestaat uit een knop en een deelvenster dat groter wordt wanneer de gebruiker op een knop klikt of tikt en dat afzonderlijke gereedschappen voor delen bevat.

De positie en grootte van het gereedschap voor sociaal delen in de gebruikersinterface van de viewer worden als volgt bepaald:

.s7ecatalogviewer .s7socialshare

CSS eigenschappen van het sociale aandeelhulpmiddel

margin-top
De verschuiving vanaf de bovenkant van de besturingsbalk.
margin=left
De afstand aan de volgende knoop op de linkerzijde, of de linkerkant van de controlebar als het de eerste knoop in een rij is.
width
De breedte van het gereedschap voor sociaal delen.
height
De hoogte van het gereedschap voor sociaal delen.

Voorbeeld - Een gereedschap voor sociaal delen instellen dat zich vier pixels van de bovenkant en vijf pixels van de rechterkant van de viewercontainer bevindt en is ingesteld op een grootte van 28 x 28 pixels:

.s7ecatalogviewer .s7socialshare {
margin-top: 4px;
margin-left: 10px; width:28px;
 height:28px;
}

De vormgeving van de knop voor het gereedschap Sociaal delen wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogviewer .s7socialshare .s7socialbutton

CSS eigenschappen van de sociale knoop

background-image
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 kenmerkenkiezer van state , die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld - Een knop voor een gereedschap voor sociaal delen instellen waarmee een andere afbeelding wordt weergegeven voor elk van de vier verschillende knopstatussen:

.s7ecatalogviewer .s7socialshare .s7socialbutton[state='up'] {
background-image:url(images/v2/SocialShare_video_dark_up.png);
}
.s7ecatalogviewer .s7socialshare .s7socialbutton[state='over'] {
background-image:url(images/v2/SocialShare_dark_over.png);
}
.s7ecatalogviewer .s7socialshare .s7socialbutton[state='down'] {
background-image:url(images/v2/SocialShare_dark_down.png);
}
.s7ecatalogviewer .s7socialshare .s7socialbutton[state='disabled'] {
background-image:url(images/v2/SocialShare_dark_disabled.png);
}

De weergave van het deelvenster met de afzonderlijke pictogrammen voor sociaal delen wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogviewer .s7socialshare .s7socialsharepanel

CSS eigenschappen van het sociale deelpaneel

background-color
De achtergrondkleur van het deelvenster.

Voorbeeld - Een deelvenster instellen voor transparante kleuren:

.s7ecatalogviewer .s7socialshare .s7socialsharepanel {
 background-color: transparent;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8