Compartilhamento social

A ferramenta de compartilhamento social aparece no canto superior direito por padrão. Consiste em um botão e um painel que é expandido quando o usuário clica ou toca em um botão e contém ferramentas de compartilhamento individuais.

A posição e o tamanho da ferramenta de compartilhamento social na interface do usuário do visualizador são controlados com o seguinte:

.s7videoviewer .s7socialshare

Propriedades CSS da ferramenta de compartilhamento social

top

Posição vertical da ferramenta de compartilhamento em redes sociais em relação ao contêiner do visualizador.

left

Posição horizontal da ferramenta de compartilhamento social em relação ao contêiner do visualizador.

width

A largura da ferramenta de compartilhamento social.

altura

A altura da ferramenta de compartilhamento social.

Exemplo - configure uma ferramenta de compartilhamento social que esteja posicionada em quatro pixels da parte superior e em cinco pixels à direita do contêiner do visualizador e seja dimensionada para 28 x 28 pixels.

.s7videoviewer .s7socialshare { 
 top:4px; 
 right:5px; 
 width:28px; 
 height:28px; 
}

A aparência do botão de ferramenta de compartilhamento social é controlada pelo seguinte seletor de classe CSS:

.s7videoviewer .s7socialshare .s7socialbutton

Propriedades CSS do botão social

imagem de fundo

A imagem exibida para um determinado estado de botão.

posição de fundo

Posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte Sprites CSS .

OBSERVAÇÃO

Esse botão suporta o seletor de atributos state, que pode ser usado para aplicar skins diferentes a estados de botão diferentes.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Exemplo - configure um botão de ferramenta de compartilhamento social que exibe uma imagem diferente para cada um dos quatro estados de botão diferentes.

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

A aparência do painel que contém os ícones individuais de compartilhamento social é controlada pelo seguinte seletor de classe CSS:

.s7videoviewer .s7socialshare .s7socialsharepanel

Propriedades de CSS do painel de compartilhamento social

cor do fundo

A cor de plano de fundo do painel.

Exemplo - configure um painel para ter uma cor transparente:

.s7videoviewer .s7socialshare .s7socialsharepanel { 
 background-color: transparent; 
}

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now