Перейти к основному содержанию

Touch Bar Support

· 3 мин. прочитано

Electron 1.6.3 бета-версия содержит первоначальную поддержку macOS Touch Bar.


The new Touch Bar API allows you to add buttons, labels, popovers, color pickers, sliders, and spacers. These elements can be dynamically updated and also emit events when they are interacted with.

This is the first release of this API so it will be evolving over the next few Electron releases. Please check out the release notes for further updates and open issues for any problems or missing functionality.

You can install this version via npm install electron@beta and learn more about it in the TouchBar and BrowserWindow Electron docs.

Big thanks to @MarshallOfSound for contributing this to Electron. 🎉

Touch Bar Example

Touch Bar Gif

Below is an example of creating a simple slot machine game in the touch bar. It demonstrates how to create a touch bar, style the items, associate it with a window, handle button click events, and update the labels dynamically.

const {app, BrowserWindow, TouchBar} = require('electron')

const {TouchBarButton, TouchBarLabel, TouchBarSpacer} = TouchBar

let spinning = false

// Reel labels
const reel1 = new TouchBarLabel()
const reel2 = new TouchBarLabel()
const reel3 = new TouchBarLabel()

// Спин result label
const result = new TouchBarLabel()

// Кнопка Spin
const spin = new TouchBarButton({
label: '🎰 Spin',
цвет фона: '#7851A9',
клик: () => {
// Игнорировать клики при уже вращении
if (spinning) {
return
}

spinning = true
результат. abel = ''

let timeout = 10
const spinLength = 4 * 1000 // 4 секунды
const startTime = Date. ow()

const spinReels = () => {
updateReels()

if ((Date. ow() - startTime) >= spinLength) {
finishSpin()
} else {
// Замедляем немного на каждом вращении
timeout *= 1. setTimeout(spinReels, timeout)
}
}

spinReels()
}
})

const getRandomValue = () => {
const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
возвращаемых значений[Math. loor(Math.random() * values.length)]
}

const updateReels = () => {
reel1. abel = getRandomValue()
reel2.label = getRandomValue()
reel3. abel = getRandomValue()
}

const finishSpin = () => {
const uniqueValues = new Set([reel1. abel, reel2.label, reel3.label]). ize
if (uniqueValues === 1) {
// Все 3 значения являются тем же
результатом. abel = '💰 Jackpot!'
result.textColor = '#FDFF00'
} else if (uniqueValues === 2) {
// 2 values are the same
result.label = '😍 Winner!'
extColor = '#FDFF00'
} else {
// Нет одинаковых значений
результата. abel = '🙁 Spin Again'
result. extColor = null
}
вращение = false
}

const touchbar = new TouchBar([
вращения,
новый TouchBarSpacer({size: 'large'}),
reel1,
новый TouchBarSpacer({size: 'small'}),
reel2,
новый TouchBarSpacer({size: 'small'}),
reel3,
нового TouchBarSpacer({size: 'large'}),
результат
])

пустое окно

. nce('ready', () => {
window = new BrowserWindow({
frame: false,
titleBarStyle: 'hidden-inset',
ширина: 200,
высота: 200,
цвет фона: '#000'
})
окно. oadURL('about:blank')
window.setTouchBar(touchBar)
})