APIs de componente

`gwd-360gallery`

Um objeto de galeria que mostra um objeto em rotação.

Propriedades

Nome	Descrição
`images:string`	Indica uma string de caminhos de imagens usadas na galeria, separada por vírgula.
`autoplay:boolean`	A galeria precisa exibir automaticamente as imagens depois que ela carregar.
`wrap:boolean`	A galeria precisa permitir que o usuário deslize entre o primeiro e o último frame, em vez de parar nas extremidades.

Eventos

Nome	Descrição
`firstinteraction`	É enviado quando o usuário interage com a galeria pela primeira vez.
`allframesviewed`	É enviado quando todos os frames da galeria são exibidos pelo menos uma vez.
`allframesloaded`	É enviado quando todos os frames da galeria são carregados.
`frameshown`	É enviado quando um novo frame é exibido.
`frameactivated`	É enviado quando um novo frame começou a ser ativado, mesmo que ainda não seja visível.
`frametap`	É enviado quando o usuário toca em um frame.

Métodos

Nome	Descrição
`goToFrame(frame:number, opt_animate:string, opt_direction:string)`	Anima para o frame especificado.
`rotateOnce(opt_duration:number, opt_direction:string)`	Gira o objeto na galeria uma vez.
`goForwards()`	Move a galeria para frente em um frame.
`goBackwards()`	Move a galeria para trás em um frame.

Ponto de acesso 3D

`gwd-3d-hotspot`

É um elemento para exibir anotações em um modelo 3D.

Propriedades

Nome	Descrição
`data-position:string`	É a posição do ponto de acesso.
`data-normal:string`	É o normal do ponto de acesso.
`hotspot-name:string`	É o nome do ponto de acesso.
`hotspot-title:string`	É o texto do título a ser exibido no card de informação.
`hotspot-description:string`	É o texto de descrição a ser exibido no card de informação.
`hide-infocard:boolean`	Indica se o card de informação deve ser oculto.

Contêiner de ponto de acesso 3D

`gwd-3d-hotspot-container`

É um elemento de contêiner para anotações em um modelo 3D.

Propriedades

Nome	Descrição
`up-image:file`	É o URL para a imagem dos pontos de acesso 3D no estado não pressionado.
`over-image:file`	É o URL para a imagem dos pontos de acesso 3D no estado mouseover ou ao passar o cursor.
`down-image:file`	É o URL para a imagem dos pontos de acesso 3D no estado pressionado.

Modelo 3D

`gwd-3d-model`

É um componente do visualizador em 3D.

Propriedades

Nome	Descrição
`id-url:download`	É o código ou o URL do modelo 3D.
`data-gwd-refresh-assets:string`	É um atributo usado pelo Google Web Designer para determinar se os recursos 3D precisam ser atualizados.
`glass:boolean`	Ativa o material de vidro para o modelo 3D.
`src:string`	É o modelo a ser exibido.
`transparent:boolean`	Ativa um plano de fundo transparente no modelo 3D.
`gesture-cue-icon:file`	É o ícone da dica de gesto.
`gesture-cue-text:string`	É o texto exibido abaixo do ícone da dica de gesto.
`gesture-cue-duration:number`	É a duração (em segundos) para exibir a dica de gesto. Um valor de -1 significa que não há limite de tempo.

Eventos

Nome	Descrição
`scene-rendered`	É enviado depois que a cena do modelo 3D é renderizada pela primeira vez.
`camera-changed`	É enviado quando uma das propriedades da câmera tridimensional é alterada. O objeto event.detail contém todas as propriedades da câmera.
`hotspot-clicked`	É enviado quando um ponto de acesso é clicado. O objeto event.detail contém o nome do ponto de acesso clicado.
`interaction-start`	É enviado quando o usuário começa a interagir com o modelo 3D.
`interaction-end`	É enviado quando o usuário termina de interagir com o modelo 3D.

Métodos

Nome	Descrição
`setYaw(yaw:number)`	Define o ângulo de guinada (em graus) sem nenhuma animação, considerando os limites da câmera.
`setTargetYaw(targetYaw:number)`	Define o ângulo de guinada desejado (em graus) com base nos limites da câmera ou na base da rotação entre -360 e 360 graus.
`setTargetPitch(targetPitch:number)`	Define o ângulo da verticalidade desejada (em graus).
`incrementTargetPitch(pitchDelta:number)`	Incrementa a verticalidade desejada de um ângulo delta (em graus).
`setTargetZoom(targetZoom:number)`	Define o zoom desejado (em metros).
`incrementTargetZoom(zoomDelta:number)`	Incrementa o zoom desejado (em metros).
`setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)`	Define o eixo desejado (em metros).
`setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)`	Define a movimentação local desejada (em metros).
`setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)`	Define a cor do material.
`playAnimation(animationName:string)`	Exibe a animação.
`pauseAnimation(animationName:string)`	Pausa a animação.
`setAnimationTime(animationName:string, animationTime:number)`	Define o tempo de animação (em segundos).
`lookAtHotspot(hotspotName:string)`	Move e gira a câmera para focar o ponto de acesso.

Visualizador de modelos 3D

`gwd-3d-model-viewer`

É um componente que une o componente "Visualizador do modelo 3D".

Propriedades

Nome	Descrição
`src:file`	É o arquivo de origem do modelo 3D.
`gesture-cue-icon:file`	É o ícone da dica de gesto.
`gesture-cue-text:string`	É o texto exibido abaixo do ícone da dica de gesto.
`gesture-cue-duration:number`	É a duração (em segundos) para exibir a dica de gesto. Um valor de -1 significa que não há limite de tempo.
`skybox-image:file`	É a imagem de plano de fundo da cena do modelo 3D.
`environment-image:file`	Controla o reflexo ambiental do modelo 3D.

Eventos

Nome	Descrição
`scene-rendered`	É enviado depois que a cena do modelo 3D é renderizada pela primeira vez.
`camera-changed`	É enviado quando uma das propriedades da câmera tridimensional é alterada. O objeto event.detail contém todas as propriedades da câmera.
`hotspot-clicked`	É enviado quando um ponto de acesso é clicado. O objeto event.detail contém o nome do ponto de acesso clicado.
`interaction-start`	É enviado quando o usuário começa a interagir com o modelo 3D.
`interaction-end`	É enviado quando o usuário termina de interagir com o modelo 3D.

Métodos

Nome	Descrição
`setYaw(yaw:number)`	Define o ângulo de guinada (em graus) sem nenhuma animação, considerando os limites da câmera.
`setTargetYaw(targetYaw:number)`	Define o ângulo de guinada desejado (em graus) com base nos limites da câmera ou na base da rotação entre -360 e 360 graus.
`setTargetPitch(targetPitch:number)`	Define o ângulo da verticalidade desejada (em graus).
`incrementTargetPitch(pitchDelta:number)`	Incrementa a verticalidade desejada de um ângulo delta (em graus).
`setTargetZoom(targetZoom:number)`	Define o zoom desejado (em metros).
`incrementTargetZoom(zoomDelta:number)`	Incrementa o zoom desejado (em metros).
`setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)`	Define o eixo desejado (em metros).
`setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)`	Define a movimentação local desejada (em metros).
`setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)`	Define a cor do material.
`playAnimation(animationName:string)`	Exibe a animação.
`pauseAnimation(animationName:string)`	Pausa a animação.
`setAnimationTime(animationName:string, animationTime:number)`	Define o tempo de animação (em segundos).

