By Bellić Media

FluidGlass

FluidGlass ist eine kleine Web-Component-Library für Glasoberflächen, die Licht, Bewegung und Inhalte unter der UI sichtbar lässt. Ein Script reicht aus, danach verwendest du Buttons, Navigation, Karten, Menüs und Hinweise direkt als HTML-Tags.

FluidGlass v3.7.1

Impressum

Modulkarte Eigener Inhalt bleibt normales HTML, die Komponente liefert nur Glasoptik und Bewegung.

Einbindung

<script src="https://library.bellic-media.de/fluidglass/FluidGlass.js" defer></script>

<lg-button text="Speichern"></lg-button>

<lg-glass width="320" height="160" radius="28" padding="24" drag>
  <h3>Eigener Inhalt</h3>
  <p>Alles darin bleibt normales HTML.</p>
</lg-glass>

Komponenten

lg-button für Buttons
lg-glass für Glass-Container
lg-toggle für Schalter
lg-nav und lg-nav-item für Navigation
lg-menu und lg-menu-item für Morph-Menüs
lg-banner und lg-toast für Hinweise

Events

document.querySelector('lg-nav')
  .addEventListener('change', event => {
    console.log(event.detail.value);
  });

document.querySelector('lg-toast').show();