Directory

← Back

apod-image

A Polymer 2.0 Custom Element for displaying NASA's Astromony Picture of the Day

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/gthmb/apod-image on 2019-05-10 ]

Published on webcomponents.org

<apod-image>

A Polymer 2.0 Custom Element for displaying NASA's Astromony Picture of the Day

By default, the element will show today's APOD image. By setting the date attribute, you can select an image for a date in the past.

The default apod-image has an info toggle button that can be tapped to toggle an overlay containing the title, explanation and date of the image. This overlay, and the ability to toggle it via the toggle button, can be enabled/disabled by setting attributes on your apod-image instance. Please see the api page for the element's documentation.

If you want to use a custom information overlay, you can set the custom-info attribute on your instance. The markup you want to show for the overlay should be passed into the info slot. Please see the demo page for an example.

While most of the APOD images are actually images, sometimes NASA shares a video instead. In this case, the apod-image will render a the video URL in an Frame. The info overlay is still available in for video assets.

Live Example (needs valid API Key to render):

<!-- the tag -->
<apod-image api-key="my-nasa-api-key"></apod-image>

^ Replace my-nasa-api-key with a valid api key. Need One? Get one here. See the demo for some working examples.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#^2.0.0

  • gthmb/apod-request#^0.0.7
  • mlisook/resize-aware#^2.0.0
Released
2017-09-11
Maturity
TESTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

apod-image - Vaadin Add-on Directory

A Polymer 2.0 Custom Element for displaying NASA's Astromony Picture of the Day apod-image - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/gthmb/apod-image](https://github.com//gthmb/apod-image/blob/v0.0.5/README.md) on 2019-05-10 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/gthmb/apod-image) # \ A Polymer 2.0 Custom Element for displaying NASA's Astromony Picture of the Day By default, the element will show today's APOD image. By setting the `date` attribute, you can select an image for a date in the past. The default `apod-image` has an info toggle button that can be tapped to toggle an overlay containing the title, explanation and date of the image. This overlay, and the ability to toggle it via the toggle button, can be enabled/disabled by setting attributes on your `apod-image` instance. Please see the [api page](https://www.webcomponents.org/element/gthmb/apod-image/elements/apod-image) for the element's documentation. If you want to use a custom information overlay, you can set the `custom-info` attribute on your instance. The markup you want to show for the overlay should be passed into the `info` slot. Please see the [demo page](https://www.webcomponents.org/element/gthmb/apod-image/demo/demo/index.html) for an example. While most of the APOD images are actually images, sometimes NASA shares a video instead. In this case, the `apod-image` will render a the video URL in an Frame. The info overlay is still available in for video assets. Live Example (needs valid API Key to render): ```html ``` ^ Replace `my-nasa-api-key` with a valid api key. Need One? [Get one here](https://api.nasa.gov/index.html#apply-for-an-api-key). See the demo for some working examples.
GitHub Homepage
Issue tracker
License
View on GitHub
Documentation
Online Demo

apod-image version 0.0.1
### Dependencies Polymer/polymer#^2.0.0 * gthmb/apod-request#^0.0.7 * mlisook/resize-aware#^2.0.0

apod-image version 0.0.2
### Dependencies Polymer/polymer#^2.0.0 * gthmb/apod-request#^0.0.7 * mlisook/resize-aware#^2.0.0

apod-image version 0.0.3
### Dependencies Polymer/polymer#^2.0.0 * gthmb/apod-request#^0.0.7 * mlisook/resize-aware#^2.0.0

apod-image version 0.0.4
### Dependencies Polymer/polymer#^2.0.0 * gthmb/apod-request#^0.0.7 * mlisook/resize-aware#^2.0.0

apod-image version 0.0.5
### Dependencies Polymer/polymer#^2.0.0 * gthmb/apod-request#^0.0.7 * mlisook/resize-aware#^2.0.0

Online