Javascript HTML - widget

Dev
1

Olá, se eu quiser adicionar uma lista ul ao menu hambúrguer com os submenus que vejo ao clicar ou ao passar o mouse, devo fazer desta forma ou existe algo mais eficiente?

Posso adicionar itens individuais ao menu hambúrguer através de um componente, mas preciso fornecer subitens lá que serão exibidos ao passar o mouse.

Você pode me aconselhar? Obrigado.

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

Mas mais uma coisa, como adiciono target="_blank"?

2 curtidas
2

Retornar um widget:

O que você poderia fazer é retornar seu próprio widget personalizado para api.decorateWidget, o que lhe dará muito mais controle em termos de aplicação de atributos, estado, ações, etc.

Então você poderia fazer:

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

Em seguida, dentro de javascripts/discourse/widgets/custom-menu-links.js, crie um widget usando o helper createWidget:

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

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

Dê uma olhada neste tópico para aprender alguns dos recursos dos Widgets:

Usei widgets bastante no meu componente de tema de cabeçalho suspenso, você pode achar algum do código útil.

Adicionando target=“_blank”

Você o adiciona ao objeto de atributos:

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