zsolt-podium-publish
v1.0.2
Published
card WebComponent demo
Downloads
3
Readme
This repository contains a card WebComponent used for learning purposes. Usage:
<html>
<head>
<meta charset="utf-8" />
<title><zsolt-podium> Demo</title>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../node_modules/lit/polyfill-support.js"></script>
<script type="module" src="../node_modules/zsolt-podium-publish/zsolt-podium.js"></script>
<style>
h1 {
text-decoration: underline;
}
.container{
display: flex;
flex-direction: row;
}
zsolt-podium {
margin: 10px;
}
/* only for html slot */
ul.podium-list {
list-style-type: none;
padding: 0;
margin: 0;
}
/* only for html slot */
.podium-list li {
padding: 14px;
background-color: white;
font-weight: bold;
border-top: solid;
border-width: 1px;
border-color: #e0e0e0;
color: #7cdfd3;
}
</style>
</head>
<body>
<h1>Házi feladat</h1>
<h2>Zentai Zsolt</h2>
<h3>Input: string array</h3>
<div class="container">
<zsolt-podium title="Dobogó" podiumlist=["Verstappen","Hamilton","Bottas"] >
</zsolt-podium>
</div>
<h3>Input: html (slot)</h3>
<div class="container">
<zsolt-podium title="Dobogó">
<ul class="podium-list">
<li style="color: #0020f5;">Verstappen</li>
<li>Hamilton</li>
<li>Bottas</li>
</ul>
</zsolt-podium>
</div>
</body>
</html>
Result: