index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="importmap">
      {
        "imports": {
          "@materializecss/materialize/": "/"
        }
      }
    </script>
    <!-- CSS -->
    <link
      type="text/css"
      rel="stylesheet"
      href="/dist/css/materialize.min.css"
      media="screen,projection"
    />
    <link type="text/css" rel="stylesheet" href="/src/textfield/formfields.css" />
    <link type="text/css" rel="stylesheet" href="/src/appbar/appbar.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <style>
      body {
        background-image: radial-gradient(#8882 1px, transparent 0);
        background-size: 12px 12px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 style="font-size: 1.5rem">Examples</h1>
      <p>
        For quick testing purposes. The files are used from dist directory. Generate server side
        html or render on client. Be in control and decide.
      </p>
      <a href="./examples/html/blog.html" class="btn-small tonal">👉 Visit Blog</a>

      <div class="mt-3" style="border: 1px dashed #888">
        <div class="appbar">Appbar</div>
        <h6>Textfields</h6>
        <div class="row g-1 p-3 form-wrapper">
          <!-- Animated -->
          <fieldset class="form-field animated s12 m4">
            <legend>Given Name</legend>
            <input type="text" id="my-input-1" placeholder="Given Name" />
            <label for="my-input-1">Given Name</label>
          </fieldset>

          <!-- Preset -->
          <fieldset class="form-field animated s12 m4">
            <legend>Middle Name</legend>
            <input type="text" id="in-middlename" placeholder="Middle Name" value="John" />
            <label for="in-middlename">Middle Name</label>
          </fieldset>

          <!-- Disabled-->
          <fieldset class="form-field s12 m4" disabled>
            <legend>Family Name</legend>
            <input type="text" id="my-input-2" placeholder="e.g. Doe" />
            <label for="my-input-2">Family Name</label>
          </fieldset>

          <!-- different placeholder than label + required -->
          <fieldset class="form-field s12 m4">
            <legend>Birthmonth</legend>
            <input type="text" id="my-input-3" placeholder="e.g. April" required />
            <label for="my-input-3">Birthmonth</label>
          </fieldset>

          <!-- select -->
          <fieldset class="form-field animated s12 m4">
            <legend>Gender</legend>
            <select id="my-input-gender">
              <option>Male</option>
              <option>Female</option>
            </select>
            <label for="my-input-gender">Gender</label>
          </fieldset>

          <!-- Compound Input -->
          <fieldset class="form-field animated s12 m4">
            <legend>Height</legend>
            <input
              type="number"
              id="my-input-size"
              placeholder=" "
              required
              style="text-align: right"
            />
            <label for="my-input-size">Height</label>
            <select id="my-input-unit">
              <option>m</option>
              <option>dm</option>
              <option selected>cm</option>
            </select>
            <label for="my-input-unit">Unit</label>
          </fieldset>

          <!-- Comound with prefix -->
          <fieldset class="form-field animated s12 m4">
            <legend>Budget</legend>
            <div class="prefix">EUR</div>
            <input type="text" id="my-input-budget" placeholder=" " required />
            <label for="my-input-budget">Budget</label>
          </fieldset>

          <!-- Date -->
          <fieldset class="form-field animated s12 m4">
            <legend>Birthday</legend>
            <input type="date" id="my-input-birthday" placeholder=" " />
            <label for="my-input-birthday">Birthday</label>
          </fieldset>
        </div>

        <!-- Checkboxes -->
        <div class="p-3">
          <p>
            <label>
              <input type="checkbox" checked="checked" />
              <span>Checked</span>
            </label>
          </p>
          <p>
            <label>
              <input type="checkbox" class="filled-in" />
              <span>Filled in unchecked</span>
            </label>
          </p>
        </div>

        <div class="my-5 p-3" style="border: 1px solid red">
          <ul class="tabs">
            <li class="tab"><a href="#test1">Test 1</a></li>
            <li class="tab"><a class="active" href="#test2">Test 2</a></li>
            <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
            <li class="tab"><a href="#test4">Test 4</a></li>
          </ul>
          <div id="test1" class="col s12">Test 1</div>
          <div id="test2" class="col s12">Test 2</div>
          <div id="test3" class="col s12">Test 3</div>
          <div id="test4" class="col s12">Test 4</div>
        </div>

        <div class="app mt-5"></div>
      </div>
    </div>

    <!-- JS -->
    <script type="text/javascript" src="/dist/js/materialize.min.js"></script>
    <script type="module">
      import { TextField } from '@materializecss/materialize/src/textfield/textfield.mjs';
      import { AppBar } from '@materializecss/materialize/src/appbar/appbar.mjs';

      const appBar = new AppBar().setTitle('My App');
      document.querySelector('.appbar').innerHTML = appBar.toHTML();

      // create input field
      //const givenName = new TextField().setLabel('Given Name').addClassname('s12');
      //document.querySelector('.form-wrapper').innerHTML = givenName.toHTML();

      //------------------------------------- Example (Nested components to widget)

      import { createCounterApp, hydrate } from './examples/counter-app.iso.js';

      const app = createCounterApp();
      const appHtml = app.toHTML();
      const template = document.createElement('template');
      template.innerHTML = appHtml;
      const appElem = template.content.firstElementChild;
      document.querySelector('.app').replaceChildren(appElem);
      hydrate(appElem);
    </script>
    <script>
      //M.AutoInit();
    </script>
  </body>
</html>