جافاسكريبت HTML - عنصر واجهة

مطور
1

مرحباً، إذا أردت إضافة قائمة غير مرتبة (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؟

إعجابَين (2)
2

إرجاع عنصر واجهة مستخدم:

ما يمكنك فعله هو إرجاع عنصر واجهة مستخدم مخصص خاص بك إلى api.decorateWidget، مما يمنحك المزيد من التحكم فيما يتعلق بتطبيق السمات والحالة والإجراءات وما إلى ذلك.

لذلك يمكنك القيام بما يلي:

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

ثم داخل javascripts/discourse/widgets/custom-menu-links.js، قم بإنشاء عنصر واجهة مستخدم باستخدام مساعد إنشاء عنصر واجهة المستخدم:

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

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

ألقِ نظرة على هذا الموضوع لمعرفة بعض ميزات عناصر واجهة المستخدم:

لقد استخدمت عناصر واجهة المستخدم كثيرًا في مكون سمة رأس القائمة المنسدلة الخاص بي، وقد تجد بعض الكود مفيدًا.

إضافة target=“_blank”

تقوم بإضافته إلى كائن السمات:

      return helper.h('a.google',
        {
          attributes: {
            href: "https://google.com",
            target: "_blank",
            title: "Google"
          },
        }
        ...
      );
إعجابَين (2)