Adicionar à agenda

`gwd-addtocalendar`

Adiciona um evento às agendas.

Propriedades

Nome	Descrição
`event-title:string`	É o nome do evento como será visto na agenda do usuário.
`start-date:string`	É a data de início do evento.
`start-time:string`	É o horário de início do evento (em formato 24 horas).
`end-date:string`	É a data de término do evento.
`end-time:string`	É o horário de término do evento (em formato 24 horas).
`timezone:string`	Indica o fuso horário do evento. Quando esta propriedade for definida, o horário será ajustado para o usuário quando ele estiver em outro fuso horário.
`location:string`	É o local do evento.
`description:string`	É a descrição do evento.
`icalendar:boolean`	Se um arquivo iCalendar deve ou não ser usado.
`google:boolean`	Indica se o Google Agenda precisa ou não ser usado.
`windows-live:boolean`	Indica se o Windows Live Calendar precisa ou não ser usado.
`yahoo:boolean`	Indica se o Yahoo Agenda precisa ou não ser usado.
`bg-color:string`	Indica o valor hexadecimal para a cor do plano de fundo da lista suspensa.
`font-color:string`	Indica o valor hexadecimal para a cor da fonte da lista suspensa.
`font-family:string`	É o nome da fonte da lista suspensa.
`font-size:string`	É o tamanho da fonte da lista suspensa.
`font-weight:string`	É o peso da fonte da lista suspensa.
`highlight-color:string`	Indica o valor hexadecimal para a cor de destaque da lista suspensa.

Áudio

`gwd-audio`

É um componente que une um HTMLAudioElement.

Propriedades

Nome	Descrição
`autoplay:boolean`	Se o áudio for reproduzido automaticamente quando carregado.
`loop:boolean`	Se o áudio fizer um loop quando concluído.
`muted:boolean`	Indica se o áudio precisa começar silenciado.
`controls:boolean`	Indica se os controles de player nativo padrão estão ativados.
`sources:file`	Indica uma string de origens de áudio em diferentes formatos, separada por vírgula.

Eventos

Nome	Descrição
`play`	É enviado quando a reprodução da mídia se inicia após um evento de pausa anterior.
`pause`	Enviado quando a reprodução estiver em pausa.
`playing`	É enviado quando a mídia começa a tocar (pela primeira vez após ter sido pausada ou após o término e reinício).
`ended`	Enviado quando a reprodução for concluída.
`volumechange`	Enviado quando o volume de áudio variar (quando o volume estiver definido e o atributo silenciado for alterado).
`seeked`	Enviado quando uma operação de procura for concluída.
`waiting`	Enviado quando a operação solicitada (como a reprodução) for adiada enquanto aguarda a conclusão de outra operação (como uma busca).

Métodos

Nome	Descrição
`mute()`	Alterna para desativar/ativar o som do áudio.
`pause()`	Pausa o áudio.
`play()`	Toca o áudio.
`replay()`	Toca o áudio novamente.
`seek(time:number)`	Pula para uma marcação de tempo específica no áudio.

Galeria carrossel

`gwd-carouselgallery`

É um objeto de galeria que mostra seus frames em um layout de estilo carrossel.

Propriedades

Nome	Descrição
`images:string`	Indica uma string de caminhos de imagens usadas na galeria, separada por vírgula.
`groups:string`	Indica uma string de grupos de códigos, separada por vírgula.
`transition-duration:number`	Velocidade de galeria de animação em milissegundos.
`start-frame:number`	Indica o número da imagem que você quer exibir inicialmente.
`autoplay:boolean`	Reproduzir ou não automaticamente os frames uma vez.
`has-navigation:boolean`	Inclui automaticamente ou não os controles de navegação de galeria.
`navigation-thumbnails:boolean`	Se miniaturas devem ser usadas para navegação em vez de pontos
`navigation-highlight:color`	Um código de cores CSS usado para destacar o frame ativo na navegação
`scaling:string`	Como o conteúdo da imagem é redimensionado para caber no seu frame
`frame-width:number`	Indica a espessura de um painel de conteúdo.
`frame-height:number`	Indica a altura de um painel de conteúdo.
`neighbor-rotation-y:number`	Uma rotação do eixo Y aplicada aos vizinhos do painel atualmente centrado. É usada para inclinar os painéis vizinhos.
`neighbor-translation-x:number`	Uma tradução do eixo X aplicada aos vizinhos do painel atualmente centrado. É usada para ajustar a colocação de painéis vizinhos.
`neighbor-translation-y:number`	Uma tradução do eixo Y aplicada aos vizinhos do painel atualmente centrado.
`neighbor-translation-z:number`	Indica uma tradução do eixo Z aplicada aos vizinhos do painel atualmente centrado.
`exit-urls:string`	Indica uma string de URLs de saída correspondente às imagens na galeria, separada por vírgula.
`show-reflection:boolean`	Exibe ou não um reflexo baseado em CSS3.
`pause-front-media:boolean`	Pausa ou não elementos de mídia (por exemplo, vídeo ou áudio) no frame anterior quando o frame atual é alterado.
`resume-next-media:boolean`	Retoma ou não elementos de mídia (por exemplo, vídeo ou áudio) no novo frame quando o frame atual é alterado.

Eventos

Nome	Descrição
`firstinteraction`	É enviado quando o usuário interage com a galeria pela primeira vez.
`allframesviewed`	É enviado quando todos os frames da galeria são exibidos pelo menos uma vez.
`allframesloaded`	É enviado quando todos os frames da galeria são carregados.
`autoplayended`	É enviado quando a reprodução automática é encerrada por algum motivo. `event.detail.completed` será verdadeiro se tiver sido fechado naturalmente ao atingir a duração pretendida. Do contrário, será falso.
`frameshown`	É enviado quando um novo frame é exibido.
`frameactivated`	É enviado quando um novo frame começou a ser ativado, mesmo que ainda não seja visível.
`frameautoplayed`	É enviado quando um frame é ativado para reprodução automática. Pode ser acionado mais frequentemente que `frameshown`, porque será disparado separadamente para cada um dos vários frames que estiverem visíveis ao mesmo tempo.
`frametap`	É enviado quando o usuário toca em um frame.
`reachleftend`	É enviado quando a galeria chega ao final esquerdo dela.
`reachrightend`	É enviado quando a galeria chega ao final direito dela.
`trackstart`	É enviado quando a ação de arrastar com o mouse ou por toque é iniciada.
`track`	O componente registra os dados de local X e Y associados à ação de arrastar usando o mouse ou o toque.
`trackend`	É enviado quando a ação de arrastar com o mouse ou por toque é interrompida.

Métodos

