LitElement meets KoliBri

[deleonio]

Hallo.

Wir benutzen kein Framework, sondern LitElement als Basis von Webkomponenten. Leider ist die Dokumentation für die Verwendung von KoliBri ohne Framework nicht sehr hilfreich. Wie muss ich die Komponenten importieren, damit ich sie verwenden kann?

import {html, LitElement, TemplateResult} from "lit";
import {customElement} from "lit/decorators.js";

@customElement('my-element')
export class MyElement extends LitElement {

    constructor() {
        super();
    }

    protected override render(): TemplateResult {
        return html`
            Test
            <kol-nav 
                    _label="Navigation"
                    _links="[
                        {
                            _href: 'startseite',
                            _icons: 'codicon codicon-home',
                            _label: 'Startseite',
                            _children: [
                                { _href: 'startseite/1-untermenuepunkt', _icons: 'codicon codicon-home', _label: '1. Untermenüpunkt' },
                                { _href: 'startseite/2-untermenuepunkt', _icons: 'codicon codicon-home', _label: '2. Untermenüpunkt' },
                            ],
                        },
                        { _href: 'unterseite', _icons: 'codicon codicon-home', _label: '2. Menüpunkt' },
                    ]"
            ></kol-nav>
        `;
    }
}

Dies wäre der Beispielcode dazu. Ich habe via NPM die Pakete „components“ sowie „themes“ eingebunden. Dort finde ich leider auch nicht den passenden Import zu kol-nav. Was habe ich vergessen oder falsch gemacht?

[deleonio]

Hinweis: Das Styling der Nav-Komponent im DEFAULT-Theme wird grundsätzlich überarbeitet und in einem der nächsten Releases bereitgestellt. Aktuell greift vor allem das Basis-Styling für die Ausrichtung.

Tiny Sample: https://stackblitz.com/edit/lit-element-99qjwi?file=package.json,src%2Findex.js,index.html

[Imnir]

Hallo zusammen,
ich habe tatsächlich die Lösung dank der Dev-Unterstützung von KoliBri gefunden. Die wies mich darauf hin, dass es ein Fehler im Json gibt. Tatsächlich hatte ich das Json von der Doku-Seite kopiert und mir deshalb keine Gedanken gemacht, dass da etwas falsch sein könnte. Deshalb hatte ich angenommen, dass man ähnlich wie bei anderen Webkomponenten Bibliotheken noch einen Import innerhalb der Datei braucht (import {kol-nav} from @public-ui/components). Tatsächlich wurde die Komponente aber die ganze Zeit gefunden, nur fehlen in dem Beispiel-Json Anführungszeichen.
Statt: _href: 'startseite',
Muss: ' _href': 'startseite',
Ich bin dann in die Browser Entwicklertools und habe mir den Code der Beispielhaft ausgeführt ist dort nochmal angeschaut. Das scheint ein copy and paste Fehler in der Doku gewesen zu sein.
Ansonsten funktioniert es wie in der Doku beschrieben für statische Webseiten.
In der Index.html habe ich folgendes ergänzt:

<script type="module"> import { register } from 'https://unpkg.com/@public-ui/components/dist/esm/index.js'; import { defineCustomElements } from 'https://unpkg.com/@public-ui/components/dist/loader/index.js'; import { ITZBund } from 'https://unpkg.com/@public-ui/themes/dist/index.mjs'; register(ITZBund, defineCustomElements).catch(console.warn); </script>

Und dann lassen sich die Komponenten in der üblichen Schreibweise (kol-nav) verwenden.