APIs de componentes

Galería 360°

gwd-360gallery

Objeto de la galería que muestra un objeto en rotación.

Propiedades

Nombre	Descripción
images:string	Cadena de rutas de imágenes separadas por comas que se usan en la galería.
autoplay:boolean	Una vez que se cargue la galería, las imágenes de esta deberían reproducirse automáticamente.
wrap:boolean	La galería debería permitir al usuario pasar los fotogramas con el dedo desde el primero al último, en lugar de detenerse al final.

Eventos

Nombre	Descripción
firstinteraction	Se envía cuando el usuario interactúa con la galería por primera vez.
allframesviewed	Se envía cuando todos los fotogramas de la galería se han mostrado al menos una vez.
allframesloaded	Se envía cuando se cargan todos los fotogramas de la galería.
frameshown	Se envía cuando se muestra un nuevo fotograma.
frameactivated	Se envía cuando se ha comenzado a activar un nuevo fotograma, incluso si todavía no es visible.
frametap	Se envía cuando el usuario toca un fotograma.

Métodos

Nombre	Descripción
goToFrame(frame:number, opt_animate:string, opt_direction:string)	Anima el fotograma especificado.
rotateOnce(opt_duration:number, opt_direction:string)	Gira el objeto en la galería una vez.
goForwards()	Hace avanzar un fotograma en la galería.
goBackwards()	Hace retroceder un fotograma en la galería.

Hotspot 3D

gwd-3d-hotspot

Elemento para mostrar anotaciones en un modelo 3D.

Propiedades

Nombre	Descripción
data-position:string	Indica la posición del hotspot.
data-normal:string	Indica el vector normal del hotspot.
hotspot-name:string	Nombre del hotspot.
hotspot-title:string	Texto del título que se muestra en la tarjeta de información.
hotspot-description:string	Texto de descripción que se muestra en la tarjeta de información.
hide-infocard:boolean	Indica si la tarjeta de información debería ocultarse.

Contenedor de hotspot 3D

gwd-3d-hotspot-container

Elemento de contenedor de anotaciones en un modelo 3D.

Propiedades

Nombre	Descripción
up-image:file	URL de la imagen de los hotspots 3D sin pulsar.
over-image:file	URL de la imagen de los hotspots 3D cuando se mueve o se coloca el cursor sobre ellos.
down-image:file	URL de la imagen de los hotspots 3D pulsados.

Modelo 3D

gwd-3d-model

Componente del visor 3D.

Propiedades

Nombre	Descripción
id-url:download	ID o URL del modelo 3D.
data-gwd-refresh-assets:string	Atributo que utiliza Google Web Designer para determinar si se deben actualizar los recursos 3D.
glass:boolean	Habilita el material de cristal para el modelo 3D.
src:string	El modelo que se debe mostrar.
transparent:boolean	Habilita el fondo transparente en el modelo 3D.
gesture-cue-icon:file	Icono del indicador gestual.
gesture-cue-text:string	Texto que se muestra debajo del icono del indicador gestual.
gesture-cue-duration:number	Duración (en segundos) para mostrar el indicador gestual. El valor -1 significa que no hay límite de tiempo.

Eventos

Nombre	Descripción
scene-rendered	Se envía después de renderizar la escena del modelo 3D por primera vez.
camera-changed	Se envía cuando cambia alguna de las propiedades de la cámara 3D. El objeto event.detail contiene todas las propiedades actuales de la cámara.
hotspot-clicked	Se envía cuando se hace clic en un hotspot. El objeto event.detail contiene el nombre del hotspot en el que se ha hecho clic.
interaction-start	Se envía cuando el usuario empieza a interactuar con el modelo 3D.
interaction-end	Se envía cuando el usuario deja de interactuar con el modelo 3D.

Métodos

Nombre	Descripción
setYaw(yaw:number)	Define el ángulo de guiñada (en grados) sin animaciones, teniendo en cuenta los límites de cámara.
setTargetYaw(targetYaw:number)	Define el ángulo de guiñada objetivo (en grados) en función de los límites de la cámara o fija la rotación entre -360 y 360 grados.
setTargetPitch(targetPitch:number)	Define el ángulo de tono objetivo (en grados).
incrementTargetPitch(pitchDelta:number)	Incrementa el tono objetivo del ángulo delta (en grados).
setTargetZoom(targetZoom:number)	Define el zoom objetivo (en metros).
incrementTargetZoom(zoomDelta:number)	Incrementa el zoom objetivo (en metros).
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	Define el punto pivote objetivo (en metros).
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	Define el desplazamiento local objetivo (en metros).
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	Define el color del material.
playAnimation(animationName:string)	Reproduce la animación.
pauseAnimation(animationName:string)	Pausa la animación.
setAnimationTime(animationName:string, animationTime:number)	Define la duración de la animación (en segundos).
lookAtHotspot(hotspotName:string)	Mueve y gira la cámara para centrarse en el hotspot.

Visor de modelos 3D

gwd-3d-model-viewer

Componente que encapsula el componente Visor de modelos 3D.

Propiedades

Nombre	Descripción
src:file	Archivo de origen del modelo 3D.
gesture-cue-icon:file	Icono del indicador gestual.
gesture-cue-text:string	Texto que se muestra debajo del icono del indicador gestual.
gesture-cue-duration:number	Duración (en segundos) para mostrar el indicador gestual. El valor -1 significa que no hay límite de tiempo.
skybox-image:file	Imagen de fondo de la escena del modelo 3D.
environment-image:file	Controla el reflejo medioambiental del modelo 3D.

Eventos

Nombre	Descripción
scene-rendered	Se envía después de renderizar la escena del modelo 3D por primera vez.
camera-changed	Se envía cuando cambia alguna de las propiedades de la cámara 3D. El objeto event.detail contiene todas las propiedades actuales de la cámara.
hotspot-clicked	Se envía cuando se hace clic en un hotspot. El objeto event.detail contiene el nombre del hotspot en el que se ha hecho clic.
interaction-start	Se envía cuando el usuario empieza a interactuar con el modelo 3D.
interaction-end	Se envía cuando el usuario deja de interactuar con el modelo 3D.

Métodos

Nombre	Descripción
setYaw(yaw:number)	Define el ángulo de guiñada (en grados) sin animaciones, teniendo en cuenta los límites de cámara.
setTargetYaw(targetYaw:number)	Define el ángulo de guiñada objetivo (en grados) en función de los límites de la cámara o fija la rotación entre -360 y 360 grados.
setTargetPitch(targetPitch:number)	Define el ángulo de tono objetivo (en grados).
incrementTargetPitch(pitchDelta:number)	Incrementa el tono objetivo del ángulo delta (en grados).
setTargetZoom(targetZoom:number)	Define el zoom objetivo (en metros).
incrementTargetZoom(zoomDelta:number)	Incrementa el zoom objetivo (en metros).
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	Define el punto pivote objetivo (en metros).
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	Define el desplazamiento local objetivo (en metros).
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	Define el color del material.
playAnimation(animationName:string)	Reproduce la animación.
pauseAnimation(animationName:string)	Pausa la animación.
setAnimationTime(animationName:string, animationTime:number)	Define la duración de la animación (en segundos).

