@base.cat/web-components v1.1.0

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

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

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

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