Привет, если я хочу добавить список ul в меню-гамбургер с подменю, которые отображаются либо при клике, либо при наведении курсора, следует ли мне поступать так или есть что-то более эффективное?
Я могу добавлять отдельные элементы в меню-гамбургер через компонент, но мне нужно указать там подэлементы, которые будут отображаться при наведении.
Можете ли вы дать совет? Спасибо.
<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>
РЕДАКТИРОВАНИЕ: РЕШЕНО
Но ещё один вопрос: как добавить target blank?
keegan
(Keegan George)
29.Июнь.2022 16:32:11
2
Возврат виджета:
Вы можете вернуть свой собственный пользовательский виджет в api.decorateWidget, что даст вам гораздо больше контроля над применением атрибутов, состояний, действий и т. д.
Например:
api.decorateWidget('menu-links:before', helper => {
return helper.widget.attach("custom-menu-links");
});
Затем внутри javascripts/discourse/widgets/custom-menu-links.js создайте виджет с помощью вспомогательной функции createWidget:
import { createWidget } from 'discourse/widgets/widget';
createWidget('custom-menu-links', {
...
});
Ознакомьтесь с этой темой, чтобы узнать о некоторых возможностях виджетов:
This is out of date. See Widgets, the Widget API and their roadmap?
The latest builds of Discourse are much faster at rendering topics thanks to our re-written post stream . I’ve written up our new plugin API but so far haven’t explained how the code all fits together. The purpose of this topic is to allow Discourse developers to understand how the new code works.
What’s a Virtual DOM?
A Virtual DOM is a data structure that enables browsers to re-render dynamic content very quickly. The techniq…
Я довольно часто использовал виджеты в компоненте темы выпадающего заголовка, возможно, вам пригодится часть кода .
Добавление target=“_blank”
Добавьте его в объект атрибутов:
return helper.h('a.google',
{
attributes: {
href: "https://google.com",
target: "_blank",
title: "Google"
},
}
...
);