Saltar al contenido principal

Touch Bar Support

· 3 lectura mínima

La versión beta de Electron 1.6.3 contiene soporte inicial para la 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

A continuación se muestra un ejemplo de la creación de un juego sencillo de tragaperras en la barra táctil. 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()

// Spin label
const result = new TouchBarLabel()

// Spin button
const spin = new TouchBarButton({
label: '🎰 Spin',
fondo Color: '#7851A9',
click: () => {
// Ignorar clics si ya está girando
if (girando) {
return
}

girando = true
resultados. abel = ''

let timeout = 10
const spinLength = 4 * 1000 // 4 segundos
const startTime = Date. ow()

const spinReels = () => {
updateReels()

if ((Date. ow() - startTime) >= spinLength) {
finishSpin()
} else {
// Ralentiza un poco en cada giro
timeout *= 1. setTimeout(spinReels, timeout)
}
}

spinReels()
}
})

const getRandomValue = () => {
const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
valores devueltos [Matemáticas. 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) {
// Todos los 3 valores son los mismos
resultados. abel = '💰 ¡Jackpot!'
resultados.
result.textColor = '#FDFF00'
} else if (uniqueValues === 2) {
// 2 values are the same
result.label = '😍 Winner!'
extColor = '#FDF00'
} else {
// Ningún valor es el mismo
resultado. abel = ': tly_frowning_face: Deslizar en'
resultados. extColor = nulo
}
giro = false
}

const touchBar = new TouchBar([
giro,
new TouchBarSpacer({size: 'large'}),
roel1,
new TouchBarSpacer({size: 'small'}),
rodillo2,
nuevo TouchBarSpacer({size: 'small'}),
rodillos 3,
new TouchBarSpacer({size: 'large'}),
resultado
])

let window

app. nce('ready', () => {
window = new BrowserWindow({
frame: false,
titleBarStyle: 'hidden-inset',
ancho: 200,
altura: 200,
fondo Color: '#000'
})
ventana. oadURL('about:blank')
window.setTouchBar(touchBar)
})