Saltar al contenido principal

Barra táctil

Clase: TouchBar​

Crea los diseños de la barra táctil para aplicaciones nativas de macOS

Process: Main

new TouchBar(options)​

Crea una nueva barra táctil con los elementos especificados. Use BrowserWindow.setTouchBar para agregar la TouchBar a una ventana.

Nota: La API TouchBar API actualmente es experimental y puede cambiar o ser eliminada en futuras versiones de 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.

Propiedades estáticas​

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.

Propiedades de la instancia​

Las siguientes propiedades están disponibles en instancias de TouchBar:

touchBar.escapeItem​

Un TouchBarItem que reemplazará el botón "esc" en la barra táctil cuando se configure. Establecer a null restaura el botón "esc" por defecto. Cambiar este valor actualiza inmediatamente el elemento escape en la barra táctil.

Ejemplos​

A continuación hay un ejemplo de un juego simple de máquina tragaperras con un botón y algunas etiquetas.

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

const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar

let spinning = false

// Reel labels
const reel1 = new TouchBarLabel({ label: '' })
const reel2 = new TouchBarLabel({ label: '' })
const reel3 = new TouchBarLabel({ label: '' })

// Spin result label
const result = new TouchBarLabel({ label: '' })

// 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)
})

Ejecutar el ejemplo anterior​

Para ejecutar el ejemplo anterior, se necesita (asumiendo que la terminal está abierta en el directorio en donde se desea ejecutar el ejemplo):

  1. Guardar el archivo anterior en la computadora como touchbar.js
  2. Instalar Electron a través de npm install electron
  3. Ejecutar el ejemplo dentro de Electron: ./node_modules/.bin/electron touchbar.js

Entonces aparecerá una nueva ventana de Electron y la aplicación se ejecutará en la barra táctil (o en el emulador de la barra táctil).