Saltar al contenido principal
Version: Next (5.0)

Multimedia y contenido

Cuatro elementos llevan a una pantalla contenido que no es un control: un avatar con la imagen del usuario de la cabecera, un vídeo, una imagen y un enlace. Las imágenes y el clip de los ejemplos son archivos pequeños generados para esta documentación.

note

El desplegable del avatar se dibuja sobre toda la página, así que sigue el modo de color del sitio y no el del interruptor Claro / Oscuro de la vista previa.

Avatar​

Un avatar muestra una imagen, las iniciales de su etiqueta (o un icono) y la etiqueta a su lado. Con contenido dentro abre un desplegable, como hace el menú de usuario de la cabecera; si tiene acciones, un clic las ejecuta. Una pantalla real le da el nombre y la descripción del usuario con una consulta, algo que el playground no simula.

Vista previa en vivo
XML
<avatar id="demo" label="Ada Lovelace">
  <info-button id="Profile" label="Profile" icon="user" />
  <info-button id="SignOut" label="Sign out" icon="sign-out" />
</avatar>

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

AtributoControlValores
labelEtiquetatext
imageImagen/live/media/avatar.svg
sizeTamañosmlg
unitInsigniatext
show-labelMostrar la etiquetatrue / false
info-buttonMenú desplegabletrue / false

Vídeo​

Un video reproduce el archivo de su src. Con un poster el reproductor muestra esa imagen y carga el clip solo cuando el usuario hace clic.

Vista previa en vivo
XML
<video id="demo" src="/live/media/clip.webm" />

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

AtributoControlValores
posterPóster/live/media/poster.svg
controlsMostrar los controlestrue / false
loopRepetirtrue / false
preloadPrecarganonemetadatafull-video

Recetas​

Imagen​

Una image dibuja el archivo de su url. En el motor React su alternate-url es el texto alt de la imagen, que lee un lector de pantalla.

<image id="Mountains" url="/live/media/photo-mountains.svg" alternate-url="Montañas nevadas al atardecer" />

Un link abre su url en una pestaña nueva, así que el usuario conserva la pantalla. Su label se traduce con los locales de la aplicación.

<tag type="p"><link id="Manual" label="Lee el manual" url="https://docs.aweframework.com" /></tag>
<tag type="p"><link id="Source" label="Código fuente" url="https://gitlab.com/aweframework/awe" /></tag>

Eventos y acciones​

El avatar guarda su evento click y, como un botón, ejecuta sus acciones; la image, el video y el link no tienen evento ni acción propios. El texto de una pantalla tiene su propio elemento: consulta las etiquetas para <text>.

Más​