Add initial touch bar docs
This commit is contained in:
parent
81ecd4499c
commit
002369576f
11 changed files with 280 additions and 35 deletions
|
@ -6,39 +6,114 @@ Process: [Main](../tutorial/quick-start.md#main-process)
|
|||
|
||||
### `new TouchBar(items)`
|
||||
|
||||
* `items` (TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopOver | TouchBarSlider)[]
|
||||
* `items` (TouchBarButton | TouchBarColorPicker | TouchBarGroup | TouchBarLabel | TouchBarPopOver | TouchBarSlider | TouchBarSpacer)[]
|
||||
|
||||
Creates a new touch bar. Note any changes to the TouchBar instance
|
||||
will not affect the rendered TouchBar. To affect the rendered
|
||||
TouchBar you **must** use either methods on the TouchBar or methods
|
||||
on the TouchBar* items
|
||||
|
||||
### Instance Methods
|
||||
|
||||
The `menu` object has the following instance methods:
|
||||
|
||||
#### `touchBar.destroy()`
|
||||
|
||||
Immediately destroys the TouchBar instance and will reset the rendered
|
||||
touch bar.
|
||||
Creates a new touch bar with the specified items. Use
|
||||
`BrowserWindow.setTouchBar` to add the `TouchBar` to a window.
|
||||
|
||||
## Examples
|
||||
|
||||
The `TouchBar` class is only available in the main process, it is not currently possible to use in the renderer process **even** through the remote module.
|
||||
The `TouchBar` class is only available in the main process, it is not currently
|
||||
possible to use in the renderer process **even** through the remote module.
|
||||
|
||||
### Main process
|
||||
|
||||
An example of creating a touch bar in the main process:
|
||||
Below is an example of a simple slot machine touch bar game with a button
|
||||
and some labels.
|
||||
|
||||
```javascript
|
||||
const {TouchBar, TouchBarButton} = require('electron')
|
||||
const {app, BrowserWindow, TouchBar} = require('electron')
|
||||
|
||||
const {TouchBarLabel, TouchBarButton, TouchBarSpacer} = TouchBar
|
||||
|
||||
let spinning = false
|
||||
|
||||
// Reel labels
|
||||
const reel1 = new TouchBarLabel()
|
||||
const reel2 = new TouchBarLabel()
|
||||
const reel3 = new TouchBarLabel()
|
||||
|
||||
// Spin result label
|
||||
const result = new TouchBarLabel()
|
||||
|
||||
// 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!'
|
||||
} else if (uniqueValues === 2) {
|
||||
// 2 values are the same
|
||||
result.label = '😍 Winner!'
|
||||
} else {
|
||||
// No values are the same
|
||||
result.label = '🙁 Spin Again'
|
||||
}
|
||||
spinning = false
|
||||
}
|
||||
|
||||
const touchBar = new TouchBar([
|
||||
new TouchBarButton({
|
||||
label: 'Example Button',
|
||||
click: () => console.log('I was clicked')
|
||||
})
|
||||
spin,
|
||||
new TouchBarSpacer({size: 'large'}),
|
||||
reel1,
|
||||
reel2,
|
||||
reel3,
|
||||
new TouchBarSpacer({size: 'large'}),
|
||||
result
|
||||
])
|
||||
|
||||
mainWindow.setTouchBar(touchBar)
|
||||
let window
|
||||
|
||||
app.once('ready', () => {
|
||||
window = new BrowserWindow({
|
||||
frame: false,
|
||||
titleBarStyle: 'hidden-inset',
|
||||
width: 200,
|
||||
height: 200,
|
||||
backgroundColor: '#000'
|
||||
})
|
||||
window.loadURL('about:blank')
|
||||
window.setTouchBar(touchBar)
|
||||
})
|
||||
```
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue