Javascript HTML - widget

Ciao, se voglio aggiungere un elenco puntato al menu hamburger con dai sottomenu che vedo al clic o al passaggio del mouse, dovrei farlo in questo modo o c’è qualcosa di più efficiente?

Posso aggiungere singoli elementi al menu hamburger tramite un componente, ma devo fornire elementi secondari lì che verranno visualizzati al passaggio del mouse

Puoi consigliarmi? Grazie

<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>

MODIFICA: RISOLTO

Ma ancora una cosa, come aggiungo target blank?

2 Mi Piace

Restituisci un widget:

Quello che potresti fare è restituire il tuo widget personalizzato a api.decorateWidget, che ti darà molto più controllo in termini di applicazione di attributi, stato, azioni, ecc.

Quindi potresti fare:

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

Quindi all’interno di javascripts/discourse/widgets/custom-menu-links.js, crea un widget usando l’helper createWidget:

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

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

Dai un’occhiata a questo argomento per conoscere alcune delle funzionalità dei Widget:

Ho usato i widget parecchio nel mio componente tema dropdown header, potresti trovare alcuni del codice utile.

Aggiungere target=“_blank”

Lo aggiungi all’oggetto attributi:

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