Zsolt-podium-publish NPM

This repository contains a card WebComponent used for learning purposes. Usage:

<html>
  <head>
    <meta charset="utf-8" />
    <title>&lt;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: Result

@infinitebrahmanuniverse/nolb-zs @everything-registry/sub-chunk-3241

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago