diff --git a/README.md b/README.md index 17ade12..865a16e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,39 @@ # Nathan's Web Components Some web components for convenience. -## The Components -* **Audio Player** - A neat little audio component that nicely displays a cover image, native audio controls, a title, and a description. +## How to Preview the Components +Clone this repo, then serve locally. I use [live-server](https://www.npmjs.com/package/live-server) to do this. +## How to Use the Components +In your main .js file, import the components you'd like to use: +```javascript +import 'components/audioPlayer/audioPlayer.js'; +``` +then refer to the documentation below. + +## The Components +### Audio Player +A neat little audio component that nicely displays a cover image, native audio controls, a title, and a description. + +#### Attributes: +* audio: a URI pointing to an audio file +* cover: a URI pointing to a cover image +* cover_alt: alt text for the cover image + +#### Slots: +* title: title for the audio file +* description: a description of the audio file + +#### CSS Custom Properties: +* background + +#### Example usage: +```html + +

Toxic - Britney Spears (Karate Kid Bootleg)

+

A massive DnB roller bootleg of a Britney Spears classic: Toxic.

+
+```