Añadir a calendario

gwd-addtocalendar

Añade un evento a los calendarios.

Propiedades

Nombre	Descripción
event-title:string	Nombre del evento tal y como se mostrará en el calendario del usuario.
start-date:string	Fecha en la que comienza el evento.
start-time:string	Hora a la que comienza el evento (en el formato de 24 horas).
end-date:string	Fecha en la que termina el evento.
end-time:string	Hora a la que termina el evento (en el formato de 24 horas).
timezone:string	Zona horaria del evento. Si se configura esta opción, la hora se ajusta correctamente cuando el usuario se encuentra en otra zona horaria.
location:string	Ubicación del evento.
description:string	Descripción del evento.
icalendar:boolean	Indica si debe usarse un archivo de iCalendar o no.
google:boolean	Indica si debe usarse un calendario de Google Calendar o no.
windows-live:boolean	Indica si debe usarse un calendario de Windows Live Calendar o no.
yahoo:boolean	Indica si debe usarse un calendario de Yahoo! Calendar o no.
bg-color:string	Valor hexadecimal del color del fondo del elemento desplegable.
font-color:string	Valor hexadecimal del color de la fuente del elemento desplegable.
font-family:string	Nombre de la fuente del elemento desplegable.
font-size:string	Tamaño de la fuente del elemento desplegable.
font-weight:string	Grosor de la fuente del elemento desplegable.
highlight-color:string	Valor hexadecimal del color de resaltado del elemento desplegable.

Audio

gwd-audio

Componente que encapsula un elemento HTMLAudioElement.

Propiedades

Nombre	Descripción
autoplay:boolean	Indica si el audio se reproducirá automáticamente al cargarse.
loop:boolean	Indica si el audio se reproducirá en bucle al completarse.
muted:boolean	Indica si el audio comenzará a reproducirse en modo silenciado o no.
controls:boolean	Indica si los controles predeterminados del reproductor nativo están habilitados o no.
sources:file	Cadena de fuentes de audio en distintos formatos separadas por comas.

Eventos

Nombre	Descripción
play	Se envía cuando la reproducción del contenido multimedia comienza tras un evento de pausa previo.
pause	Se envía cuando la reproducción se pone en pausa.
playing	Se envía cuando el contenido multimedia comienza a reproducirse (ya sea por primera vez, tras una pausa o tras haber finalizado y comenzar de nuevo).
ended	Se envía cuando se completa una reproducción.
volumechange	Se envía cuando cambia el volumen del audio (tanto cuando se define el volumen como cuando cambia el atributo de silenciar).
seeked	Se envía cuando se completa una operación de búsqueda.
waiting	Se envía cuando la operación solicitada (por ejemplo, la reproducción) se retrasa porque está pendiente la realización de otra operación (por ejemplo, una búsqueda).

Métodos

Nombre	Descripción
mute()	Permite alternar entre activar el sonido del audio o silenciarlo.
pause()	Pausa el audio.
play()	Reproduce el audio.
replay()	Vuelve a reproducir el audio.
seek(time:number)	Salta directamente al momento especificado del audio.

Galería en carrusel

gwd-carouselgallery

Objeto de la galería que muestra sus fotogramas en un diseño en carrusel.

Propiedades

Nombre	Descripción
images:string	Cadena de rutas de imágenes separadas por comas que se usan en la galería.
groups:string	Cadena de IDs de grupos separados por comas.
transition-duration:number	Velocidad de la animación de la galería en milisegundos.
start-frame:number	Número del fotograma que desea mostrar al inicio.
autoplay:boolean	Indica si los fotogramas se reproducen automáticamente una vez o no.
has-navigation:boolean	Indica si se incluirán automáticamente controles de navegación de la galería o no.
navigation-thumbnails:boolean	Indica si se usarán miniaturas para la navegación, en lugar de puntos.
navigation-highlight:color	Código de color de CSS que se usa para destacar el fotograma activo en la navegación.
scaling:string	Indica cómo se adaptará el contenido de cada imagen para ajustarse al marco del fotograma.
frame-width:number	Anchura de un panel de contenido.
frame-height:number	Altura de un panel de contenido.
neighbor-rotation-y:number	Rotación sobre el eje Y que se aplica a los paneles contiguos al panel centrado actualmente. Se usa para inclinar dichos paneles.
neighbor-translation-x:number	Traslación sobre el eje X que se aplica a los paneles contiguos al panel centrado actualmente. Se usa para ajustar la ubicación de dichos paneles.
neighbor-translation-y:number	Traslación sobre el eje Y que se aplica a los paneles contiguos al panel centrado actualmente.
neighbor-translation-z:number	Traslación sobre el eje Z que se aplica a los paneles contiguos al panel centrado actualmente.
exit-urls:string	Cadena de URLs de salida separadas por comas que corresponden a las imágenes de la galería.
show-reflection:boolean	Indica si se mostrará un reflejo basado en CSS3 o no.
pause-front-media:boolean	Cuando cambia el fotograma actual, indica si se pausarán o no los elementos de contenido multimedia (vídeo o audio) en el fotograma anterior.
resume-next-media:boolean	Cuando cambia el fotograma actual, indica si se reactivarán o no los elementos de contenido multimedia (vídeo o audio) en el nuevo fotograma.

Eventos

Nombre	Descripción
firstinteraction	Se envía cuando el usuario interactúa con la galería por primera vez.
allframesviewed	Se envía cuando todos los fotogramas de la galería se han mostrado al menos una vez.
allframesloaded	Se envía cuando se cargan todos los fotogramas de la galería.
autoplayended	Se envía cuando la reproducción automática ha finalizado por cualquier motivo. event.detail.completed devolverá el valor "verdadero" si ha finalizado de manera natural al alcanzar la duración esperada; de lo contrario, devolverá el valor "falso".
frameshown	Se envía cuando se muestra un nuevo fotograma.
frameactivated	Se envía cuando se ha comenzado a activar un nuevo fotograma, incluso si todavía no es visible.
frameautoplayed	Se envía cuando un fotograma se activa para reproducirse automáticamente. Se activa con más frecuencia que frameshown, porque se activará por separado para cada uno de los diversos fotogramas que se puedan ver a la vez.
frametap	Se envía cuando el usuario toca un fotograma.
reachleftend	Se envía cuando se llega al límite izquierdo de la galería.
reachrightend	Se envía cuando se llega al límite derecho de la galería.
trackstart	Se envía cuando se inicia el arrastre con el cursor del ratón o la acción táctil.
track	El componente registra los datos de las coordenadas X e Y asociados con el arrastre del cursor del ratón o de la acción táctil.
trackend	Se envía cuando finaliza el arrastre con el cursor del ratón o la acción táctil.

Métodos

Nombre	Descripción
goToFrame(index:number, opt_animate:string)	Redirige al fotograma especificado.
goForwards(opt_animate:string)	Redirige al fotograma siguiente, si está disponible.
goBackwards(opt_animate:string)	Redirige al fotograma anterior.
rotateOnce(opt_duration:number, opt_direction:string)	Se muestran todas las imágenes de la galería una vez.
stopRotation()	Detiene la rotación automática actual.

Punto de inserción

gwd-cuepoint

Componente que se vincula a un componente de vídeo de Google Web Designer y activa un evento cuando el vídeo alcanza un momento específico.

Propiedades

Nombre	Descripción
time:number	Momento en el que se activa el evento, en segundos.

Eventos

Nombre	Descripción
cuepoint	Se envía cuando la reproducción del contenido multimedia ha alcanzado el tiempo definido en un punto de inserción.

Métodos

Nombre	Descripción
seek()	Lleva el vídeo a un punto de inserción.
setTime(time:number)	Define el momento del punto de inserción.

Intercambio de fechas

gwd-dateswap

El componente Intercambio de fechas cambiará la visibilidad del elemento en función de la relación que tenga la fecha actual con el periodo objetivo.

Propiedades

Nombre	Descripción
from_date:string	Cadena que representa una fecha de acuerdo con los estándares RFC2822 o ISO 8601.
to_date:string	Cadena que representa una fecha de acuerdo con los estándares RFC2822 o ISO 8601.

Eventos

Nombre	Descripción
before	Se envía cuando la fecha actual es anterior a from_date (exclusiva).
during	Se envía cuando la fecha actual se encuentra entre el from_date y el to_date (inclusiva).
after	Se envía cuando la fecha actual es posterior a to_date (exclusiva).

Métodos

Nombre	Descripción
checkDate()	Compara la fecha actual con el periodo.

Navegación por la galería

gwd-gallerynavigation

Control de navegación para un componente de galería de Google Web Designer.

Propiedades

Nombre	Descripción
for:string	Cadena de rutas de imágenes separadas por comas que se usan en la galería.
highlight:color	Código de color de CSS que se usa para destacar el fotograma activo en la navegación.
use-thumbnails:boolean	Indica si se usarán miniaturas para la navegación, en lugar de puntos.

Anuncio genérico

gwd-genericad

Implementa el contenedor de anuncio genérico.

Eventos

Nombre	Descripción
adinitialized	Se envía justo antes de que el elemento genérico renderice el contenido del anuncio.

Métodos

Nombre	Descripción
initAd()	Muestra el anuncio cuando se reciben los eventos adecuados del enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	Dirige a las dimensiones ampliadas del anuncio. Si un ID de página no se especifica, el anuncio dirige a la página predeterminada.
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)	Sale del anuncio y, opcionalmente, lo contrae.

Gesto

gwd-gesture

Expresión simplificada de un número de eventos gestuales.

Propiedades

Nombre	Descripción
touch-action:string	Indica cómo deberá interpretarse la acción táctil. Los valores válidos son auto, none, pan-x y pan-y. El comportamiento predeterminado es el mismo cuando se define como none.

Eventos

Nombre	Descripción
hover	Se envía cuando el cursor del ratón o la acción táctil entra en los límites del componente.
hoverend	Se envía cuando el cursor del ratón o la acción táctil abandona los límites del componente.
trackstart	Se envía cuando se inicia el arrastre con el cursor del ratón o la acción táctil.
track	El componente registra los datos de las coordenadas X e Y asociados con el arrastre del cursor del ratón o de la acción táctil.
trackend	Se envía cuando finaliza el arrastre con el cursor del ratón o la acción táctil.
tap	Se envía cuando se registra un clic con el ratón o un toque por parte del usuario.
swipeleft	Se envía cuando el usuario desliza el dedo hacia la izquierda.
swiperight	Se envía cuando el usuario desliza el dedo hacia la derecha.
swipeup	Se envía cuando el usuario desliza el dedo hacia arriba.
swipedown	Se envía cuando el usuario desliza el dedo hacia abajo.

Anuncio de Google

gwd-google-ad

Implementa el contenedor de anuncio de Google.

Propiedades

Nombre	Descripción
polite-load:boolean	Indica si el anuncio debe respetar la semántica de la carga progresiva o no.
fullscreen:boolean	Indica si este anuncio debe intentar ampliar su tamaño a pantalla completa o no.

Eventos

Nombre	Descripción
adinitialized	Se envía justo antes de que el elemento renderice el contenido del anuncio.
expandstart	Se envía cuando el enabler activa el evento para iniciar la expansión.
expandfinish	Se envía cuando el enabler activa el evento para finalizar la expansión.
collapsestart	Se envía cuando el enabler activa el evento para iniciar la compresión.
collapsefinish	Se envía cuando el enabler activa el evento para finalizar la compresión.
fullscreensupport	Se envía si se admite la expansión a pantalla completa.
dynamicelementsready	Se envía después de que los datos dinámicos se hayan aplicado al contenido del anuncio.
hostpagescroll	Se envía cuando el enabler activa el evento de desplazamiento de página de alojamiento.

Métodos

Nombre	Descripción
initAd()	Muestra el anuncio cuando se reciben los eventos adecuados del enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	Dirige a las dimensiones ampliadas del anuncio. Si un ID de página no se especifica, el anuncio dirige a la página predeterminada.
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	Sale del anuncio y, opcionalmente, lo contrae.
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	Sale del anuncio a la URL especificada, independientemente del valor definido en Studio. Contrae el anuncio si opt_collapseOnExit devuelve el valor true.
incrementCounter(metric:string, opt_isCumulative:boolean)	Registra un evento de contador.
startTimer(timerId:string)	Inicia un temporizador de evento.
stopTimer(timerId:string)	Para un temporizador de evento.
reportManualClose()	Registra un cierre manual de un anuncio flotante, de ventana emergente, expandible, in-page con ventana emergente o in-page con anuncio flotante. Este método es un proxy de Enabler.reportManualClose.

Hotspot

gwd-hotspot

Componente que muestra y oculta un hotspot en momentos específicos de un vídeo.

Propiedades

Nombre	Descripción
show-time:number	Momento en el que se muestra el hotspot, en segundos.
hide-time:number	Momento en el que se oculta el hotspot, en segundos.
left:string	Posición izquierda del hotspot situado encima del vídeo en relación con la anchura del fotograma (p. ej., "5 %").
top:string	Posición superior del hotspot situado encima del vídeo en relación con la altura del fotograma (p. ej., "5 %").
width:string	La anchura del hotspot es proporcional al vídeo en relación con la anchura del fotograma.
height:string	La altura del hotspot es proporcional al vídeo en relación con la altura del fotograma.

Eventos

Nombre	Descripción
hotspotshown	Se envía cuando el hotspot se vuelve visible.
hotspothidden	Se envía cuando se oculta el hotspot.

Métodos

Nombre	Descripción
show(showHide:boolean)	Mostrar u ocultar el hotspot.
seek(showHide:boolean)	Lleva el vídeo al momento en el que se muestra u oculta el hotspot.
setTimes(showTime:number, hideTime:number)	Define los momentos en los que se muestra y oculta el hotspot.

Iframe

gwd-iframe

Componente que encapsula un elemento HTMLIframeElement.

Propiedades

Nombre	Descripción
source:string	Fuente del iframe. Sustituye el atributo src del elemento de imagen nativo.
scrolling:string	Indica si en el iframe se deberán mostrar barras de desplazamiento o no.

Eventos

Nombre	Descripción
iframeload	Se envía cuando se carga el iframe.

Métodos

Nombre	Descripción
setUrl(url:string)	Cambia la URL del iframe y lo carga inmediatamente.

Imagen

gwd-image

Componente que encapsula un elemento HTMLImageElement para admitir la carga diferida de la fuente de la imagen.

Propiedades

Nombre	Descripción
source:file	Fuente de la imagen. Sustituye el atributo src del elemento de imagen nativo.
alt:string	Texto alternativo de la imagen.
scaling:string	Define cómo se adaptará la imagen para ajustarse a este fotograma.
alignment:string	Define el modo en que la imagen se alineará con el área de visualización.
focalpoint:string	Codifica un foco de imagen como coordenadas de píxeles x/y.
disablefocalpoint:boolean	Inhabilita el foco que define el atributo focalpoint (usado de forma interna en Google Web Designer).

Botón de imagen

gwd-imagebutton

Un botón de imagen que cambia antes de pulsarse, cuando se coloca el cursor sobre él y al pulsarse.

Propiedades

Nombre	Descripción
up-image:file	URL de la imagen del botón sin pulsar.
over-image:file	URL de la imagen del botón cuando se mueve o se coloca el cursor sobre él.
down-image:file	URL de la imagen del botón pulsado.
bgcolor:string	Color del fondo del botón.
alignment:string	Define el modo en que la imagen se alineará con el área de visualización.
scaling:string	El modo en que la imagen se ajustará al contenedor superior.
disabled:boolean	Indica si el botón debe desactivarse.

Eventos

Nombre	Descripción
imagebuttonloaded	Se envía cuando todas las imágenes se han cargado.

Métodos

Nombre	Descripción
toggleEnable()	Permite alternar entre habilitado e inhabilitado.
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string)	Define las fuentes de las imágenes para todos los estados de botones.

Efecto de imagen

gwd-image-effect

Componente Efecto de imagen.

Propiedades

Nombre	Descripción
scaling:string	Define cómo se adaptará la imagen para ajustarse a este fotograma.
time-limit:number	Límite de tiempo de la animación. El valor -1 significa que no hay límite de tiempo.
settings:string	Lanza el cuadro de diálogo de configuración del componente.
images:string	Cadena de rutas de imágenes separadas por comas que se usan en el efecto de imagen.

Eventos

Nombre	Descripción
autoplayended	Se envía al finalizar la reproducción automática cuando se alcanza el límite de tiempo.

Métodos

Nombre	Descripción
play()	Reproduce la animación.
pause()	Pausa la animación.

Efecto de imagen Antes y después

gwd-before-and-after

Efecto de imagen en el que se combinan dos imágenes similares en una comparación del antes y el después.

Efecto de imagen Respiración

gwd-breathe

Efecto de imagen que hace que una imagen se expanda y se contraiga de forma elástica.

Efecto de imagen Desvelación

gwd-reveal

Efecto de imagen en el que una imagen se analiza mediante un área de enfoque elíptica en la que se revela una segunda imagen.

Efecto de imagen Ola

gwd-wave

Efecto de imagen que aplica una transformación de ola animada a una imagen, lo que provoca que la imagen se desplace en un patrón de ola.

Mapa

gwd-map

Amplía HTMLElement para encapsular las llamadas a las APIs de Google Maps.

Propiedades

Nombre	Descripción
api-key:string	Clave de API de Google. Consulte: https://developers.google.com/maps/documentation/javascript/get-api-key
query:string	Nombre de consulta de búsqueda para devolver ubicaciones de la API de Google Places.
start-latitude:decimal	Coordenada de latitud del punto central de inicio. El valor deberá ser entre -90 y 90 grados.
start-longitude:decimal	Coordenada de longitud del punto central de inicio. El valor deberá ser entre -180 y 180 grados.
request-user-location:boolean	Indica si debe requerirse la ubicación del usuario. Si se define como "verdadero", se le pedirá al usuario que comparta su ubicación.
client-id:string	ID de cliente de los usuarios Premier de Google Maps
search-radius:number	Radio mínimo (en metros) en el que se llevará a cabo una búsqueda de ubicación.
result-limit:number	Número máximo de resultados que se devolverán en una única consulta.
start-zoom:number	Nivel de zoom inicial (en unidades) utilizado por la API de Google Maps. De manera predeterminada será de 16, que es el nivel del barrio del usuario.
marker-src:string	Nombre de archivo de imagen del marcador, como un sprite que contenga los componentes de activación, desactivación y sombra.
gps-src:string	Nombre de archivo de la imagen del punto azul de la ubicación del GPS.
msg-start-position-prompt:string	Cadena de localización para el cuadro de diálogo que solicita al usuario que seleccione un punto de partida.
msg-gps-button-label:string	Cadena de localización para la etiqueta del botón que recupera la ubicación del usuario de la API de geolocalización.
msg-manual-position-button-label:string	Cadena de localización de la etiqueta del botón que hace que se muestre un campo de búsqueda de ubicación.
msg-manual-position-prompt:string	Cadena de localización para el cuadro de diálogo que solicita al usuario que busque un punto de partida en el mapa.
msg-manual-position-placeholder:string	Cadena de localización para el texto de marcador de posición del cuadro de búsqueda que permite buscar un punto de partida en el mapa.
msg-geocode-failure:string	Cadena de localización del texto del cuadro de diálogo que se muestra cuando falla el intento de utilizar la API de geolocalización.
msg-no-results-found:string	Cadena de localización para el cuadro de diálogo que se muestra cuando no se encuentran resultados para la ubicación seleccionada.

Eventos

Nombre	Descripción
pinclick	Cuando el usuario selecciona un marcador del mapa.

Métodos

Nombre	Descripción
setCenter(latitude:number, longitude:number, opt_accuracy:number)	Define el centro del mapa en la ubicación especificada mediante latitud y longitud.

Página

gwd-page

Página que representa una tarjeta única en el conjunto de páginas.

Propiedades

Nombre	Descripción
expanded:boolean	Indica si la página debe considerarse una página expandida (específica del anuncio).
centered:boolean	Indica si los contenidos de la página deben estar centrados o no.
alt-orientation-page:string	El ID de la página que mejor representa el contenido en la orientación alternativa.

Eventos

Nombre	Descripción
attached	Se envía justo después de que la página se adjunte al DOM.
detached	Se envía justo después de que la página se elimine del DOM.
pageactivated	Se envía cuando la página está lista para mostrarse.
pagedeactivated	Se envía cuando la página deja de mostrarse.
pageload	Se envía justo después de que los contenidos de la página se hayan cargado correctamente.
pagepresenting	Se envía justo antes de que comience la animación de introducción en la página.
shake	Se envía cuando se detecta el gesto de agitar un dispositivo.
tilt	Se envía cuando se detecta el gesto de inclinar un dispositivo.
rotatetoportrait	Se envía cuando un dispositivo se coloca en posición vertical.
rotatetolandscape	Se envía cuando un dispositivo se coloca en posición horizontal.

Conjunto de páginas

gwd-pagedeck