Nome	Descrição
`goToFrame(index:number, opt_animate:string)`	Indica ir para o frame especificado.
`goForwards(opt_animate:string)`	Indica ir para o próximo frame, se disponível.
`goBackwards(opt_animate:string)`	Indica ir para o frame anterior.
`rotateOnce(opt_duration:number, opt_direction:string)`	Mostrar todos os frames na galeria uma vez.
`stopRotation()`	Interrompe a rotação automática atual.

Ponto de inserção

`gwd-cuepoint`

É um componente anexado a um componente "Vídeo" do Google Web Designer e que aciona um evento quando o vídeo atinge um tempo específico.

Propriedades

Nome	Descrição
`time:number`	É o tempo em segundos em que o evento é acionado.

Eventos

Nome	Descrição
`cuepoint`	É enviado quando a exibição da mídia atinge o tempo definido em um ponto de inserção.

Métodos

Nome	Descrição
`seek()`	Define o tempo do vídeo como o momento de um ponto de inserção.
`setTime(time:number)`	Define o momento do ponto de inserção.

Troca de data

`gwd-dateswap`

O componente "Troca de data" mudará a visibilidade do elemento com base na comparação entre a data atual e o período desejado.

Propriedades

Nome	Descrição
`from_date:string`	É uma string que representa uma data RFC2822 ou ISO 8601.
`to_date:string`	É uma string que representa uma data RFC2822 ou ISO 8601.

Eventos

Nome	Descrição
`before`	É enviado quando a data atual é anterior à `from_date` (exclusivo).
`during`	É enviado quando a data atual está entre `from_date` e `to_date` (inclusivo).
`after`	É enviado quando a data atual é posterior à `to_date` (exclusivo).

Métodos

Nome	Descrição
`checkDate()`	Compara a data atual com o período.

Navegação da galeria

`gwd-gallerynavigation`

É um controle de navegação para um componente de galeria do Google Web Designer.

Propriedades

Nome	Descrição
`for:string`	Indica uma string de caminhos de imagens usadas na galeria, separada por vírgula.
`highlight:color`	Um código de cores CSS usado para destacar o frame ativo na navegação.
`use-thumbnails:boolean`	Se miniaturas forem usadas para navegação em vez de pontos.

Anúncio genérico

`gwd-genericad`

Implementa o contêiner de anúncio genérico.

Eventos

Nome	Descrição
`adinitialized`	É enviado logo antes de o elemento genérico renderizar o conteúdo do anúncio.

Métodos

Nome	Descrição
`initAd()`	Inicia o anúncio após receber os eventos apropriados do Enabler.
`goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)`	Navega para as dimensões expandidas do anúncio. Se um código de página não for especificado, o anúncio navegará para a página padrão.
`exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)`	Sai do anúncio e opcionalmente o recolhe.

Gesto

`gwd-gesture`

É uma abstração para uma série de eventos de gesto.

Propriedades

Nome	Descrição
`touch-action:string`	É como a ação de toque deve ser interpretada. Os valores válidos são: `auto`, `none`, `pan-x` e `pan-y`. O comportamento padrão é o mesmo que está definido para `none`.

Eventos

Nome	Descrição
`hover`	É enviado quando o local do mouse ou do toque entra nos limites do componente.
`hoverend`	É enviado quando o local do mouse ou do toque deixa os limites do componente.
`trackstart`	É enviado quando a ação de arrastar com o mouse ou por toque é iniciada.
`track`	O componente registra os dados de local X e Y associados à ação de arrastar usando o mouse ou o toque.
`trackend`	É enviado quando a ação de arrastar com o mouse ou por toque é interrompida.
`tap`	É enviado quando um toque do usuário ou um clique do mouse é registrado.
`swipeleft`	É enviado quando o usuário desliza para a esquerda.
`swiperight`	É enviado quando o usuário desliza para a direita.
`swipeup`	É enviado quando o usuário desliza para cima.
`swipedown`	É enviado quando o usuário desliza para baixo.

Anúncio do Google

`gwd-google-ad`

Implementa o contêiner de anúncios do Google.

Propriedades

Nome	Descrição
`polite-load:boolean`	Indica se o anúncio precisa respeitar a semântica de carregamento discreto.
`fullscreen:boolean`	Se este anúncio tentar expandir ou não em tela cheia.

Eventos

Nome	Descrição
`adinitialized`	É enviado logo antes de o elemento renderizar o conteúdo do anúncio.
`expandstart`	É enviado quando o Enabler dispara um evento de início de expansão.
`expandfinish`	É enviado quando o Enabler dispara um evento de fim de expansão.
`collapsestart`	É enviado quando o Enabler dispara um evento de início de recolhimento.
`collapsefinish`	É enviado quando o Enabler dispara um evento de fim de recolhimento.
`fullscreensupport`	É enviado quando a expansão para tela cheia é compatível.
`dynamicelementsready`	É enviado depois que os dados dinâmicos são aplicados ao conteúdo do anúncio.
`hostpagescroll`	É enviado quando o Enabler dispara um evento de rolagem da página host.

Métodos

Nome	Descrição
`initAd()`	Inicia o anúncio após receber os eventos apropriados do Enabler.
`goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)`	Navega para as dimensões expandidas do anúncio. Se um código de página não for especificado, o anúncio navegará para a página padrão.
`exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)`	Sai do anúncio e opcionalmente o recolhe.
`exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)`	Sai do anúncio para o URL especificado, qualquer que seja o valor definido no Studio. Recolhe o anúncio se `opt_collapseOnExit` for verdadeiro.
`incrementCounter(metric:string, opt_isCumulative:boolean)`	Rastreia um evento de contagem.
`startTimer(timerId:string)`	Inicia um temporizador de evento.
`stopTimer(timerId:string)`	Interrompe um temporizador de evento.
`reportManualClose()`	Registra o fechamento manual de um anúncio flutuante, pop-up, de expansão, in-page com pop-up ou in-page com flutuante. Esse método é um proxy para `Enabler.reportManualClose`.

Ponto de acesso

`gwd-hotspot`

É um componente que mostra e oculta um ponto de acesso em momentos específicos de um vídeo.

Propriedades

Nome	Descrição
`show-time:number`	É o tempo em segundos em que o ponto de acesso começa a ficar visível.
`hide-time:number`	É o tempo em segundos em que o ponto de acesso deixa de ser visível.
`left:string`	Indica a posição à esquerda do ponto de acesso acima do vídeo em relação à largura do frame (por exemplo, "5%").
`top:string`	Indica a posição superior do ponto de acesso acima do vídeo em relação à altura do frame (por exemplo, "5%").
`width:string`	Indica a largura do ponto de acesso proporcional ao vídeo em relação à largura do frame.
`height:string`	Indica a altura do ponto de acesso proporcional ao vídeo em relação à altura do frame.

Eventos

Nome	Descrição
`hotspotshown`	É enviado quando o ponto de acesso se torna visível.
`hotspothidden`	É enviado quando o ponto de acesso fica oculto.

Métodos

Nome	Descrição
`show(showHide:boolean)`	Alterna a visibilidade do ponto de acesso.
`seek(showHide:boolean)`	Define um tempo do vídeo para exibir ou ocultar o momento do ponto de acesso.
`setTimes(showTime:number, hideTime:number)`	Define os tempos de exibição e ocultação do ponto de acesso.

