작곡가 옵션처럼 나만의 드롭다운(popupMenu)을 추가하는 방법?

개발
1

테마 컴포넌트에 다음 코드를 추가했고, 컴포저에 새로운 popupMenu가 나타날 것으로 기대했습니다.

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
      id: "align_center_button",
      group: "crud",
      icon: "align-center",
      popupMenu: true
  });
});

여기서 options 기어가 추가되는 코드를 따라 하면 작동할 것 같았습니다.

        toolbar.addButton({
          id: "options",
          group: "extras",
          icon: "cog",
          title: "composer.options",
          sendAction: this.onExpandPopupMenuOptions.bind(this),
          popupMenu: true,
        });

image
image719×394 69.6 KB

crud 그룹으로 추가 버튼을 만들면 기본 옵션처럼 각자 자신의 드롭다운에 표시될 것이라 생각했습니다. 이것이 가능한가요? 나만의 popupMenu에 옵션을 설정하고 바인딩하는 방법에 대한 예시를 받을 수 있을까요?

2

현재 저희 자바스크립트 플러그인 API는 보조 드롭다운 메뉴를 쉽게 추가할 수 있도록 설정되어 있지 않습니다. 제가 생각할 수 있는 툴바 커스터마이징은 모두 기존 드롭다운에 옵션을 추가하는 방식이었습니다.

무언가가 렌더링되려면 group을 "extras"로 변경해야 합니다. 그룹은 하드코딩되어 있으며, 컴포저 버튼의 다양한 섹션과 관련이 있습니다.

또한 주의할 점은 선택한 icon을 테마 컴포넌트나 svg icon subset 사이트 설정을 통해 추가해야 한다는 것입니다.

그 외에는 상당히 미지의 영역에 발을 들여놓는 셈이므로, 죄송하지만 확신하기 어렵습니다.

4

아, 그렇군요. 그룹 섹션에 대해서는 많이 이해가 됩니다.

그룹을 extras로 다시 변경했는데, 이제 표시는 되지만 기존 옵션 cog 드롭다운과 동일한 메뉴에 표시됩니다.

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
      id: "align_center_button",
      group: "extras",
      icon: "align-center",
      popupMenu: true
  });
});

이것을 플러그인 API에 추가할 수 있는 기능으로 제안해도 될까요? 기존 옵션 드롭다운과 독립적으로 자체 드롭다운에 사용자 지정 항목을 추가할 수 있는 기능 말입니다. 추가하고 싶은 옵션들이 많아지면서 컴포저가 조금 혼잡해지고 있어, 이런 기능이 유용할 것 같습니다 :slight_smile:

5

유용할 수 있다는 점을 충분히 이해합니다! Contribute > Feature 토픽을 열었군요. 정말 적절한 선택입니다. 이를 통해 관심도를 파악하고, 언젠가 미래에 해당 기능이 실제로 도입될 수 있도록 노력하겠습니다.

6

@tshenry 감사합니다. 확인해 주셔서 감사합니다!