Un conjunto de páginas es un contenedor de páginas. Muestra una página cada vez y se pueden definir ciclos para que se muestren distintas páginas en la parte frontal en un orden establecido y con cualquiera de las transiciones de páginas compatibles.

Propiedades

Nombre	Descripción
default-page:string	El ID de la página predeterminada.

Eventos

Nombre	Descripción
pagetransitionstart	Se envía antes de que se produzca una transición de página.
pagetransitionend	Se envía después de que se produzca una transición de página.

Métodos

Nombre	Descripción
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Dirige a la página siguiente del conjunto de páginas.
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Dirige a la página anterior del conjunto de páginas.
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Dirige a la página especificada del conjunto de páginas.
getCurrentPage()	Devuelve la página actual o un valor nulo si no se muestra ninguna página.
getDefaultPage()	Devuelve la página predeterminada (si se ha especificado) o la primera página.
getPage(pageId:string)	Devuelve la página con el ID especificado.
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean)	Devuelve el elemento de página con el valor del atributo que corresponde al valor especificado o -1 si una página no se encontró.
getOrientationSpecificPage(orientation:string, pageId:string)	Devuelve la página correspondiente a la orientación especificada.
getElementById(id:string)	Identifica el elemento con el ID especificado en todas las páginas de este conjunto. Como gwd-pagedeck solo mantiene la página activa en el DOM, el document.getElementById(id) estándar no devolverá los elementos de las páginas inactivas. Especialmente en los anuncios dinámicos, suele hacerse referencia a elementos de páginas inactivas. En dichos casos, este método puede usarse para anular la referencia a un elemento por su ID.

Paralaje

gwd-parallax

Componente Paralaje.

Propiedades

Nombre	Descripción
settings:string	Lanza el cuadro de diálogo de configuración del componente.
yscroll:decimal	Factor de desplazamiento que se debe usar en la animación del paralaje al renderizarla en la escena.

Eventos

Nombre	Descripción
ready	Se envía cuando se cargan todos los recursos del componente Paralaje.

Efectos de partículas

gwd-particleeffects

Componente para componer varios efectos de partículas e imágenes.

Propiedades

Nombre	Descripción
autoplay:boolean	Indica si la animación se reproduce automáticamente o no cuando se carga el componente.
time-limit:number	Límite de tiempo de la animación. El valor -1 significa que no hay límite de tiempo.
settings:string	Lanza el cuadro de diálogo de configuración del componente.

Eventos

Nombre	Descripción
timelimitreached	Se envía cuando la reproducción de la animación ha alcanzado el límite de tiempo determinado.

Métodos

Nombre	Descripción
play()	Reproduce la animación.
pause()	Pausa la animación.
stop()	Detiene la animación.

Partículas

gwd-particles

Componente sistema de partículas.

Propiedades

Nombre	Descripción
acceleration-x:number	Componente x de la aceleración en px/fotograma/fotograma.
acceleration-y:number	Componente y de la aceleración en px/fotograma/fotograma.
angle-max:number	Ángulo máximo de la dirección de velocidad de las partículas.
angle-min:number	Ángulo mínimo de la dirección de velocidad de las partículas.
autoplay:boolean	Indica si la animación se reproduce automáticamente o no cuando el componente principal gwd-particleeffects empieza a reproducirse.
color1:color	Primer color.
color2:color	Segundo color.
color-rate:number	Velocidad a la que el color cambia del color 1 al color 2 por fotograma por adición, comprendido entre [0, 1].
emit-interval:number	Número de fotogramas hasta que se emita la siguiente partícula.
emit-x-max:string	Coordenada x máxima del intervalo de emisiones de una partícula.
emit-x-min:string	Coordenada x mínima del intervalo de emisiones de una partícula.
emit-y-max:string	Coordenada y máxima del intervalo de emisiones de una partícula.
emit-y-min:string	Coordenada y mínima del intervalo de emisiones de una partícula.
loop:boolean	Indica si una animación se reproduce en bucle.
number:number	Número de partículas.
opacity-min:number	Opacidad mínima de las partículas.
opacity-max:number	Opacidad máxima de las partículas.
opacity-rate:number	Velocidad a la que cambia la opacidad por fotograma, que se suma a la opacidad actual de una partícula.
random-colors:boolean	Indica si las partículas tienen colores aleatorios entre el color 1 y el color 2. Si el valor es "falso", todas las partículas se inicializan con el color 1.
shape:string	Forma del sprite.
size-max:number	Tamaño máximo de las partículas en píxeles.
size-min:number	Tamaño mínimo de las partículas en píxeles.
size-rate:number	Velocidad a la que cambia el tamaño por fotograma, que se suma al tamaño actual de una partícula.
skip-forward:number	Pasar a un momento en el que un porcentaje determinado de partículas se emiten en un sistema de partículas.
speed-max:number	Velocidad máxima de las partículas en píxeles por fotograma.
speed-min:number	Velocidad mínima de las partículas en píxeles por fotograma.
sprite-image-src:file	La fuente de las imágenes que se utilizan como sprites.
turbulence-frequency:number	Frecuencia de la turbulencia. Los valores más altos causan irregularidades más frecuentes en el movimiento. Debe ser un número positivo.
turbulence-rate:number	Velocidad a la que cambia la fuerza a lo largo del tiempo.
turbulence-strength:number	Fuerza que la turbulencia ejerce sobre las partículas. Debe ser un número positivo.
turbulence-trail:number	Número de estados anteriores y actuales de una partícula que deben renderizarse.

Métodos

Nombre	Descripción
play()	Reproduce la animación.
pause()	Pausa la animación.
stop()	Detiene la animación.

Hoja de sprites

gwd-spritesheet

Muestra un único fotograma o animación de la hoja de sprites.

Propiedades

Nombre	Descripción
imagesource:file	URL de la imagen de la hoja de sprites.
offsetx:number	La distancia, en píxeles, desde el lado izquierdo de la hoja de sprite hasta los bordes izquierdos de una de estas imágenes: La imagen específica que desea usar de la hoja de sprites. La primera imagen de sprite que va a usar para crear una animación.
offsety:number	La distancia, en píxeles, desde la parte superior de la hoja de sprite hasta la parte superior de una de estas imágenes: La imagen específica que desea usar de la hoja de sprites. La primera imagen de sprite que va a usar para crear una animación.
clipwidth:number	La anchura, en píxeles, de una de estas imágenes: La imagen específica que desea usar de la hoja de sprites. La primera imagen de sprite que está utilizando para crear una animación.
clipheight:number	Altura, en píxeles, de una de estas imágenes: La imagen específica que desea usar de la hoja de sprites. La primera imagen de sprite que está utilizando para crear una animación.
alignment:string	Determina la posición de la imagen que se encuentra dentro del contenedor.
scaling:string	Determina cómo se muestran imágenes de diferentes tamaños dentro del componente.
totalframecount:number	Número de fotogramas que pueden formar la animación.
duration:number	Duración de cada fotograma en milisegundos.
loopcount:number	Número de veces que se repite la animación. Se le asigna el valor 0 para activar la repetición infinita.
autoplay:boolean	Indica si la animación se reproduce automáticamente o no.
endonstartframe:boolean	Indica si la animación finaliza en el fotograma inicial o no.
reverseplay:boolean	Indica si la animación se reproduce hacia atrás o no.

