Vite, Vue3 web-component custom-cards
(standalone web component made with Vue3 & Vite)
In HTML header:
<script type="module" crossorigin src="/cards.js"></script>
<link rel="modulepreload" href="/vue.js" />
Place component with or without attributes (named slot can be passed):
<custom-cards>
</custom-cards>
const cards = document.querySelector('custom-cards')
* Set component attribute cards-data
as JSON object
with following properties:
title
(String)
labels
(String - array of labels)
button
(String - button, link)>
const td = { title: 'some title',
labels: '['name', 'value']',
button: 'link' }
document.querySelector('custom-cards').setAttribute('cards-data', JSON.stringify(td))
* Styles can be set by setting attribute toast-style
with following properties:
decoration
(Boolean)
colorized
(Boolean)
color
(String - any color)
font
(String - any font-family)
const ts = { decoration: false,
colorized: false,
color: "#ffffff",
font: "'Open Sans', sans-serif" }
document.querySelector('custom-cards').setAttribute('cards-style', JSON.stringify(ts))
Compiles and hot-reloads for development
Compiles and minifies for production