szuperaziziThis repository contains a card WebComponent used for learning purposes.
Usage:
<html>
<head>
<meta charset="utf-8">
<title><zizi-card> Demo</title>
<script type="module" src="node_modules/zizi-card/zizi-card.js"></script>
<style>
h1 {
text-decoration: underline;
}
.container {
display: flex;
}
zizi-card {
width: 33%;
margin: 10px;
}
</style>
</head>
<body>
<h1>Learning WebComponents</h1>
<div class="container">
<zizi-card title="Egységbezárás">
<p>A web komponensek csak és kizárólag saját DOM fájuk felépítéséért és stílusozásáért felelnek, ezek viszont kívülről nem módosíthatók.</p>
</zizi-card>
<zizi-card title="Újrafelhasználhatóság">
<p>Az elkészített web komponenseket bármilyen más web alkalmazásban felhasználhatjuk, használt JavaScript könyvtártól, és keretrendszertől függetlenül</p>
</zizi-card>
<zizi-card title="Rugalmasság">
<p>A web komponensek tartalma property-ken és slot-okon keresztül kívülről könnyedén testreszabható.</p>
</zizi-card>
</div>
</body>
</html>Result:
