3.0.16 • Published 10 days ago
@288-toolkit/html-elements v3.0.16
Html-elements
npm i @288-toolkit/html-elements
A collection of convenient wrapper components around basic html elements.
HtmlAnchor.svelte
Renders a HTML link (anchor). External links will have noopener noreferrer
rel and _blank
target
attributes applied. The only required prop is href
.
Slot props
external
(boolean
): Wether the url is an external url.
HtmlImg.svelte
A wrapper around an html <img>
element.
- Automatically adds an empty alt attribute.
- Only outputs
src
if there is nosrcset
.
HtmlVideo.svelte
A wrapper around an html video element.
- Automatically adds
playsinline
ifautoplay
istrue
. - Automatically adds
disableremoteplayback
(can be removed by passingdisableremoteplayback={false}
) - Automatically manages
x-webkit-airplay
attribute.
HtmlTime.svelte
A wrapper component arund the html element.
Props
date
(Date
): The date to displayformatOptions
(FormatDateOptions
): The date formatting options (see format package)
Slot props
formattedDate
(string
): The formatted date
Examples
<Time
date={new Date('2023-04-17T21:34:50.360Z')}
formatOptions={{ day: 'numeric', month: 'long', year: 'numeric' }}
/>
<Time
date={new Date('2023-04-17T21:34:50.360Z')}
formatOptions={{ day: 'numeric', month: 'long' }}
let:formattedDate
>
<span class="text-[red]">
{formattedDate}
</span>
</Time>
3.0.12
10 days ago
3.0.13
10 days ago
3.0.16
10 days ago
3.0.14
10 days ago
3.0.15
10 days ago
3.0.11
17 days ago
3.0.10
24 days ago
3.0.8
25 days ago
3.0.9
25 days ago
3.0.4
25 days ago
3.0.3
25 days ago
3.0.7
25 days ago
3.0.6
25 days ago
3.0.5
25 days ago
3.0.2
26 days ago
3.0.1
26 days ago
3.0.0
26 days ago
2.0.1
26 days ago
2.0.0
26 days ago
1.0.1
27 days ago