Продолжу исследование Electron API и следующей темой для изучения будут диалоговые окна. Electron позволяет задействовать для общения с пользователем системные диалоговые окна и их внешний вид зависит от того в какой операционной система установлено приложение. Приведу несколько вариантов диалоговых окно оформленных в виде функций и предназначенных для решения различных задач.
Пример диалогового окна для открытия файла –
1 2 3 4 5 6 7 8 9 10 11 12 13 | function showDialog() { dialog.showOpenDialog({ defaultPath: './images', // Путь по умолчанию buttonLabel: 'Select Logo', // Название кнопки в диалоге properties: [ 'openFile', // Указываем тип диалога 'multiSelections', // Указываем возможность выбрать несколько файлов 'createDirectory' // Добавляем кнопку создать новую папку в MacOS ] }, (openPath) => { console.log(openPath) // Получим массив с путями к файлам }) } |
Пример диалогового окна для сохранения файла –
1 2 3 4 5 6 7 | function saveDialog() { dialog.showSaveDialog({ defaultPath: './images', // Путь по умолчанию }, (filename) => { console.log(filename) // Получим путь с именем файла }) } |
Пример диалогового окна для показа сообщения с вопросами к пользователю –
1 2 3 4 5 6 7 8 9 10 11 | function messageDialog() { let buttons = ['Yes', 'No', 'Maybe']; dialog.showMessageBox({ buttons: buttons, title: 'Electron Message Dialog', message: 'Please select an answer', detail: 'A more descriptive message with some details', }, (buttonIndex) => { console.log('User selected: ' + buttons[buttonIndex]) // Получим ответ из диалога }) } |
Пример диалогового окна для сообщения о ошибке –
1 2 3 4 5 6 | function messageErrorDialog() { dialog.showErrorBox( 'Electron Error Message', 'Error Message' ) } |
Методов и параметров значительно больше чем рассмотрено здесь, для поиска необходимого решения лучше всего обратиться к документации – dialog
Здесь можно более детально рассмотреть проект на GitHub с установленными настройкам и дополнениями – https://github.com/NetWorkRoom/electron-start/tree/dialog.