Aller au contenu principal

TouchBar

Classe : TouchBar​

Créer une disposition TouchBar pour les applications natives macOS

Processus : Main

new TouchBar(options)​

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) :

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

Vous devriez alors voir une nouvelle fenêtre Electron et l’application s'afficher dans votre touch bar (ou émulateur de touch bar ).