Iframe

`gwd-iframe`

É um componente que une um HTMLIframeElement.

Propriedades

Nome	Descrição
`source:string`	Indica a origem do iframe. Isso substitui o atributo `src` no elemento de imagem nativa.
`scrolling:string`	Se o iframe deve exibir ou não barras de rolagem.

Eventos

Nome	Descrição
`iframeload`	É enviado quando o iframe é carregado.

Métodos

Nome	Descrição
`setUrl(url:string)`	Muda o URL do iframe e o carrega imediatamente.

Imagem

`gwd-image`

É um componente que une um HTMLImageElement para ser compatível com o carregamento adiado da origem da imagem.

Propriedades

Nome	Descrição
`source:file`	É a origem da imagem. Isso substitui o atributo `src` no elemento de imagem nativa.
`alt:string`	É o texto alternativo da imagem.
`scaling:string`	Define como a imagem será redimensionada para caber no frame.
`alignment:string`	Indica como a imagem deve se alinhar dentro da área de visualização.
`focalpoint:string`	Codifica um ponto focal da imagem como coordenadas de pixel x/y.
`disablefocalpoint:boolean`	Desativa o ponto focal definido pelo atributo `focalpoint` (usado internamente pelo Google Web Designer).

Botão de imagem

`gwd-imagebutton`

Um botão de imagem compatível com estados acima/sobre/abaixo.

Propriedades

Nome	Descrição
`up-image:file`	É o URL para a imagem do botão no estado não pressionado.
`over-image:file`	É o URL para a imagem do botão no estado mouseover ou ao passar o cursor.
`down-image:file`	É o URL para a imagem do botão no estado pressionado.
`bgcolor:string`	É a cor do plano de fundo do botão.
`alignment:string`	Como a imagem deve alinhar dentro da área de visualização.
`scaling:string`	Como a imagem deve se encaixar no contêiner principal.
`disabled:boolean`	Se o botão deve ser desativado.

Eventos

Nome	Descrição
`imagebuttonloaded`	É enviado quando todas as imagens são carregadas.

Métodos

Nome	Descrição
`toggleEnable()`	Alterna entre ativado e desativado.
`setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string)`	Define as origens de imagem para todos os estados.

Efeito de imagem

`gwd-image-effect`

É um componente "Efeito de imagem".

Propriedades

Nome	Descrição
`scaling:string`	Define como a imagem será redimensionada para caber no frame.
`time-limit:number`	É o limite de tempo da animação. Um valor de -1 significa que não há limite de tempo.
`settings:string`	Inicia a caixa de diálogo de configurações do componente.
`images:string`	Indica uma string de caminhos de imagens usada no efeito da imagem, separada por vírgula.

Eventos

Nome	Descrição
`autoplayended`	É enviado quando a reprodução automática é encerrada quando o limite de tempo é atingido.

Métodos

Nome	Descrição
`play()`	Exibe a animação.
`pause()`	Pausa a animação.

Efeito de imagem antes e depois

`gwd-before-and-after`

É um efeito de imagem em que duas imagens semelhantes são compostas em uma comparação "antes e depois".

Efeito de imagem respiração

`gwd-breathe`

É um efeito de imagem que anima uma imagem sendo expandida e contraída elasticamente.

Efeito de imagem revelação

`gwd-reveal`

É um efeito de imagem em que uma imagem é digitalizada por uma área de foco elíptico, revelando uma segunda imagem.

Efeito de imagem onda

`gwd-wave`

É um efeito de imagem que aplica uma transformação de onda animada a uma imagem, fazendo com que a imagem se movimente de acordo com um padrão de onda.

Mapa

`gwd-map`

Estende HTMLElement para unir chamadas de API do Google Maps.

Propriedades

Nome	Descrição
`api-key:string`	Indica a chave da API do Google. Acesse: https://developers.google.com/maps/documentation/javascript/get-api-key.
`query:string`	Indica o nome da consulta de pesquisa para retornar locais com a API Google Places.
`start-latitude:decimal`	Inicia coordenadas de latitude central. O valor deve ser entre -90 e 90 graus.
`start-longitude:decimal`	Inicia coordenadas de longitude central. O valor deve ser entre -180 e 180 (graus).
`request-user-location:boolean`	Se a localização do usuário for solicitada. Se definida como verdadeiro, o usuário será solicitado a compartilhar a localização.
`client-id:string`	Indica o ID do cliente Premier do Google Maps
`search-radius:number`	Raio mínimo para realizar uma pesquisa de local, em metros.
`result-limit:number`	O número máximo de resultados como retorno em uma única consulta.
`start-zoom:number`	Iniciar nível de zoom, em unidades usadas pela API do Google Maps. O padrão é 16, que é nivelado à vizinhança.
`marker-src:string`	Marcadores do nome de arquivo de imagem, como uma imagem que contém componentes desativado, ativado e sombra.
`gps-src:string`	Localização de GPS do nome de arquivo de imagem ponto azul.
`msg-start-position-prompt:string`	String de localização para o texto de aviso do diálogo para selecionar uma posição inicial.
`msg-gps-button-label:string`	String de localização para o rótulo do botão que recupera a localização de usuários a partir da Geolocation API
`msg-manual-position-button-label:string`	String de localização para o rótulo do botão que abre um campo de pesquisa de localização.
`msg-manual-position-prompt:string`	String de localização para o texto do aviso de diálogo para buscar uma posição inicial no mapa.
`msg-manual-position-placeholder:string`	String de localização para o texto do marcador da caixa de pesquisa para buscar uma posição inicial no mapa.
`msg-geocode-failure:string`	É a string de localização para o texto do aviso da caixa de diálogo exibido quando uma tentativa de usar a API de geolocalização falha.
`msg-no-results-found:string`	String de localização para o texto de aviso do diálogo exibido quando não foram encontrados resultados de mapas na localização escolhida.

Eventos

Nome	Descrição
`pinclick`	Indica quando o usuário seleciona um marcador no mapa.

Métodos

Nome	Descrição
`setCenter(latitude:number, longitude:number, opt_accuracy:number)`	Define o centro do mapa para o local especificado por latitude/longitude.

Página

`gwd-page`

Uma página representa um único card no grupo de páginas.

Propriedades

Nome	Descrição
`expanded:boolean`	Indica se esta página deve ser considerada como uma página expandida (específico do anúncio).
`centered:boolean`	Indica se o conteúdo desta página deve ser centralizado.
`alt-orientation-page:string`	O código da página da página que melhor representa este conteúdo na orientação alternada.

Eventos

Nome	Descrição
`attached`	Enviado logo depois que a página é anexada ao DOM
`detached`	Enviado logo depois que a página é removida do DOM
`pageactivated`	É enviado quando a página está pronta para ser exibida.
`pagedeactivated`	É enviado quando a página não está mais sendo exibida.
`pageload`	É enviado depois que o conteúdo de página é carregado.
`pagepresenting`	É enviado logo antes de a página começar a animação inicial.
`shake`	É enviado quando o dispositivo detecta um gesto de agitar.
`tilt`	É enviado quando o dispositivo detecta um gesto de inclinar.
`rotatetoportrait`	É enviado quando o dispositivo é girado para a orientação retrato.
`rotatetolandscape`	É enviado quando o dispositivo é girado para a orientação paisagem.

