n_u/Web_Components
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update README

Browse Source
This commit is contained in:
Nathan Upchurch 2024-01-20 15:24:34 -06:00
parent 6fe9754c35
commit cee809a506
1 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
README.md
View File

@ -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
<audio-player
cover="/assets/images/doge.jpg"
cover_alt="A snoozy doge!"
audio="assets/audio/KARATE KID - TOXIC (ILLFD022).wav">
<h3 slot="title">Toxic - Britney Spears (Karate Kid Bootleg)</h3>
<p slot="description">A massive DnB roller bootleg of a Britney Spears classic: <em>Toxic</em>.</p>
</audio-player>
```