nijepa / vue3-web-component-cards

custom-cards

Vite, Vue3 web-component custom-cards

(standalone web component made with Vue3 & Vite)

---

Usage

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>

Reference component:

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)>

example:

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)

example:

const ts = { decoration: false, 
            colorized: false, 
            color: "#ffffff", 
            font: "'Open Sans', sans-serif" }
document.querySelector('custom-cards').setAttribute('cards-style', JSON.stringify(ts))

---

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build