Grupo de páginas

`gwd-pagedeck`

Um PageDeck é um contêiner de páginas. Ele mostra uma página de cada vez, e diferentes páginas podem ser giradas para frente, em qualquer ordem e usando qualquer uma das transições de página compatíveis.

Propriedades

Nome	Descrição
`default-page:string`	O código da página padrão.

Eventos

Nome	Descrição
`pagetransitionstart`	É enviado antes que ocorra uma transição de página.
`pagetransitionend`	É enviado depois que a transição de página é concluída.

Métodos

Nome	Descrição
`goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	Navega para a próxima página no grupo de páginas.
`goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	Navega para a página anterior no grupo de páginas.
`goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)`	Navega para a página especificada no grupo de páginas.
`getCurrentPage()`	Retorna a página atual ou um valor nulo se uma página não for exibida.
`getDefaultPage()`	Retorna a página padrão se especificado. Caso contrário, retorna a primeira página.
`getPage(pageId:string)`	Retorna a página com o código especificado.
`findPageIndexByAttributeValue(attributeName:string, value:string\|number\|boolean)`	Retornará o elemento de página com o valor do atributo igual ao valor especificado ou -1 se a página não tiver sido encontrada.
`getOrientationSpecificPage(orientation:string, pageId:string)`	Retorna a página correspondente à orientação especificada.
`getElementById(id:string)`	Encontra o elemento com o código especificado em todas as páginas neste grupo de páginas. Como `gwd-pagedeck` só mantém a página ativa no DOM, o `document.getElementById(id)` padrão não retornará os elementos nas páginas inativas. É um caso de uso comum, especialmente em anúncios dinâmicos, para se referir a elementos em páginas inativas. Em tais casos, este método pode ser usado para excluir a referência de um elemento pelo código dele.

Paralaxe

`gwd-parallax`

É um componente "Paralaxe".

Propriedades

Nome	Descrição
`settings:string`	Inicia a caixa de diálogo de configurações do componente.
`yscroll:decimal`	É o fator de rolagem que será usado para a animação de paralaxe ao renderizar o conteúdo no cenário.

Eventos

Nome	Descrição
`ready`	É enviado quando todos os recursos do componente "Paralaxe" são carregados.

Efeitos de partículas

`gwd-particleeffects`

É um componente para compor vários efeitos de partículas e imagens.

Propriedades

Nome	Descrição
`autoplay:boolean`	Indica se a animação deve ser exibida automaticamente quando o componente é carregado.
`time-limit:number`	É o limite de tempo da animação. Um valor de -1 significa que não há limite de tempo.
`settings:string`	Inicia a caixa de diálogo de configurações do componente.

Eventos

Nome	Descrição
`timelimitreached`	É enviado quando a reprodução da animação atinge o limite de tempo especificado.

Métodos

Nome	Descrição
`play()`	Exibe a animação.
`pause()`	Pausa a animação.
`stop()`	Para a animação.

Partículas

`gwd-particles`

É o componente do sistema de partículas.

Propriedades

Nome	Descrição
`acceleration-x:number`	É o componente x da aceleração em px/frame/frame.
`acceleration-y:number`	É o componente y da aceleração em px/frame/frame.
`angle-max:number`	É o ângulo máximo da direção da velocidade das partículas.
`angle-min:number`	É o ângulo mínimo da direção da velocidade das partículas.
`autoplay:boolean`	Indica se a animação deve ser exibida automaticamente quando o gwd-particleeffects é iniciado.
`color1:color`	É a primeira cor.
`color2:color`	É a segunda cor.
`color-rate:number`	É a taxa em que a cor muda da cor 1 para a cor 2 por frame, somando, no intervalo de [0, 1].
`emit-interval:number`	É o número de frames até a emissão da próxima partícula.
`emit-x-max:string`	É a coordenada x máxima do intervalo de emissão da partícula.
`emit-x-min:string`	É a coordenada x mínima do intervalo de emissão da partícula.
`emit-y-max:string`	É a coordenada y máxima do intervalo de emissão da partícula.
`emit-y-min:string`	É a coordenada y mínima do intervalo de emissão da partícula.
`loop:boolean`	Indica se a animação deve ser repetida.
`number:number`	É o número de partículas.
`opacity-min:number`	É a opacidade mínima das partículas.
`opacity-max:number`	É a opacidade máxima das partículas.
`opacity-rate:number`	Indica a taxa de oscilação da opacidade por frame que é adicionada à opacidade atual de uma partícula.
`random-colors:boolean`	Indica se as partículas têm cores aleatórias entre a cor 1 e a cor 2. Se for falso, todas as partículas são inicializadas com a cor 1.
`shape:string`	É o formato do sprite.
`size-max:number`	Indica o tamanho máximo das partículas em px.
`size-min:number`	Indica o tamanho mínimo das partículas em px.
`size-rate:number`	Indica a taxa de oscilação do tamanho por frame que é adicionada ao tamanho atual de uma partícula.
`skip-forward:number`	Pula para um ponto em que uma determinada porcentagem de partículas foi emitida em um sistema de partículas.
`speed-max:number`	É a velocidade máxima das partículas em px/frame.
`speed-min:number`	É a velocidade mínima das partículas em px/frame.
`sprite-image-src:file`	É a origem das imagens usadas como sprites.
`turbulence-frequency:number`	É a frequência da turbulência. O uso de valores mais altos pode causar irregularidades mais frequentes no movimento. É preciso usar um número positivo.
`turbulence-rate:number`	É a taxa de oscilação da força ao longo do tempo.
`turbulence-strength:number`	É a força que a turbulência exerce sobre as partículas. É preciso usar um número positivo.
`turbulence-trail:number`	Indica quantos estados anteriores e atuais de uma partícula devem ser renderizados.

Métodos

Nome	Descrição
`play()`	Exibe a animação.
`pause()`	Pausa a animação.
`stop()`	Para a animação.

SpriteSheet

`gwd-spritesheet`

Serve para exibir animação ou frame-chave único da Folha de sprite.

Propriedades

Nome	Descrição
`imagesource:file`	Indica o URL da imagem da Folha de sprite.
`offsetx:number`	O deslocamento em pixels do lado esquerdo da folha de sprite para: a borda esquerda da imagem específica da folha de sprite que você quer usar; a borda esquerda da primeira imagem de sprite que você está usando para criar uma animação
`offsety:number`	O deslocamento em pixels do topo da folha de sprite para: a borda superior da imagem específica da folha de sprite que você quer usar; a borda superior da primeira imagem de sprite que você está usando para criar uma animação
`clipwidth:number`	A largura em pixels: da imagem específica da folha de sprite que você quer usar; da primeira imagem de sprite que você está usando para criar uma animação
`clipheight:number`	A altura em pixels: da imagem específica da folha de sprite que você quer usar; da primeira imagem de sprite que você está usando para criar uma animação
`alignment:string`	Determina a posição da imagem dentro do contêiner.
`scaling:string`	Determina como os vários tamanhos de imagens são exibidos no componente.
`totalframecount:number`	É o número de frames que compõem a animação.
`duration:number`	É a duração de cada frame em milésimos de segundos.
`loopcount:number`	É o número de vezes que a animação é repetida. Defina como 0 para repetição infinita.
`autoplay:boolean`	Indica se a animação precisa ser executada automaticamente.
`endonstartframe:boolean`	Se a animação termina no frame inicial
`reverseplay:boolean`	Indica se a animação é exibida no sentido inverso.

