@aofl/picture

<aofl-picture> serves as a container for zero or more <aofl-source> and one <aofl-img> elements to provide versions of an image for different display sizes. Display size specific sources are defined using the media attribute of the aofl-source element.

Api Documentation

Examples

• https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js

Installation

npm i -S @aofl/picture

Usage

<aofl-picture>
  <aofl-source media="(max-width: 320px)" srcset="https://via.placeholder.com/300x150" width="300" height="150"></aofl-source>
  <aofl-source media="(max-width: 500px)" srcset="https://via.placeholder.com/500x250" width="500" height="250"></aofl-source>
  <aofl-source media="(max-width: 700px)" srcset="https://via.placeholder.com/700x350" width="700" height="350"></aofl-source>
  <aofl-img src="https://via.placeholder.com/1000x500" width="1000" height="500"></aofl-img>
</aofl-picture>

Attributes

| Attributes | Type | Default | Description | |-----------------|---------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | disable-sources | Boolean | false | disable-sources can be used to deactivate the media query checks when aofl-picture loads. It is useful for cases where the desktop version of the app is not responsive. |

<aofl-img> embeds an image into the document. It behaves similarly to <img> with the addition of lazy loading images as they scroll near the visible area of the screen. The current formula is 2x height or width. In addition to this <aofl-img> can be combined with <aofl-picture> and <aofl-source> to provide different images for different display sizes.

Examples

• https://stackblitz.com/edit/1-0-0-aofl-img?embed=1&file=js/example-component/template.js
• https://stackblitz.com/edit/1-0-0-aofl-img-scroll?embed=1&file=js/example-component/template.js

Usage

<aofl-img src="path/to/image" width="100" height="100" alt="image description"></aofl-img>

attributes

| Attributes | Type | Default | Description | |------------|--------|-----------|-------------------------------------------------------| | src | String | undefined | Image url | | width | Number | undefined | Width of image in pixels. | | Height | Number | undefined | Height of image in pixels. | | alt | String | undefined | Defines an alternative text description of the image. |

AoflSource component must be used as a child of aofl-picture and specifies images for different media queries.

Examples

• https://stackblitz.com/edit/1-0-0-aofl-picture?embed=1&file=js/example-component/template.js

Usage

<aofl-picture>
  <aofl-source media="(max-width: 480px)" srcset="path/to/image-480"></aofl-source>
  <aofl-source media="(max-width: 640px)" srcset="path/to/image-640"></aofl-source>
  <aofl-source media="(max-width: 1024px)" srcset="path/to/image-1024"></aofl-source>

  <aofl-img src="path/to/image" width="" height=""></aofl-img>
</aofl-picture>

attributes

| Attributes | Type | Default | Description | |------------|--------|---------|---------------------------------------------------------| | media | String | | media query specifying when aofl-source becomes active. | | srcset | String | | Url of the image. |