분할 버튼(Split Buttons)으로서의 메뉴(Menu)

__Split Buttons__를 통해 사용자가 기본 버튼을 클릭하여 값을 선택하거나, 드롭다운 목록에 표시된 상호 배타적인 값 목록에서 선택할 수 있습니다.

Wijmo 메뉴 컨트롤을 분할 버튼으로 사용하려면 isButton 속성을 true로 설정하면 됩니다. 이를 통해, 메뉴 헤더를 클릭하면 드롭다운 목록이 표시되지 않고 itemClicked 이벤트가 발생합니다.

예시: Menu 컨트롤이 SplitButton으로 구현되었습니다:

HTML

  <div id="theSplitButton"></div>

Javascript

import * as input from '@grapecity/wijmo.input';

function init() {
    // create the split-button menu
    var theSplitButton = new input.Menu('#theSplitButton', {
        // item clicked fires when you select an option or click the header
        isButton: true,
        itemClicked: (sender) => {
            alert('Running ' + sender.selectedValue);
        },
        
        // update header to show current selection
        selectedIndexChanged: (sender) => {
            if (sender.selectedIndex > -1) {
                sender.header = `Run: <b>${sender.selectedItem.header}</b>`;
            }
        },
        
        // populate menu after hooking up the selectedIndexChanged event
        displayMemberPath: 'header',
        selectedValuePath: 'value',
        itemsSource: [
            { header: 'Internet Explorer', value: 'IE' },
            { header: 'Chrome', value: 'CHR' },
            { header: 'Firefox', value: 'FFX' },
            { header: 'Safari', value: 'IOS' },
            { header: 'Opera', value: 'OPR' }
        ],
        selectedValue: 'FFX'
    });
}