Javascript HTML - widget

Desarrollador
1

Hola, si quiero agregar una lista ul al menú de hamburguesa con submenús que veo al hacer clic o al pasar el mouse, ¿debería hacerlo de esta manera o hay algo más eficiente?

Puedo agregar elementos individuales al menú de hamburguesa a través de un componente, pero necesito proporcionar elementos secundarios allí que se mostrarán al pasar el mouse.

¿Me puedes aconsejar? Gracias

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

EDITAR: RESUELTO

Pero una cosa más, ¿cómo agrego target="_blank"?

2 Me gusta
2

Devolver un widget:

Lo que podrías hacer es devolver tu propio widget personalizado a api.decorateWidget, lo que te dará mucho más control en términos de aplicación de atributos, estado, acciones, etc.

Entonces podrías hacer:

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

Luego, dentro de javascripts/discourse/widgets/custom-menu-links.js, crea un widget usando el helper createWidget:

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

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

Echa un vistazo a este tema para aprender algunas de las características de los Widgets:

Utilicé widgets bastante en mi componente temático de encabezado desplegable, es posible que encuentres algo del código útil.

Añadir target=“_blank”

Lo añades al objeto de atributos:

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