Eventos

Nome	Descrição
`animationend`	É enviado quando a animação é finalizada.
`animationpause`	É enviado quando a animação é pausada.
`animationplay`	É enviado quando a exibição da animação é iniciada.
`animationrestart`	É enviado quando a animação é reiniciada após uma pausa.

Métodos

Nome	Descrição
`newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean)`	Define uma nova animação.
`play()`	Exibe a animação.
`pause()`	Pausa a animação.
`togglePlay()`	Alterna entre exibição e pausa da animação.
`restart()`	Reinicia a animação.
`previousFrame()`	Exibe o frame anterior.
`nextFrame()`	Exibe o próximo frame.
`goToFrame(id:number)`	Exibe um frame específico pelo número dele.

Avaliações com estrelas

`gwd-starratings`

É um componente para renderizar uma linha de estrelas que representa uma avaliação.

Propriedades

Nome	Descrição
`ratingvalue:decimal`	É o valor da nota.
`iconsize:number`	É o tamanho do ícone de estrela.
`isemptyshown:boolean`	Indica se os ícones de estrela vazia serão exibidos.
`isemptycolored:boolean`	Indica se os ícones de estrela vazia serão coloridos.
`colorprimary:color`	É a cor principal do preenchimento.
`colorsecondary:color`	É a cor gradiente secundária.
`gradienttype:string`	É o tipo de gradiente.
`ratingmax:number`	É a nota máxima.
`ratingmin:decimal`	É a nota mínima.

Eventos

Nome	Descrição
`complete`	É enviado quando os ícones das notas foram criados.
`validationerror`	O valor de classificação das notas é menor do que o mínimo.

Street View

`gwd-streetview`

É um componente do Google Street View.

Propriedades

Nome	Descrição
`key:string`	Para informações sobre como receber uma chave exclusiva para seu app, consulte: https://developers.google.com/maps/documentation/javascript/get-api-key.
`latitude:decimal`	É o valor de latitude do local.
`longitude:decimal`	É o valor de longitude do local.
`interaction:boolean`	Indica se a visualização pode ser movida como panorama/girada.
`heading:decimal`	Indica a bússola da câmera. Os valores aceitos vão de 0 a 360 (ambos os valores indicando "Norte", com 90 indicando "Leste" e 180 indicando "Sul"). Se a posição não for especificada, um valor será calculado para direcionar a câmera para a localização especificada a partir do ponto no qual a fotografia mais próxima foi tirada.
`pitch:decimal`	Especifica o ângulo para cima ou para baixo da câmera em relação ao veículo do Street View. Muitas vezes, esse ângulo é plano e horizontal, mas nem sempre. Os valores positivos levam o ângulo da câmera para cima (com 90 graus indicando diretamente para cima); os valores negativos levam o ângulo da câmera para baixo (com -90 indicando diretamente para baixo).
`zoom:number`	Especifica o zoom da câmera em relação ao veículo do Street View.

Galeria deslizante

`gwd-swipegallery`

Um objeto de galeria que mostra seus frames em uma faixa de conteúdo deslizante.

Propriedades

Nome	Descrição
`images:string`	Indica uma string de caminhos de imagens usadas na galeria, separada por vírgula.
`groups:string`	Indica uma string de grupos de códigos, separada por vírgula.
`transition-duration:number`	Indica a velocidade da galeria de animação em milésimos de segundo.
`start-frame:number`	Frame de uma base para início.
`num-frames-to-display:number`	Indica o número de frames a serem exibidos de uma vez.
`frame-snap-interval:number`	Indica o número de frames que avançam a cada movimento.
`autoplay:boolean`	Indica se a galeria é girada automaticamente uma vez.
`has-navigation:boolean`	Indica se os controles de navegação da galeria precisam ser incluídos.
`navigation-thumbnails:boolean`	Se miniaturas devem ser usadas para navegação em vez de pontos
`navigation-highlight:color`	Um código de cores CSS usado para destacar o frame ativo na navegação
`scaling:string`	Como o conteúdo da imagem será redimensionado para caber no seu frame.
`swipe-axis:string`	É o eixo em que é detectado deslize.
`offset:number`	Quantidade de espaço vazio entre os frames de conteúdo adjacentes
`frame-width:number`	Indica a espessura de um frame de conteúdo. Substitui `num-frames-to-display`.
`frame-height:number`	Indica a altura de um frame de conteúdo.
`autoplay-duration:number`	A duração total da reprodução automática dos frames.
`autoplay-step-interval:number`	O intervalo entre cada etapa do frame durante a reprodução automática.
`exit-urls:string`	Indica uma string de URLs de saída correspondente às imagens na galeria, separada por vírgula.
`disable-gesture:boolean`	Esconde/desativa o componente "Gesto" que permite a navegação por toque da galeria.
`pause-front-media:boolean`	Pausa ou não elementos de mídia (por exemplo, vídeo ou áudio) no frame anterior quando o frame atual é alterado.
`resume-next-media:boolean`	Retoma ou não elementos de mídia (por exemplo, vídeo ou áudio) no novo frame quando o frame atual é alterado.

Eventos

Nome	Descrição
`firstinteraction`	É enviado quando o usuário interage com a galeria pela primeira vez.
`allframesviewed`	É enviado quando todos os frames da galeria foram exibidos pelo menos uma vez.
`allframesloaded`	É enviado quando todos os frames da galeria são carregados.
`autoplayended`	É enviado quando a reprodução automática é encerrada por algum motivo. `event.detail.completed` será verdadeiro se tiver sido fechado naturalmente ao atingir a duração pretendida. Do contrário, será falso.
`frameshown`	É enviado quando um novo frame é exibido, depois que as animações necessárias são concluídas.
`frameactivated`	É enviado quando um novo frame começou a ser ativado, mesmo que ainda não seja visível.
`frameautoplayed`	É enviado quando um frame é ativado para reprodução automática. Pode ser acionado mais frequentemente que `frameshown`, porque será disparado separadamente para cada um dos vários frames que estiverem visíveis ao mesmo tempo.
`frametap`	É enviado quando o usuário toca em um frame.
`reachleftend`	É enviado quando a galeria chega ao final esquerdo dela.
`reachrightend`	É enviado quando a galeria chega ao final direito dela.
`framemouseover`	É enviado quando o usuário move o mouse sobre um frame.
`framemouseout`	É enviado quando o usuário move o mouse para fora de um frame.
`trackstart`	É enviado quando a ação de arrastar com o mouse ou por toque é iniciada.
`track`	O componente registra os dados de local X e Y associados à ação de arrastar usando o mouse ou o toque.
`trackend`	É enviado quando a ação de arrastar com o mouse ou por toque é interrompida.

Métodos

Nome	Descrição
`goToFrame(frame:number, opt_animate:string)`	Vai para o frame especificado.
`rotateOnce(opt_duration:number, opt_direction:string)`	Mostra todos os frames na galeria uma vez.
`stopRotation()`	Interromper a rotação automática atual.
`goForwards()`	Move a galeria para frente em um frame.
`goBackwards()`	Move a galeria para trás em um frame.

Virar

`gwd-swirl`

É um componente "Virar".

Propriedades

Nome	Descrição
`yscroll:decimal`	É o fator de rolagem que será usado para a animação espiral ao renderizar o conteúdo no cenário.
`settings:string`	Inicia a caixa de diálogo de configurações do componente.

Eventos

Nome	Descrição
`ready`	É enviado quando todos os recursos filhos são carregados.

Área de toque

`gwd-taparea`

É uma abstração para evento de clique/toque.

Propriedades

Nome	Descrição
`exit-override-url:string`	O URL de saída quando a Área de toque é tocada

Eventos

Nome	Descrição
`action`	É enviado quando o usuário toca (dispositivos móveis) ou clica (computadores) no botão.

Toque para chamar/enviar mensagem

`gwd-taptocall`

Um componente que, quando clicado ou tocado, liga ou envia um SMS para o número de telefone configurado.

Propriedades

Nome	Descrição
`number:string`	Número de telefone para ligar ou enviar mensagem.
`action:string`	Escolher para enviar uma mensagem SMS ou iniciar uma chamada telefônica.

Eventos

Nome	Descrição
`action`	É enviado quando o usuário toca (dispositivos móveis) ou clica (computadores) no botão.
`taptocall`	É enviado quando uma chamada ou mensagem SMS é iniciada.

Métodos

Nome	Descrição
`dial()`	Inicia a chamada ou envia uma mensagem SMS para o número configurado.

Galeria com transição

`gwd-transitiongallery`

É um componente da galeria com transição.

Propriedades

Nome	Descrição
`settings:string`	Inicia a caixa de diálogo de configurações do componente.
`images:string`	Indica uma string de caminhos de imagens usadas na galeria, separada por vírgula.
`scaling:string`	Define como a imagem será redimensionada para caber no frame.
`exit-urls:string`	Indica uma string de URLs de saída correspondente às imagens na galeria, separada por vírgula.

Eventos

Nome	Descrição
`autoplayended`	É enviado quando a reprodução automática é encerrada por algum motivo. `event.detail.completed` será verdadeiro se terminar naturalmente ao atingir a contagem de loop pretendida. Caso contrário, será falso.
`frameactivated`	É enviado quando um novo frame começou a ser ativado, mesmo que ainda não seja visível.
`frameshown`	É enviado quando um novo frame é exibido.
`frametap`	É enviado quando o usuário toca em um frame.
`rotateonceended`	É enviado quando a rotação é encerrada por algum motivo. `event.detail.completed` será verdadeiro se for encerrado naturalmente. Caso contrário, será falso.
`reachleftend`	É enviado quando a galeria chega ao final esquerdo dela.
`reachrightend`	É enviado quando a galeria chega ao final direito dela.

Métodos

Nome	Descrição
`goToFrame(frame:number, with_animation:boolean)`	Vai para o frame especificado.
`rotateOnce(startFromCurrentFrame:boolean)`	Exibe o frame na galeria começando no inicial se startFromCurrentFrame for falso ou não especificado. Caso contrário, iniciará pelo frame atual. A rotação será interrompida antes de atingir o frame inicial.
`startAutoplay(startFromCurrentFrame:boolean)`	Inicia a reprodução automática na galeria começando com o frame inicial se startFromCurrentFrame for falso ou não especificado. Caso contrário, iniciará pelo frame atual. A reprodução automática será interrompida quando atingir a contagem de loops.
`stop()`	Cancela a animação se ela estiver em andamento.
`goForwards()`	Move a galeria para frente em um frame.
`goBackwards()`	Move a galeria para trás em um frame.

Transição persianas

`gwd-blinds`

É um componente de efeito de persiana, que revela a nova imagem com lâminas que se abrem uma após a outra, começando de uma borda e avançando até a borda oposta.

Propriedades

Nome	Descrição
`direction:dropdown`	Indica a direção do efeito.
`blinds:number`	Indica o número de persianas.
`transparentbackground:boolean`	Indica se o plano de fundo transparente deve ser revelado antes da renderização da persiana da nova imagem. Se for falso, a persiana cobrirá a imagem antiga.

Transição wipe de porta

`gwd-door-wipe`

Um componente de efeito de wipe de porta é uma variação do efeito wipe, com dois tipos baseados na direção do wipe. Um wipe de abertura de porta revela a nova imagem começando do centro da imagem antiga, como se uma porta dupla estivesse abrindo. Um wipe de fechamento de porta revela a nova imagem, começando das bordas opostas da imagem antiga até o centro, como se uma porta dupla estivesse fechando.

Propriedades

Nome	Descrição
`orientation:dropdown`	Indica a orientação da animação.
`direction:dropdown`	Indica a direção do efeito wipe da porta.

Transição esmaecer

`gwd-fade`

É um componente da transição esmaecer.

Transição wipe de íris

`gwd-iris-wipe`

É um componente de efeito wipe de íris, que revela a nova imagem com um círculo crescente que se projeta do centro do frame por padrão.

Propriedades

Nome	Descrição
`originpercentx:number`	É a origem do círculo crescente no eixo x em relação à largura do frame.
`originpercenty:number`	É a origem do círculo crescente no eixo y em relação à altura do frame.

Transição push

`gwd-push`

É um componente do efeito de transição push, em que a nova imagem desliza para a área de visualização enquanto empurra a antiga para fora.

Propriedades

Nome	Descrição
`direction:dropdown`	É a direção do efeito de push.

Transição wipe radial

`gwd-radial-wipe`

Um componente do efeito wipe radial é uma variação do efeito wipe, em que a nova imagem é revelada criando um raio de movimento em torno de um ponto especificado, como um ponteiro de relógio.

Propriedades

Nome	Descrição
`direction:dropdown`	Indica a direção do efeito.
`originpercentx:number`	É a origem no eixo x em relação à largura do frame que começa a fazer a rolagem de um raio para revelar a nova imagem.
`originpercenty:number`	É a origem no eixo y em relação à altura do frame que inicia a rolagem de um raio para revelar a nova imagem.

Transição rotação

`gwd-rotate`

É um componente de efeito de rotação, que gira a imagem antiga, aumentando o zoom, e depois diminui o zoom na nova imagem ao concluir a rotação.

Propriedades

Nome	Descrição
`direction:dropdown`	Indica a direção do efeito.

Transição fatias

`gwd-slice`

É um componente de efeito de fatia, que revela a nova imagem em fatias ou barras que são exibidas uma após a outra.

Propriedades

Nome	Descrição
`direction:dropdown`	Indica a direção do efeito de fatia.
`slices:number`	Indica o número de fatias ou barras que dividem a visualização.
`transparentbackground:boolean`	Indica se o plano de fundo transparente deve ser revelado antes que as fatias da nova imagem sejam exibidas. Se for falso, as fatias serão sobrepostas à imagem antiga.

