TouchBar
Classe : TouchBar
Créer une disposition TouchBar pour les applications natives macOS
Processus : Main
new TouchBar(options)
- Objet
options
items
(TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopover | TouchBarScrubber | TouchBarSegmentedControl | TouchBarSlider | TouchBarSpacer)[] (facultatif)escapeItem
(TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopover | TouchBarScrubber | TouchBarSegmentedControl | TouchBarSlider | TouchBarSpacer | null) (facultatif)
Crée une nouvelle touch bar avec les éléments spécifiés. Utilisez BrowserWindow.setTouchBar
pour ajouter TouchBar
à une fenêtre.
Remarque : L’API TouchBar est actuellement expérimentale et peut changer ou être supprimée dans les futures mises à jour d'Electron.
Astuce : Si vous n’avez pas un MacBook avec Touch Bar, vous pouvez utiliser Touch Bar simulator pour tester la Touch Bar dans votre application.
Propriétés statiques
TouchBarButton
Une référence typeof TouchBarButton
à la classe TouchBarButton
.
TouchBarColorPicker
Une référence typeof TouchBarColorPicker
à la classe TouchBarColorPicker
.
TouchBarGroup
Une référence typeof TouchBarGroup
à la classe TouchBarGroup
.
TouchBarLabel
Une référence typeof TouchBarLabel
à la classe TouchBarLabel
.
TouchBarPopover
Une référence typeof TouchBarPopover
à la classe TouchBarPopover
.
TouchBarScrubber
Une référence typeof TouchBarScrubber
à la classe TouchBarScrubber
.
TouchBarSegmentedControl
Une référence typeof TouchBarSegmentedControl
à la classe TouchBarSegmentedControl
.
TouchBarSlider
Une référence typeof TouchBarSlider
à la classe TouchBarSlider
.
TouchBarSpacer
Une référence typeof TouchBarSpacer
à la classe TouchBarSpacer
.
TouchBarOtherItemsProxy
Une référence typeof TouchBarOtherItemsProxy
à la classe TouchBarOtherItemsProxy
.
Propriétés d'instance
Les propriétés suivantes sont disponibles pour les instances de TouchBar
:
touchBar.escapeItem
Un TouchBarItem
qui remplacera le bouton "esc" sur la touch bar une fois défini. 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 avec la touch bar, un bouton et quelques labels.
const { app, BrowserWindow, TouchBar } = require('electron')
const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar
let spinning = false
// labels des rouleaux
const reel1 = new TouchBarLabel()
const reel2 = new TouchBarLabel()
const reel3 = new TouchBarLabel()
// Spin result = new TouchBarel()
// Bouton de rotation
const spin = new TouchBarButton({
label: '🎰 Spin',
couleur de fond : '#7851A9',
click: () => {
// Ignorer les clics si cela tourne déja
if (spinning) {
return
}
spinning = true
résultat. abel = ''
let timeout = 10
const spinLength = 4 * 1000 // 4 secondes
const startTime = Date. ow()
const spinReels = () => {
updateReels()
if (Date. ow() - startTime) >= spinLength) {
finishSpin()
} else {
// Ralentit un peu à chaque rotation
timeout *= 1. setTimeout(spinReels, timeout)
}
}
spinReels()
}
})
const getRandomValue = () => {
valeurs const = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
valeurs de retour[Math. loor(Math.random() * values.length)]
}
const updateReels = () => {
reel1. abel = getRandomValue()
reel2.label = getRandomValue()
reel3. abel = getRandomValue()
}
const finishSpin = () => {
const uniqueValues = new Set([reel1. label, reel2.label, reel3.label]). ize
if (uniqueValues === 1) {
// Toutes les 3 valeurs sont identique
résultat. abel = '💰 Jackpot!'
result.textColor = '#FDFF00'
} else if (uniqueValues === 2) {
// 2 valeurs sont identiques
result.label = '😍 Gagné!'
result.textColor = '#FDFF00'
} else {
// Aucune valeur identique
result.label = '🙁 Faire tourner à nouveau'
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 suivre les étapes suivantes (en supposant que vous avez un terminal ouvert dans le répertoire où vous souhaitez exécuter l’exemple) :
- Enregistrez le fichier ci-dessus sur votre ordinateur sous
touchbar.js
r - Installer Electron via
npm install electron
- Exécutez l’exemple avec Electron :
./node_modules/.bin/electron touchbar.js
r
Vous devriez alors voir une nouvelle fenêtre Electron et l’application s'afficher dans votre touch bar (ou émulateur de touch bar ).