Skip to main content

TouchBar

Classe : TouchBar

Créer une disposition TouchBar pour les applications natives macOS

Processus : Main

new TouchBar(options)

Creates a new touch bar with the specified items. Use BrowserWindow.setTouchBar to add the TouchBar to a window.

Remarque : L’API TouchBar est actuellement expérimentale et peut changer ou être supprimée dans les futures mises à jour d'Electron.

Tip: If you don't have a MacBook with Touch Bar, you can use Touch Bar Simulator to test Touch Bar usage in your app.

Static Properties

TouchBarButton

A typeof TouchBarButton reference to the TouchBarButton class.

TouchBarColorPicker

A typeof TouchBarColorPicker reference to the TouchBarColorPicker class.

TouchBarGroup

A typeof TouchBarGroup reference to the TouchBarGroup class.

TouchBarLabel

A typeof TouchBarLabel reference to the TouchBarLabel class.

TouchBarPopover

A typeof TouchBarPopover reference to the TouchBarPopover class.

TouchBarScrubber

A typeof TouchBarScrubber reference to the TouchBarScrubber class.

TouchBarSegmentedControl

A typeof TouchBarSegmentedControl reference to the TouchBarSegmentedControl class.

TouchBarSlider

A typeof TouchBarSlider reference to the TouchBarSlider class.

TouchBarSpacer

A typeof TouchBarSpacer reference to the TouchBarSpacer class.

TouchBarOtherItemsProxy

A typeof TouchBarOtherItemsProxy reference to the TouchBarOtherItemsProxy class.

Propriétés d'instance

Les propriétés suivantes sont disponibles pour les instances de TouchBar :

touchBar.escapeItem

A TouchBarItem that will replace the "esc" button on the touch bar when set. Le définir à null restaurera le bouton "esc". Changer cette valeur immédiatement met à jour le bouton "esc" dans la touch bar.

Exemples

Voici un exemple d’un jeu de machine à sous dans la touch bar avec un bouton et quelques labels.

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

const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar

let spinning = false

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

// Spin result label
const result = new TouchBarLabel()

// Spin button
const spin = new TouchBarButton({
label: '🎰 Spin',
backgroundColor: '#7851A9',
click: () => {
// Ignore clicks if already spinning
if (spinning) {
return
}

spinning = true
result.label = ''

let timeout = 10
const spinLength = 4 * 1000 // 4 seconds
const startTime = Date.now()

const spinReels = () => {
updateReels()

if ((Date.now() - startTime) >= spinLength) {
finishSpin()
} else {
// Slow down a bit on each spin
timeout *= 1.1
setTimeout(spinReels, timeout)
}
}

spinReels()
}
})

const getRandomValue = () => {
const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
return values[Math.floor(Math.random() * values.length)]
}

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

const finishSpin = () => {
const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size
if (uniqueValues === 1) {
// All 3 values are the same
result.label = '💰 Jackpot!'
result.textColor = '#FDFF00'
} else if (uniqueValues === 2) {
// 2 values are the same
result.label = '😍 Winner!'
result.textColor = '#FDFF00'
} else {
// No values are the same
result.label = '🙁 Spin Again'
result.textColor = null
}
spinning = false
}

const touchBar = new TouchBar({
items: [
spin,
new TouchBarSpacer({ size: 'large' }),
reel1,
new TouchBarSpacer({ size: 'small' }),
reel2,
new TouchBarSpacer({ size: 'small' }),
reel3,
new TouchBarSpacer({ size: 'large' }),
result
]
})

let window

app.whenReady().then(() => {
window = new BrowserWindow({
frame: false,
titleBarStyle: 'hiddenInset',
width: 200,
height: 200,
backgroundColor: '#000'
})
window.loadURL('about:blank')
window.setTouchBar(touchBar)
})

Exécution de l’exemple ci-dessus

Pour exécuter l’exemple ci-dessus, vous devrez (en supposant que vous avez un terminal ouvert dans le répertoire où vous souhaitez exécuter l’exemple) :

  1. Enregistrez le fichier ci-dessus sur votre ordinateur comme touchbar.js
  2. Installez Electron via npm install electron
  3. Exécutez l’exemple avec Electron : ./node_modules/.bin/electron touchbar.js

Vous devriez alors voir une nouvelle fenêtre Electron et l’application en cours d’exécution dans votre touch bar (ou touch bar emulator).