Compartilhamento em redes sociais

A ferramenta de compartilhamento em redes sociais é exibida no canto superior direito por padrão. Ele consiste em um botão e um painel que se expande 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 em redes sociais na interface do usuário do visualizador são controlados com o seguinte:

.s7interactivevideoviewer .s7socialshare

Propriedades de CSS da ferramenta de compartilhamento em redes sociais

top

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

left

Posição horizontal da ferramenta de compartilhamento em redes sociais em relação ao container do visualizador.

width

A largura da ferramenta de compartilhamento em redes sociais.

altura

A altura da ferramenta de compartilhamento em redes sociais.

Exemplo

Para configurar uma ferramenta de compartilhamento em redes sociais posicionada a quatro pixels da parte superior e a cinco pixels da direita do container do visualizador e dimensionada em 28 x 28 pixels.

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

A aparência do botão da ferramenta de compartilhamento em redes sociais é controlada com o seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7socialshare .s7socialbutton

Propriedades de CSS do botão da ferramenta de compartilhamento em redes sociais

background-image

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

posição de fundo

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

Consulte CSS Sprites .

OBSERVAÇÃO

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

A dica de ferramenta do botão pode ser localizada. Consulte Localização de elementos da interface do usuário.

Exemplo

Para configurar um botão de ferramenta de compartilhamento em redes sociais que exibe uma imagem diferente para cada um dos quatro estados de botão diferentes.

.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='up'] { 
background-image:url(images/v2/SocialShare_video_dark_up.png); 
} 
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='over'] { 
background-image:url(images/v2/SocialShare_dark_over.png); 
} 
.s7interactivevideoviewer .s7socialshare .s7socialbutton[state='down'] { 
background-image:url(images/v2/SocialShare_dark_down.png); 
} 
.s7interactivevideoviewer .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 em redes sociais é controlada pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7socialshare .s7socialsharepanel

Propriedades de CSS do painel de compartilhamento em redes sociais

cor de fundo

A cor de plano de fundo do painel.

Exemplo

Para configurar um painel para ter uma cor transparente:

.s7interactivevideoviewer .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