Demostració de web-components amb svelte i typescript (amb vite)

Descripció

S'han creat tres components de mostra:

• Card: mostra un quadrat amb un títol, una descripció, una imatge i un text per a un botó
• Button: Botó amb un estil determinat
• Counter: Un botó que manté un comptador de vegades que s'ha picat
• Clock: Un quadradet que mostra la hora amb els canvis cada segon

Aquests components són svelte. Però s'han adaptat per tal que siguin Web-Components.

Es genera un paquet npm amb els components per tal que pugui ser utilitzat per qualsevol aplicació web (és universal).

Components

Card

Nom de l'element web-component és: base-card

| Atributs | Valor | | ---------- | ----------------------- | | card_img | Imatge de capçalera (1) | | card_title | Títol de la targeta (2) | | card_desc | Text descriptiu (3) | | card_btn | Text del botó (4) |

Utilització:

Inserir la dependència:

<script type="module" src="/base-Card_es.js"></script>

Afegir l'element a la pàgina:

<base-card card_title="Una història de castells" card_desc="Fi per què fonc instituït e ordenat 
            E per tant. Escrit les gestes e històries antigues. 
            La humana natura donat-los diverses inclinacions de. 
            De Varoic proposà d'anar al Sant Sepuclre e manifestà 
            a." card_img="/AUP-castells.png" card_btn="Pica Alternatiu" />

Button

Té dos aspectes diferents:

| Tipus: solid | Tipus: outline | | ------------------------------------------ | ---------------------------------------------- | | | |

Nom de l'element web-component és: base-boto

| Atributs | Valor | | -------- | --------------- | | type | solid o outline |

Utilització:

Inserir la dependència:

<script type="module" src="/base-Button_es.js"></script>

Afegir l'element a la pàgina:

 <base-boto type="solid">Pica aquí</base-boto>

Counter

| Inicial | Comptatge | | ------------------------------------------ | ---------------------------------------------- | | | |

Nom de l'element web-component és: base-comptador

| Atributs | Valor | | -------- | -------------------------- | | inicial | numèric, per defecte és 0. |

Utilització:

Inserir la dependència:

<script type="module" src="/base-Counter_es.js"></script>

Afegir l'element a la pàgina:

 <base-comptador inicial="10"/>

Clock

Nom de l'element web-component és: base-rellotge

No disposa d'atributs per a personalitzar.

Utilització:

Inserir la dependència:

<script type="module" src="/base-Clock_es.js"></script>

Afegir l'element a la pàgina:

<base-rellotge/>