Eventos

Nombre	Descripción
animationend	Se envía cuando finaliza la animación.
animationpause	Se envía cuando se pausa la animación.
animationplay	Se envía cuando se empieza a reproducir la animación.
animationrestart	Se envía cuando se reanuda la reproducción de la animación después de una pausa.

Métodos

Nombre	Descripción
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean)	Define una nueva animación.
play()	Reproduce la animación.
pause()	Pausa la animación.
togglePlay()	Permite alternar ente reproducir y pausar la animación.
restart()	Reinicia la reproducción de la animación.
previousFrame()	Muestra el fotograma anterior.
nextFrame()	Muestra el fotograma siguiente.
goToFrame(id:number)	Muestra un fotograma específico por su número.

Valoraciones por estrellas

gwd-starratings

Componente para renderizar una línea de estrellas que representa una valoración.

Propiedades

Nombre	Descripción
ratingvalue:decimal	Valor de la valoración.
iconsize:number	Tamaño del icono de la estrella.
isemptyshown:boolean	Indica si se muestran o no los iconos de estrella vacíos.
isemptycolored:boolean	Indica si los iconos de estrella vacíos están coloreados o no.
colorprimary:color	Color de relleno principal.
colorsecondary:color	Color de degradado secundario.
gradienttype:string	Tipo de degradado.
ratingmax:number	Valoraciones por estrellas máximas.
ratingmin:decimal	Valoraciones por estrellas mínimas.

Eventos

Nombre	Descripción
complete	Cuando se han creado los iconos de valoraciones por estrellas.
validationerror	El valor de valoración por estrellas es inferior a la valoración mínima.

Street View

gwd-streetview

Componente de Google Street View.

Propiedades

Nombre	Descripción
key:string	Consulte cómo puede obtener una clave única para su aplicación en esta página: https://developers.google.com/maps/documentation/javascript/get-api-key.
latitude:decimal	Valor de la latitud de la ubicación.
longitude:decimal	Valor de la longitud de la ubicación.
interaction:boolean	Indica si la vista se puede mover o girar.
heading:decimal	Indica el rumbo de la brújula de la cámara. Se aceptan valores entre 0 y 360 (ambos valores indican el norte; 90, el este y 180, el sur). Si no se especifica ninguna dirección, se calculará un valor que dirija la cámara hacia la ubicación especificada desde el punto en el que se haya hecho la fotografía más cercana.
pitch:decimal	Especifica el ángulo de inclinación hacia arriba o hacia abajo de la cámara con respecto al vehículo de Street View. Casi siempre es plano y horizontal. Los valores positivos inclinan la cámara hacia arriba (90 grados indica recto hacia arriba); los negativos, hacia abajo (90 grados indica recto hacia abajo).
zoom:number	Especifica el zoom de la cámara con respecto al vehículo de Street View.

Galería deslizable

gwd-swipegallery

Objeto de la galería que muestra sus fotogramas en una tira de contenido deslizable.

Propiedades

Nombre	Descripción
images:string	Cadena de rutas de imágenes separadas por comas que se usan en la galería.
groups:string	Cadena de IDs de grupos separados por comas.
transition-duration:number	Velocidad de la animación de la galería en milisegundos.
start-frame:number	Fotograma basado en uno que se toma como punto de inicio.
num-frames-to-display:number	Número de fotogramas que se muestran a la vez.
frame-snap-interval:number	Número de fotogramas que avanzarán cada vez que el usuario deslice el dedo.
autoplay:boolean	Indica si se girará automáticamente la galería una vez o no.
has-navigation:boolean	Indica si se incluirán automáticamente controles de navegación de la galería o no.
navigation-thumbnails:boolean	Indica si se usarán miniaturas para la navegación, en lugar de puntos.
navigation-highlight:color	Código de color de CSS que se usa para destacar el fotograma activo en la navegación.
scaling:string	Indica cómo se adaptará el contenido de cada imagen para ajustarse al marco del fotograma.
swipe-axis:string	Eje en el que se detecta la acción de deslizar.
offset:number	Cantidad de espacio vacío entre los fotogramas de contenido adyacentes.
frame-width:number	Anchura de un fotograma de contenido. Anula num-frames-to-display.
frame-height:number	Altura de un fotograma de contenido.
autoplay-duration:number	Tiempo total durante el que se reproducen automáticamente los fotogramas.
autoplay-step-interval:number	Intervalo que existe entre cada paso de los fotogramas durante la reproducción automática.
exit-urls:string	Cadena de URLs de salida separadas por comas que corresponden a las imágenes de la galería.
disable-gesture:boolean	Oculta o inhabilita el componente gestual que habilita la navegación táctil de la galería.
pause-front-media:boolean	Cuando cambia el fotograma actual, indica si se pausarán o no los elementos de contenido multimedia (vídeo o audio) en el fotograma anterior.
resume-next-media:boolean	Cuando cambia el fotograma actual, indica si se reactivarán o no los elementos de contenido multimedia (vídeo o audio) en el nuevo fotograma.

Eventos

Nombre	Descripción
firstinteraction	Se envía cuando el usuario interactúa con la galería por primera vez.
allframesviewed	Se envía cuando todos los fotogramas de la galería se han mostrado al menos una vez.
allframesloaded	Se envía cuando se cargan todos los fotogramas de la galería.
autoplayended	Se envía cuando la reproducción automática ha finalizado por cualquier motivo. event.detail.completed devolverá el valor "verdadero" si ha finalizado de manera natural al alcanzar la duración esperada; de lo contrario, devolverá el valor "falso".
frameshown	Se envía cuando se muestra un nuevo fotograma, una vez que se completen las animaciones necesarias.
frameactivated	Se envía cuando se ha comenzado a activar un nuevo fotograma, incluso si todavía no es visible.
frameautoplayed	Se envía cuando un fotograma se activa para reproducirse automáticamente. Se activa con más frecuencia que frameshown, porque se activará por separado para cada uno de los diversos fotogramas que se puedan ver a la vez.
frametap	Se envía cuando el usuario toca un fotograma.
reachleftend	Se envía cuando se llega al límite izquierdo de la galería.
reachrightend	Se envía cuando se llega al límite derecho de la galería.
framemouseover	Se envía cuando el usuario desplaza el cursor del ratón sobre un fotograma.
framemouseout	Se envía cuando el usuario desplaza el cursor del ratón fuera de un fotograma.
trackstart	Se envía cuando se inicia el arrastre con el cursor del ratón o la acción táctil.
track	El componente registra los datos de las coordenadas X e Y asociados con el arrastre del cursor del ratón o de la acción táctil.
trackend	Se envía cuando finaliza el arrastre con el cursor del ratón o la acción táctil.

Métodos

Nombre	Descripción
goToFrame(frame:number, opt_animate:string)	Dirige al fotograma especificado.
rotateOnce(opt_duration:number, opt_direction:string)	Muestra todos los fotogramas de la galería una vez.
stopRotation()	Detiene la rotación automática actual.
goForwards()	Hace avanzar un fotograma en la galería.
goBackwards()	Hace retroceder un fotograma en la galería.

