@288-toolkit/html-elements v3.1.13
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>
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
7 months ago
7 months ago
8 months ago
8 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago