Standalone-Seiten

Erstellen Sie die Datei im Verzeichnis libs/default-components/src/lib/standalone-pages/ (zum Beispiel my-page.ts). Verwenden Sie das folgende Code-Grundgerüst:

import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('wui-my-page')
export class WuiMyPage extends LitElement {
  static override readonly styles = css`
    :host { display: block; }
    .page { padding: 0.5rem 0.75rem 1rem; max-width: 1440px; margin: 0 auto; }
  `;

  override render() {
    return html`
      <div class="page">
        <h1>My Page</h1>
        <p>Page content goes here.</p>
      </div>
    `;
  }
}

Custom Elements sollten ein Präfix haben, zum Beispiel wui- wie hier verwendet (wui-my-page). Das Build-System erkennt Standalone-Seiten in diesem Verzeichnis automatisch.

Fügen Sie einen Eintrag in apps/dashboard-wc/config/menuconfig.jsonc hinzu:

{
  "title": {
    "en_US.utf8": "My Page",
    "de_AT.utf8": "Meine Seite"
  },
  "icon": "rocket",
  "path": "/my-page",
  "module": "/data/dashboard-wc/pages/my-page.js",
  "routeId": "my-page",
  "component": "wui-my-page",
  "permission": ["connected"]
}

Das Feld permission steuert die Sichtbarkeit. Verwenden Sie connected für Seiten, die eine Authentifizierung erfordern. Um eine Seite ohne Authentifizierung zugänglich zu machen, entfernen Sie die Eigenschaft permission vollständig.

Führen Sie den Build-Befehl aus und navigieren Sie zur Seiten-URL, um die Seite zu überprüfen. Siehe Voraussetzungen und Installation für Build-Anweisungen.