Espiral

gwd-swirl

Componente Espiral.

Propiedades

Nombre	Descripción
yscroll:decimal	Factor de desplazamiento que se debe usar en la animación de la espiral al renderizarla en la escena.
settings:string	Lanza el cuadro de diálogo de configuración del componente.

Eventos

Nombre	Descripción
ready	Se envía cuando se cargan todos los recursos secundarios.

Área de pulsación

gwd-taparea

Abstracción del evento de tocar/hacer clic.

Propiedades

Nombre	Descripción
exit-override-url:string	URL a la que se sale cuando se toca el área sensible.

Eventos

Nombre	Descripción
action	Se envía cuando el usuario toca un botón (en dispositivos móviles) o hace clic en él (en ordenadores).

Tocar para llamar o enviar mensaje de texto

gwd-taptocall

Componente que, cuando se toca o se hace clic en él, llamará o enviará un mensaje SMS al número de teléfono configurado.

Propiedades

Nombre	Descripción
number:string	Número de teléfono al que se llamará o al que se enviará el mensaje de texto.
action:string	Permite seleccionar entre enviar un mensaje SMS o iniciar una llamada telefónica.

Eventos

Nombre	Descripción
action	Se envía cuando el usuario toca un botón (en dispositivos móviles) o hace clic en él (en ordenadores).
taptocall	Se envía cuando se inicia una llamada o se envía un SMS.

Métodos

Nombre	Descripción
dial()	Inicia una llamada o envía un mensaje SMS al número configurado.

Galería de transiciones

gwd-transitiongallery

Componente Galería de transiciones.

Propiedades

Nombre	Descripción
settings:string	Lanza el cuadro de diálogo de configuración del componente.
images:string	Cadena de rutas de imágenes separadas por comas que se usan en la galería.
scaling:string	Define cómo se adaptará la imagen para ajustarse a este fotograma.
exit-urls:string	Cadena de URLs de salida separadas por comas que corresponden a las imágenes de la galería.

Eventos

Nombre	Descripción
autoplayended	Se envía cuando la reproducción automática ha finalizado por cualquier motivo. event.detail.completed devolverá el valor "verdadero" si finaliza de manera natural al alcanzar el número de bucles esperado; de lo contrario, devolverá el valor "falso".
frameactivated	Se envía cuando se ha comenzado a activar un nuevo fotograma, incluso si todavía no es visible.
frameshown	Se envía cuando se muestra un nuevo fotograma.
frametap	Se envía cuando el usuario toca un fotograma.
rotateonceended	Se envía cuando la rotación finaliza por cualquier motivo. event.detail.completed devolverá el valor "verdadero" si finaliza de forma natural; de lo contrario, devolverá el valor "falso".
reachleftend	Se envía cuando se llega al límite izquierdo de la galería.
reachrightend	Se envía cuando se llega al límite derecho de la galería.

Métodos

Nombre	Descripción
goToFrame(frame:number, with_animation:boolean)	Dirige al fotograma especificado.
rotateOnce(startFromCurrentFrame:boolean)	Muestra el fotograma de la galería desde el fotograma inicial si startFromCurrentFrame es falso o no se ha especificado. En caso contrario, comienza desde el fotograma actual. La rotación se detiene antes de llegar al fotograma inicial.
startAutoplay(startFromCurrentFrame:boolean)	Inicia la reproducción automática de la galería desde el fotograma inicial si startFromCurrentFrame es falso o no se ha especificado. En caso contrario, comienza desde el fotograma actual. La reproducción automática se detiene cuando alcanza el número de bucles especificado.
stop()	Cancela la animación si está en curso.
goForwards()	Hace avanzar un fotograma en la galería.
goBackwards()	Hace retroceder un fotograma en la galería.

Transición Persianas

gwd-blinds

Componente de efecto Persianas, por el que se muestra la imagen nueva como si apareciera detrás de una persiana con láminas que se abren una tras otra, empezando por un borde y yendo hacia el opuesto.

Propiedades

Nombre	Descripción
direction:dropdown	Dirección del efecto.
blinds:number	Número de persianas.
transparentbackground:boolean	Indica si el fondo transparente se muestra antes de renderizar las persianas de la nueva imagen. Si el valor es "falso", las persianas se superponen a la imagen antigua.

Transición Puerta

gwd-door-wipe

El componente de efecto Puerta es una variación del efecto Barrido, que tiene dos tipos en función de la dirección del barrido. El barrido de puerta abierta empieza a mostrar la imagen nueva desde el centro de la imagen antigua, como si se abriera una puerta doble. El barrido de puerta cerrada empieza a mostrar la imagen nueva desde los bordes opuestos de la imagen antigua hacia el centro, como si se cerrara una puerta doble.

Propiedades

Nombre	Descripción
orientation:dropdown	Orientación de la animación.
direction:dropdown	Indica el sentido del efecto de barrido de puerta.

Transición Atenuación

gwd-fade

Componente de atenuación de la transición.

Transición Barrido de iris

gwd-iris-wipe

Componente de efecto Barrido de iris, por el que se muestra la imagen nueva con un círculo cada vez más grande que emerge desde el centro del fotograma de forma predeterminada.

Propiedades

Nombre	Descripción
originpercentx:number	Origen del círculo que se va ampliando en el eje x en relación con la anchura del fotograma.
originpercenty:number	Origen del círculo que se va ampliando en el eje y en relación con la altura del fotograma.

Transición Empuje

gwd-push

Componente de efecto Empuje, por el que la nueva imagen aparece gradualmente mientras empuja la imagen anterior hasta que desaparece.

Propiedades

Nombre	Descripción
direction:dropdown	Dirección del efecto Empuje.

Transición Radial

gwd-radial-wipe

El componente de efecto Radial es una variación del efecto Barrido, por el que la nueva imagen se revela barriendo un radio alrededor de un punto específico, como la aguja de un reloj.

Propiedades

Nombre	Descripción
direction:dropdown	Dirección del efecto.
originpercentx:number	Origen del eje x con respecto al ancho del fotograma que empieza a barrer un radio alrededor para revelar la nueva imagen.
originpercenty:number	Origen del eje y con respecto a la altura del fotograma que empieza a barrer un radio alrededor para revelar la nueva imagen.

Transición Giro

gwd-rotate

Componente de efecto Giro, por el que la imagen antigua gira al tiempo que se amplía. A continuación, se vuelve a reducir sin dejar de girar hasta que aparece la imagen nueva.

Propiedades

Nombre	Descripción
direction:dropdown	Dirección del efecto.

Transición Porción

gwd-slice

Componente de efecto Porción, por el que la nueva imagen se muestra en porciones o barras que aparecen una tras otra.

Propiedades

Nombre	Descripción
direction:dropdown	Dirección del efecto Porción.
slices:number	Número de porciones o barras que dividen la vista.
transparentbackground:boolean	Indica si revelar el fondo transparente antes de renderizar la diapositiva de las porciones de la nueva imagen. Si el valor es "falso", las porciones se superponen a la imagen antigua.

Transición Dividir

gwd-split-push