Transição dividir e empurrar

`gwd-split-push`

Um componente do efeito dividir e empurrar é uma variação do efeito push, em que a imagem antiga é dividida em duas partes vertical ou horizontalmente. As partes divididas da nova imagem empurram as da antiga em direções opostas.

Propriedades

Nome	Descrição
`orientation:dropdown`	Indica a orientação da animação.

Transição wipe de listras

`gwd-stripe-wipe`

Um componente do efeito wipe de listras é uma variação do efeito wipe em que listras coloridas sólidas de cores alternadas crescem simultaneamente na tela para cobrir a imagem antiga. Depois disso, as listras diminuem para revelar a nova imagem.

Propriedades

Nome	Descrição
`direction:dropdown`	Indica a direção do efeito.
`stripes:number`	Indica o número de listras de cada cor.
`color1:color`	Indica o valor hexadecimal para uma das duas cores das listras alternadas.
`color2:color`	Indica o valor hexadecimal para a outra cor das listras alternadas.

Transição veneziana

`gwd-venetian-blinds`

É um componente de efeito veneziana, que revela a nova imagem com lâminas que se abrem simultaneamente ou uma após a outra.

Propriedades

Nome	Descrição
`orientation:dropdown`	Indica a orientação da animação.
`blinds:number`	Indica o número de venezianas.
`staggered:boolean`	Indica se as lâminas devem fazer a transição com atraso. Se for falso, todas as lâminas farão a transição simultaneamente.

Transição wipe

`gwd-wipe`

É um componente da transição wipe. No efeito wipe normal, a nova imagem substitui gradualmente a imagem antiga por trás de uma linha que se movimenta de uma borda a outra.

Propriedades

Nome	Descrição
`direction:dropdown`	Indica a direção do efeito.
`angle:number`	Indica o ângulo que fixa a linha que substitui a imagem antiga pela nova.

Transição zigue-zague

`gwd-zigzag`

É um componente de efeito de zigue-zague que revela a nova imagem em um padrão de movimento de serpente em grade. Um efeito de zigue-zague horizontal mostra blocos da nova imagem em linhas sucessivas alternadas entre a esquerda para a direita e a direita para a esquerda. Um efeito de zigue-zague vertical mostra os blocos da nova imagem em colunas sucessivas, alternando entre de cima para baixo e de baixo para cima.

Propriedades

Nome	Descrição
`orientation:dropdown`	Indica a orientação da animação.
`rows:number`	Indica o número de linhas do efeito zigue-zague.
`columns:number`	Indica o número de colunas do efeito zigue-zague.

Vídeo

`gwd-video`

É um componente que une um HTMLVideoElement.

Propriedades

Nome	Descrição
`autoplay:boolean`	Se o vídeo deve ser reproduzido automaticamente quando carregado.
`loop:boolean`	Se o vídeo fizer um loop quando concluído.
`muted:boolean`	Se o vídeo começar silenciado.
`controls:boolean`	Indica se os controles de player nativo padrão estão ativados.
`sources:file`	Indica uma string de vídeos em formatos diferentes, separada por vírgula.
`poster:string`	Indica o URL que define um frame de pôster para ser exibido até que haja uma ação de reprodução ou busca por parte do usuário.

Eventos

Nome	Descrição
`play`	Enviado quando a reprodução da mídia iniciar depois de ter sido pausada. Ou seja, quando a reprodução for retomada após uma pausa.
`pause`	Enviado quando a reprodução estiver em pausa.
`playing`	Enviado quando a mídia começar a reproduzir (pela primeira vez após ter sido pausada ou após o término e reinício).
`ended`	Enviado quando a reprodução for concluída.
`volumechange`	Enviado quando o volume de áudio variar (quando o volume estiver definido e o atributo silenciado for alterado).
`seeked`	Enviado quando uma operação de procura for concluída.
`waiting`	Enviado quando a operação solicitada (como a reprodução) for adiada enquanto aguarda a conclusão de outra operação (como uma busca).

Métodos

Nome	Descrição
`mute()`	Alterna para ativar/desativar o som do vídeo.
`pause()`	Pausa o vídeo.
`play()`	Exibe o vídeo.
`replay()`	Repete o vídeo.
`seek(time:number)`	Pula para uma marcação de tempo específica no vídeo.
`setVolume(volume:number)`	Define o volume do vídeo.
`setSources(sources:string)`	Define as fontes para o vídeo.

YouTube

`gwd-youtube`

Estende HTMLElement para unir chamadas da API do YouTube.

Propriedades

Nome	Descrição
`video-url:string`	Indica o URL do YouTube para o vídeo.
`autoplay:string`	Para ambientes compatíveis, o vídeo do YouTube será reproduzido automaticamente após o carregamento.
`preview-duration:number`	Define a duração da visualização. Usada somente quando o atributo de reprodução automática estiver definido como `preview`.
`controls:string`	Exibe os controles de vídeo (`none`, `autohide`).
`color:string`	O tema de cor da barra de progresso do player (vermelho ou branco).
`muted:boolean`	Indica se o vídeo começa silenciado.
`loop:boolean`	Se o vídeo fizer um loop quando concluído.
`pause-on-end:boolean`	Pausa o vídeo quando há um segundo restante.
`start-position:number`	Inicia o vídeo em um determinado tempo (segundos).
`allowfullscreen:boolean`	Permitir tela cheia no computador.
`extra-player-args:string`	Parâmetros adicionais do player do YouTube conforme descritos em https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters.

Eventos

Nome	Descrição
`buffering`	O player do YouTube está armazenando em buffer.
`ended`	O vídeo do YouTube chegou ao fim.
`paused`	O vídeo do YouTube está pausado.
`playing`	O vídeo do YouTube inicia reprodução.
`replayed`	O vídeo do YouTube foi repetido.
`viewed0percent`	É enviado quando 0% do vídeo foi visto.
`viewed25percent`	É enviado quando 25% do vídeo foi visto.
`viewed50percent`	É enviado quando 50% do vídeo foi visto.
`viewed75percent`	É enviado quando 75% do vídeo foi visto.
`viewed100percent`	É enviado quando 100% do vídeo foi visto.
`previewed0percent`	É enviado quando 0% da visualização foi assistida.
`previewed25percent`	É enviado quando 25% da visualização foi assistida.
`previewed50percent`	É enviado quando 50% da visualização foi assistida.
`previewed75percent`	É enviado quando 75% da visualização foi assistida.
`previewed100percent`	É enviado quando 100% da visualização foi assistida.

Métodos

Nome	Descrição
`toggleMute()`	Alterna para ativar/desativar o som do vídeo.
`pause()`	Pausa o vídeo.
`play()`	Exibe o vídeo.
`replay()`	Repete o vídeo.
`seek(time:number)`	Pula para uma marcação de tempo específica no vídeo.
`setYouTubeId(id:string, cueOnly:boolean)`	Muda a fonte do vídeo do YouTube para o código especificado.

Isso foi útil?

Como podemos melhorá-lo?