audio player title and description changed to slot

This commit is contained in:
2024-01-20 14:42:08 -06:00
parent abe4a52de4
commit 1675646179
2 changed files with 28 additions and 8 deletions

View File

@ -9,13 +9,35 @@
<h1>Nathan's Web Components</h1>
<p>A bunch of web components for my own convenience.</p>
<h2>Audio Player</h2>
A handy audio player widget. Title is an H3.
<p>A handy audio player widget.<br><br>Attributes:</p>
<ul>
<li>audio: a URI pointing to an audio file</li>
<li>cover: a URI pointing to a cover image</li>
<li>cover_alt: alt text for the cover image</li>
</ul>
<p>Slots:</p>
<ul>
<li>title: title for the audio file</li>
<li>description: a description of the audio file</li>
</ul>
<p>Example usage:</p>
<pre>
<code>
&lt;audio-player
cover=&quot;/assets/images/doge.jpg&quot;
cover_alt=&quot;A snoozy doge!&quot;
audio=&quot;assets/audio/KARATE KID - TOXIC (ILLFD022).wav&quot;&gt;
&lt;h3 slot=&quot;title&quot;&gt;Toxic - Britney Spears (Karate Kid Bootleg)&lt;/h3&gt;
&lt;p slot=&quot;description&quot;&gt;A massive DnB roller bootleg of a Britney Spears classic: &lt;em&gt;Toxic&lt;/em&gt;.&lt;/p&gt;
&lt;/audio-player&gt;
</pre>
<audio-player
title="Toxic - Britney Spears (Karate Kid Bootleg)"
description="A massive DnB roller bootleg of a Britney Spears classic: <em>Toxic</em>."
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>
</main>
</body>
</html>