Javascript HTML - Widget

Entwickler
1

Hallo, wenn ich eine Aufklappliste zum Hamburger-Menü hinzufügen möchte, mit Untermenüs, die ich entweder beim Klicken oder beim Überfahren mit der Maus sehe, sollte ich es so machen oder gibt es etwas Effizienteres?

Ich kann einzelne Elemente über eine Komponente zum Hamburger-Menü hinzufügen, aber ich muss dort Unterelemente bereitstellen, die beim Überfahren angezeigt werden.

Können Sie mir raten? Danke

<script type="text/discourse-plugin" version="0.1">
  api.decorateWidget('menu-links:before', helper => {
    return helper.h("li", [
    helper.h("a.google", {
        href:"https://google.com",
        title: "Google",
        }, helper.h('p', 'Google')),
    ]);
  });
</script>

EDIT: GELÖST

Aber noch eine Sache, wie füge ich target blank hinzu?

2

Ein Widget zurückgeben:

Sie könnten Ihr eigenes benutzerdefiniertes Widget an api.decorateWidget zurückgeben, was Ihnen viel mehr Kontrolle in Bezug auf das Anwenden von Attributen, Status, Aktionen usw. gibt.

Sie könnten also Folgendes tun:

api.decorateWidget('menu-links:before', helper => {
   return helper.widget.attach("custom-menu-links");
});

Erstellen Sie dann innerhalb von javascripts/discourse/widgets/custom-menu-links.js ein Widget mit dem createWidget-Helfer:

import { createWidget } from 'discourse/widgets/widget';

createWidget('custom-menu-links', {
...
});

Schauen Sie sich dieses Thema an, um einige der Funktionen von Widgets kennenzulernen:

Ich habe Widgets in meiner Dropdown-Header-Theme-Komponente ziemlich oft verwendet. Möglicherweise finden Sie einige des Codes hilfreich.

Hinzufügen von target=“_blank”

Sie fügen es dem attributes-Objekt hinzu:

      return helper.h('a.google',
        {
          attributes: {
            href: "https://google.com",
            target: "_blank",
            title: "Google"
          },
        }
        ...
      );