6.3. ツールバーの追加項目を実装する¶

export class MyZipCodeFieldLayouter implements IUIElementLayouterExpandCaller {

    public isSupported(element: IUIElement): boolean {
        return element.instance.elementTypeName === MyZipCodeField.name;
    }

    public initialize(element: IUIElement, container: IUIContainer): void {
        const eventListener = container.eventListener;

        // 操作メニュー・ツールバーが表示されたとき
        eventListener.addEventListener(element, 'designer-toolbar-show', () => {
            // メニューに表示する内容を返却する
            return {
                items: {
                    // 「部品操作」グループ
                    operations: [{
                        id: 'placeholder',
                        icon: placeholder
                            ? [{type: 'font-awesome', value: 'fas fa-check'}]
                            : [{type: 'font-awesome', value: 'fas im-empty'}],
                        label: 'プレースホルダを表示',
                        // ツールバーに表示する内容を追加で返却する
                        toolbar: {
                            // プレースホルダが有効な場合、背景色をアクティブ色（灰色）に指定する
                            active: placeholder,
                            // ツールバー上のアイコンを指定する
                            icon: [{type: 'font-awesome', value: 'fas fa-comment-dots'}],
                            // ツールバー上のラベルに表示する文字列を指定する
                            label: 'プレースホルダ'
                        }
                    }]
                }
            };
        });
    }

}