apod-image

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

View larger

Close

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

<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.

Links

• GitHub Homepage
• Issue tracker
• License
• View on GitHub
• Documentation
• Online Demo

Compatibility