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

$3

!mostra 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:

``html

`

Afegir l'element a la pàgina:

`html

`

$3

Té dos aspectes diferents:

| Tipus: solid | Tipus: outline |
| ------------------------------------------ | ---------------------------------------------- |
| !buto-solid | !buto-outline |

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

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

#### Utilització:

Inserir la dependència:

`html

`

Afegir l'element a la pàgina:

`html
Pica aquí
`

$3

| Inicial | Comptatge |
| ------------------------------------------ | ---------------------------------------------- |
| !comptador-inicial | !comptador-incrementat |

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

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

#### Utilització:

Inserir la dependència:

`html

`

Afegir l'element a la pàgina:

`html

`

$3

!rellotge

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

No disposa d'atributs per a personalitzar.

#### Utilització:

Inserir la dependència:

`html

`

Afegir l'element a la pàgina:

`html

``