El componente de efecto Dividir es una variación del efecto Empuje, por el que la imagen antigua se divide vertical u horizontalmente en dos partes Las partes divididas correspondientes de la nueva imagen empujan cada una de las partes de la imagen anterior hasta que desaparecen en direcciones opuestas.

Propiedades

Nombre	Descripción
orientation:dropdown	Orientación de la animación.

Transición Franja

gwd-stripe-wipe

El componente de efecto Franja es una variación del efecto Barrido, por el que franjas sólidas de colores alternos aparecen simultáneamente en pantalla para tapar la imagen anterior. A continuación, las franjas se reducen para revelar la nueva imagen.

Propiedades

Nombre	Descripción
direction:dropdown	Dirección del efecto.
stripes:number	Número de franjas de cada color.
color1:color	Valor hexadecimal de uno de los dos colores de las franjas que se alternan.
color2:color	Valor hexadecimal del otro color de las franjas que se alternan.

Transición Persianas venecianas

gwd-venetian-blinds

Componente de efecto Persianas venecianas, por el que se muestra la imagen nueva como si apareciera detrás de unas persianas venecianas con láminas que se abren simultáneamente o una tras otra.

Propiedades

Nombre	Descripción
orientation:dropdown	Orientación de la animación.
blinds:number	Número de persianas.
staggered:boolean	Indica si las láminas hacen la transición con retraso. Si el valor es "falso", todas las láminas hacen la transición simultáneamente.

Transición Barrido

gwd-wipe

Componente de transición de barrido. Efecto de barrido normal, por el que la nueva imagen reemplaza gradualmente la imagen anterior detrás de una línea que hace un barrido desde un borde hasta el borde opuesto.

Propiedades

Nombre	Descripción
direction:dropdown	Dirección del efecto.
angle:number	Ángulo en el que se inclina la línea, que sustituye la imagen antigua por la nueva.

Transición Zigzag

gwd-zigzag

Componente de efecto Zigzag, por el que la nueva imagen aparece siguiendo un patrón de cuadrícula zigzagueante. El efecto de zigzag horizontal muestra los mosaicos de la nueva imagen en filas sucesivas alternados de izquierda a derecha y de derecha a izquierda. El efecto de zigzag vertical muestra los mosaicos de la nueva imagen en columnas sucesivas alternados de arriba a abajo y de abajo a arriba.

Propiedades

Nombre	Descripción
orientation:dropdown	Orientación de la animación.
rows:number	Número de filas del efecto Zigzag.
columns:number	Número de columnas del efecto Zigzag.

Vídeo

gwd-video

Componente que encapsula un elemento HTMLVideoElement.

Propiedades

Nombre	Descripción
autoplay:boolean	Indica si el vídeo se reproducirá automáticamente cuando se cargue.
loop:boolean	Indica si el vídeo se reproducirá en bucle al completarse.
muted:boolean	Indica si el vídeo comenzará a reproducirse en modo silenciado o no.
controls:boolean	Indica si los controles predeterminados del reproductor nativo están habilitados o no.
sources:file	Cadena de vídeos en distintos formatos separados por comas.
poster:string	URL que indica un fotograma de póster que debe mostrarse hasta que el usuario reproduce contenido o lo busca.

Eventos

Nombre	Descripción
play	Se envía cuando la reproducción de los medios comienza tras haberse puesto en pausa, es decir, que se reanuda tras un evento de pausa previo.
pause	Se envía cuando la reproducción se pone en pausa.
playing	Se envía cuando los medios comienzan a reproducirse (ya sea por primera vez, tras una pausa o tras haber finalizado y comenzar de nuevo).
ended	Se envía cuando se completa una reproducción.
volumechange	Se envía cuando cambia el volumen del audio (tanto cuando se define el volumen como cuando cambia el atributo de silenciar).
seeked	Se envía cuando se completa una operación de búsqueda.
waiting	Se envía cuando la operación solicitada (por ejemplo, la reproducción) se retrasa porque está pendiente la realización de otra operación (por ejemplo, una búsqueda).

Métodos

Nombre	Descripción
mute()	Permite alternar entre activar el sonido del vídeo o silenciarlo.
pause()	Pausa el vídeo.
play()	Reproduce el vídeo.
replay()	Vuelve a reproducir el vídeo.
seek(time:number)	Salta al momento específico del vídeo.
setVolume(volume:number)	Define el volumen del vídeo.
setSources(sources:string)	Define las fuentes del vídeo.

YouTube

gwd-youtube

Amplía HTMLElement para encapsular sus llamadas a las APIs de YouTube.

Propiedades

Nombre	Descripción
video-url:string	URL de YouTube del vídeo.
autoplay:string	En los entornos compatibles, el vídeo de YouTube se reproducirá automáticamente cuando se cargue.
preview-duration:number	Permite definir la duración de la vista previa. Solo se utiliza cuando se asigna el valor preview al atributo de reproducción automática.
controls:string	Muestra los controles de vídeo (none, autohide).
color:string	Tema de color de la barra de progreso del reproductor (rojo o blanco).
muted:boolean	Indica si el vídeo comenzará a reproducirse en modo silenciado o no.
loop:boolean	Indica si el vídeo se reproducirá en bucle al completarse.
pause-on-end:boolean	Pausa el vídeo cuando falta 1 segundo para que finalice.
start-position:number	Inicia el vídeo en un momento concreto (determinado en segundos).
allowfullscreen:boolean	Permite la pantalla completa en el escritorio.
extra-player-args:string	Otros parámetros del reproductor de YouTube, que se describen en https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters.

Eventos

Nombre	Descripción
buffering	El reproductor de YouTube está almacenando en memoria búfer.
ended	El vídeo de YouTube ha llegado al final.
paused	El vídeo de YouTube está en pausa.
playing	El vídeo de YouTube comienza a reproducirse.
replayed	El vídeo de YouTube se ha reproducido de nuevo.
viewed0percent	Se envía cuando se ha visualizado un 0 % del vídeo.
viewed25percent	Se envía cuando se ha visualizado un 25 % del vídeo.
viewed50percent	Se envía cuando se ha visualizado un 50 % del vídeo.
viewed75percent	Se envía cuando se ha visualizado un 75 % del vídeo.
viewed100percent	Se envía cuando se ha visualizado un 100 % del vídeo.
previewed0percent	Se envía cuando se ha visualizado un 0 % de la vista previa.
previewed25percent	Se envía cuando se ha visualizado un 25 % de la vista previa.
previewed50percent	Se envía cuando se ha visualizado un 50 % de la vista previa.
previewed75percent	Se envía cuando se ha visualizado un 75 % de la vista previa.
previewed100percent	Se envía cuando se ha visualizado el 100 % de la vista previa.

Métodos

Nombre	Descripción
toggleMute()	Permite alternar entre activar el sonido del vídeo o silenciarlo.
pause()	Pausa el vídeo.
play()	Reproduce el vídeo.
replay()	Vuelve a reproducir el vídeo.
seek(time:number)	Salta al momento específico del vídeo.
setYouTubeId(id:string, cueOnly:boolean)	Cambia la fuente del vídeo de YouTube al ID especificado.