MenuButton

/scss/components/menubutton.scss

v.0.1.0 javascript

기본 사용

menu1
menu2

<div class="gn-menuButton">
  <button type="button">
    <span class="gn-icon is-small menuButton-icon">
      <i class="fas fa-caret-down"></i>
    </span>
    <span class="menuButton-text">메뉴버튼</span>
  </button>
  <div class="menuButton-menus">
    <ul>
      <li class="menuButton-menu">
        <span class="menuButton-menu-content">
          <span class="menuButton-menu-text">menu1</span>
        </span>
      </li>
      <li class="menuButton-menu">
        <span class="menuButton-menu-content">
          <span class="menuButton-menu-text">menu2</span>
        </span>
      </li>
    </ul>
  </div>
</div>

생성 옵션

  <button class="new-button"></button>
  <button class="new-menubutton-cols"></button>
  <button class="new-button2"></button>
  <button class="new-button-submenu">편집 메뉴</button>

  Gn.create('menubutton', {
    target: '.new-button', 
    size: 'normal',
    textSets:{
      buttonText: '메뉴버튼'
    },
    onSelect: function(menu){
      console.log('선택된 메뉴는 ' + menu );
    },
    data: [[{
      text: 'menu1',
      value: 'menu1'
    },{
      text: 'menu2',
      value: 'menu2'
    }],[{
      text: '환경설정',
      html: '<span class="gn-icon is-small"><i class="fas fa-cogs"></i>설정</span>',
      value: 'menu1'
    },{
      text: 'Exit',
      value: 'exit'
    }]]
  });
  // 다중 컬럼 모드 생성 옵션
  Gn.create('menubutton', {
    target: '.new-menubutton-cols',
    size: 'normal',
    textSets: {
      buttonText: '다중 컬럼 메뉴'
    },
    onSelect: function (menu) {
      console.log('선택된 메뉴는 ' + menu);
    },
    data: [
      {
        value: 'menu1',
        cols: ['item1', '1', '상세정보1']
      },
      {
        value: 'menu2',
        cols: ['item2', '2', '상세정보2']
      },
      {
        value: 'menu3',
        cols: ['item3', '3', '상세정보3']
      }
    ]
  });
  Gn.create('menubutton', {
    target: '.new-button2', 
    style: 'simple',
    icon: 'list',
    data: [{
      text: 'menu1',
      value: 'menu1'
    },{
      text: 'menu2',
      value: 'menu2'
    }]
  });
  // 서브메뉴 예시
  Gn.create('menubutton', {
    target: '.new-button-submenu',
    size: 'normal',
    textSets: {
      buttonText: '편집 메뉴'
    },
    onSelect: function (value, text, menu, e) {
      console.log('선택된 메뉴:', { value: value, text: text, menu: menu });
    },
    data: [
      {
        text: '파일',
        value: 'file',
        child: [
          { text: '새 파일', value: 'file-new' },
          { text: '열기', value: 'file-open' },
          {
            text: '최근 파일',
            value: 'file-recent',
            child: [
              { text: 'document.txt', value: 'file-recent-1' },
              { text: 'image.png', value: 'file-recent-2' },
              { text: 'project.json', value: 'file-recent-3' }
            ]
          },
          { text: '저장', value: 'file-save' },
          { text: '다른 이름으로 저장', value: 'file-saveas' }
        ]
      },
      {
        text: '편집',
        value: 'edit',
        child: [
          { text: '실행 취소', value: 'edit-undo' },
          { text: '다시 실행', value: 'edit-redo', actived: true },
          { text: '복사', value: 'edit-copy' },
          { text: '붙여넣기', value: 'edit-paste' }
        ]
      },
      {
        text: '보기',
        value: 'view',
        child: [
          {
            text: '확대/축소',
            value: 'view-zoom',
            disabled: true,
            child: [
              { text: '확대', value: 'view-zoom-in' },
              { text: '축소', value: 'view-zoom-out' },
              { text: '원본 크기', value: 'view-zoom-reset' }
            ]
          },
          { text: '전체 화면', value: 'view-fullscreen' }
        ]
      },
      {
        text: '도움말',
        value: 'help'
      }
    ]
  });

데이터 모델 (MenuButtonItem)

필드	type	필수	description
value	string	Y	메뉴 값 (고유 값)
text	string	N	단일 컬럼 표시 텍스트
cols	string[]	N	다중 컬럼 표시 값 배열
html	string	N	HTML로 렌더링할 내용 (html이 있는 경우 text/cols 대신 사용, text가 있는 항목만 선택 가능)
child	MenuButtonItem[]	N	하위 메뉴 배열 (최대 2단계)
disabled	boolean	N	비활성화 여부
actived	boolean	N	활성화 상태 표시 여부

name		type	default	description
target		string		버튼을 생성할 대상의 선택자(selector)
textSets	buttonText	string		버튼에 표기할 문구
size		string		'small','normal','medium','large'
style		string		'simple','borderless'
align		string	'left'	'center','left','right'
width		string	auto	'200px'
icon		string		font awesome solid icon name
data		MenuButtonItem[]		메뉴 목록에 출력할 데이터 배열 - MenuButtonItem 참조 참고: 표시 우선순위는 html > cols > text 입니다. html 항목은 text가 있는 경우만 선택 가능하며, html이 있으면 cols는 무시됩니다. html이 있으면 하위 메뉴는 렌더링되지 않습니다.
disabled		boolean	false	버튼 비활성화 여부
onSelect		function(value, text, menu, e)		메뉴 선택 시 수행될 이벤트 - value: 선택된 메뉴의 값 - text: 선택된 메뉴의 텍스트 - menu: 선택된 메뉴 객체 - e: MouseEvent 객체

메소드

name	return	description
buttonText(text: string)	void	버튼명을 변경한다.
reRender(data: Array)	void	메뉴 데이터를 전달받아 DOM을 다시 생성한다.
disabled()	void	버튼을 비활성화한다.
enabled()	void	버튼을 활성화한다.