Media and content
Four elements bring content that is not a control into a screen: an avatar with the user image of the header, a video, an image and a link. The images and the clip of the examples are small files generated for these docs.
The dropdown of the avatar is drawn over the whole page, so it follows the colour mode of the site and not the one of the Light / Dark switch of the preview.
Avatar​
An avatar shows an image, the initials of its label (or an icon) and the label next to it. With content inside it opens a dropdown, as the user menu of
the header does; with actions instead, a click runs them. A real screen gives it the name and the description of the user with a query, which the
playground does not simulate.
<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>
- Attributes
- Events and actions
- Full reference
The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference
| Attribute | Control | Values |
|---|---|---|
label | Label | text |
image | Image | /live/media/avatar.svg |
size | Size | smlg |
unit | Badge | text |
show-label | Show the label | true / false |
info-button | Dropdown menu | true / false |
| Event | Description |
|---|---|
click | Stored in the avatar when the user clicks it. |
Video​
A video plays the file of its src. With a poster the player shows that image and loads the clip only when the user clicks it.
<video id="demo" src="/live/media/clip.webm" />
- Attributes
- Full reference
The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference
| Attribute | Control | Values |
|---|---|---|
poster | Poster | /live/media/poster.svg |
controls | Show the controls | true / false |
loop | Loop | true / false |
preload | Preload | nonemetadatafull-video |
Recipes​
Image​
An image draws the file of its url. In the React engine its alternate-url is the alt text of the image, which a screen reader reads.
<image id="Mountains" url="/live/media/photo-mountains.svg" alternate-url="Snowy mountains at dusk" />
Links​
A link opens its url in a new tab, so the user keeps the screen. Its label is translated with the locales of the application.
<tag type="p"><link id="Manual" label="Read the manual" url="https://docs.aweframework.com" /></tag>
<tag type="p"><link id="Source" label="Source code" url="https://gitlab.com/aweframework/awe" /></tag>
Events and actions​
The avatar stores its click event and, as a button, runs its actions; the image, the video and the link have no event or action of their own.
The text of a screen has its own element: see tags for <text>.
More​
- Full documentation of the avatar and of the image, video and link.
- XSD reference of the
avatarelement, of thevideoelement, of theimageelement and of thelinkelement.