Làm thế nào để tùy chỉnh thanh tiêu đề cửa sổ của một ứng dụng Electron?

Question

Tôi bắt đầu làm việc với Electron để tạo ứng dụng dành cho máy tính để bàn. Làm cách nào để tùy chỉnh thanh tiêu đề cửa sổ (có chứa các nút đóng, thu nhỏ và toàn màn hình) để thêm chế độ xem tùy chỉnh? Safari là một ví dụ mà tôi đang nghĩ đến việc:

Answer 1

lựa chọn duy nhất của bạn trong điện tử sẽ được tạo ra một cửa sổ không biên giới, và sau đó tạo ra một "giả mạo" thanh tiêu đề với CSS, bao gồm bất kỳ yếu tố giao diện người dùng bạn cần .

Electron/webkit cung cấp các thuộc tính CSS cho phép bạn thực hiện bất kỳ yếu tố có thể kéo, giống như một thanh tiêu đề:

.titlebar { 
    -webkit-user-select: none; 
    -webkit-app-region: drag; 
} 

Answer 2

Các tùy chọn đầu tiên, và cross-platform là tạo ra một frameless window. Thứ hai là macOS chỉ, và cho phép bạn ẩn thanh tiêu đề, nhưng giữ lại các điều khiển cửa sổ, cho phép bổ sung các nút tùy chỉnh. Ví dụ:

const { BrowserWindow } = require('electron') 

// This will create a window without titlebar, allowing for customization 
let win = new BrowserWindow({ titleBarStyle: 'hidden' }) 
win.show() 

Sau đó, bạn có thể sử dụng các thuộc tính css -webkit-user-select và -webkit-app-region để xác định vùng kéo.