Skip to main content

TouchBar

Class: TouchBar​

네이티브 macOS 애플리케이션을 위한 TouchBar 레이아웃 생성

프로세스: Main

new TouchBar(options)​

지정된 아이템으로 새로운 터치 바를 생성한다. BrowserWindow.setTouchBar를 사용해 TouchBar를 윈도우에 추가할 수 있다.

참고: TouchBar API는 현재 실험적 기능이며, 향후 Electron 릴리스에서 변경되거나 제거될 수 있다.

팁: Touch Bar가 없는 MacBook을 사용 중이라면, Touch Bar Simulator를 사용해 앱에서의 Touch Bar 사용을 테스트할 수 있다.

정적 속성​

TouchBarButton​

typeof TouchBarButton은 TouchBarButton 클래스를 참조한다.

TouchBarColorPicker​

typeof TouchBarColorPicker는 TouchBarColorPicker 클래스를 참조한다.

TouchBarGroup​

typeof TouchBarGroup는 TouchBarGroup 클래스를 참조한다.

TouchBarLabel​

typeof TouchBarLabel는 TouchBarLabel 클래스를 참조한다.

TouchBarPopover​

typeof TouchBarPopover는 TouchBarPopover 클래스를 참조한다.

TouchBarScrubber​

typeof TouchBarScrubber는 TouchBarScrubber 클래스를 참조한다.

TouchBarSegmentedControl​

typeof TouchBarSegmentedControl는 TouchBarSegmentedControl 클래스를 참조한다.

TouchBarSlider​

typeof TouchBarSlider는 TouchBarSlider 클래스를 참조한다.

TouchBarSpacer​

typeof TouchBarSpacer는 TouchBarSpacer 클래스를 참조한다.

TouchBarOtherItemsProxy​

TouchBarOtherItemsProxy 클래스의 참조를 나타내는 typeof TouchBarOtherItemsProxy 타입입니다.

인스턴스 속성​

TouchBar 인스턴스에서 사용할 수 있는 속성은 다음과 같다:

touchBar.escapeItem​

TouchBarItem은 터치 바의 "esc" 버튼을 대체한다. 이 값을 null로 설정하면 기본 "esc" 버튼이 복원된다. 이 값을 변경하면 터치 바의 escape 아이템이 즉시 업데이트된다.

예제​

아래는 버튼과 몇 가지 라벨을 포함한 간단한 슬롯 머신 터치 바 게임의 예제이다.

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

const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar

let spinning = false

// 릴 라벨
const reel1 = new TouchBarLabel({ label: '' })
const reel2 = new TouchBarLabel({ label: '' })
const reel3 = new TouchBarLabel({ label: '' })

// 스핀 결과 라벨
const result = new TouchBarLabel({ label: '' })

// 스핀 버튼
const spin = new TouchBarButton({
  label: '🎰 Spin',
  backgroundColor: '#7851A9',
  click: () => {
    // 이미 스핀 중인 경우 클릭 무시
    if (spinning) {
      return
    }

    spinning = true
    result.label = ''

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

    const spinReels = () => {
      updateReels()

      if ((Date.now() - startTime) >= spinLength) {
        finishSpin()
      } else {
        // 매 스핀마다 조금씩 속도 감소
        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) {
    // 3개 값이 모두 동일
    result.label = '💰 Jackpot!'
    result.textColor = '#FDFF00'
  } else if (uniqueValues === 2) {
    // 2개 값이 동일
    result.label = '😍 Winner!'
    result.textColor = '#FDFF00'
  } else {
    // 모든 값이 다름
    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)
})

위 예제를 실행하려면 (예제를 실행하려는 디렉토리에서 터미널을 열었다고 가정하고):

  1. 위 파일을 touchbar.js로 컴퓨터에 저장한다.
  2. npm install electron 명령어를 통해 Electron을 설치한다.
  3. Electron 안에서 예제를 실행한다: ./node_modules/.bin/electron touchbar.js

그러면 새로운 Electron 윈도우가 나타나고, 앱이 터치 바(또는 터치 바 에뮬레이터)에서 실행되는 것을 확인할 수 있다.