TouchBar
类:TouchBar
¥Class: TouchBar
为原生 macOS 应用创建 TouchBar 布局
¥Create TouchBar layouts for native macOS applications
进程:主进程
¥Process: Main
new TouchBar(options)
使用指定的项目创建一个新的触摸栏。使用 BrowserWindow.setTouchBar
将 TouchBar
添加到窗口。
¥Creates a new touch bar with the specified items. Use
BrowserWindow.setTouchBar
to add the TouchBar
to a window.
注意:TouchBar API 目前处于实验阶段,可能会在未来的 Electron 版本中更改或删除。
¥Note: The TouchBar API is currently experimental and may change or be removed in future Electron releases.
提示:如果你没有带 Touch Bar 的 MacBook,则可以使用 触摸栏模拟器 来测试应用中 Touch Bar 的使用情况。
¥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
typeof TouchBarButton
对 TouchBarButton
类的引用。
¥A typeof TouchBarButton
reference to the TouchBarButton
class.
TouchBarColorPicker
typeof TouchBarColorPicker
对 TouchBarColorPicker
类的引用。
¥A typeof TouchBarColorPicker
reference to the TouchBarColorPicker
class.
TouchBarGroup
typeof TouchBarGroup
对 TouchBarGroup
类的引用。
¥A typeof TouchBarGroup
reference to the TouchBarGroup
class.
TouchBarLabel
typeof TouchBarLabel
对 TouchBarLabel
类的引用。
¥A typeof TouchBarLabel
reference to the TouchBarLabel
class.
TouchBarPopover
typeof TouchBarPopover
对 TouchBarPopover
类的引用。
¥A typeof TouchBarPopover
reference to the TouchBarPopover
class.
TouchBarScrubber
typeof TouchBarScrubber
对 TouchBarScrubber
类的引用。
¥A typeof TouchBarScrubber
reference to the TouchBarScrubber
class.
TouchBarSegmentedControl
typeof TouchBarSegmentedControl
对 TouchBarSegmentedControl
类的引用。
¥A typeof TouchBarSegmentedControl
reference to the TouchBarSegmentedControl
class.
TouchBarSlider
typeof TouchBarSlider
对 TouchBarSlider
类的引用。
¥A typeof TouchBarSlider
reference to the TouchBarSlider
class.
TouchBarSpacer
typeof TouchBarSpacer
对 TouchBarSpacer
类的引用。
¥A typeof TouchBarSpacer
reference to the TouchBarSpacer
class.
TouchBarOtherItemsProxy
typeof TouchBarOtherItemsProxy
对 TouchBarOtherItemsProxy
类的引用。
¥A typeof TouchBarOtherItemsProxy
reference to the TouchBarOtherItemsProxy
class.
实例属性
¥Instance Properties
以下属性在 TouchBar
的实例上可用:
¥The following properties are available on instances of TouchBar
:
touchBar.escapeItem
设置后,TouchBarItem
将取代触摸栏上的 "esc" 按钮。设置为 null
将恢复默认的 "esc" 按钮。更改此值会立即更新触摸栏中的转义项。
¥A TouchBarItem
that will replace the "esc" button on the touch bar when set.
Setting to null
restores the default "esc" button. Changing this value
immediately updates the escape item in the touch bar.
示例
¥Examples
下面是一个带有按钮和一些标签的简单的插槽触摸条游戏的示例。
¥Below is an example of a simple slot machine touch bar game with a button and some labels.
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)
})
运行上面的例子
¥Running the above example
要运行上面的示例,你需要(假设你在要运行示例的目录中打开了一个终端):
¥To run the example above, you'll need to (assuming you've got a terminal open in the directory you want to run the example):
-
将以上文件保存到你的计算机上并命名为
touchbar.js
¥Save the above file to your computer as
touchbar.js
-
通过
npm install electron
安装 Electron¥Install Electron via
npm install electron
-
在 Electron 中运行示例:
./node_modules/.bin/electron touchbar.js
¥Run the example inside Electron:
./node_modules/.bin/electron touchbar.js
然后,你应该会看到一个新的 Electron 窗口以及在触摸栏(或触摸栏模拟器)中运行的应用。
¥You should then see a new Electron window and the app running in your touch bar (or touch bar emulator).