StatusBarItem

A status bar item is one of the buttons you see on the bottom bar.

Constructor properties:

• label: Button's text
• action: Action on left-click
• contextAction: Action on right-click
• component: Puffin component (optional, use instead of label)
• important: Highlight the button or not ( default to false)
• position: Show it in the left or right ( default to left )
• hint: Text when hovering the button

The action function will be executed when the button is clicked. The first argument is the click event.

function entry(API){
  new API.StatusBarItem({
    label: 'Click me',
    action(e){
      console.log('The click event: ',e)
    }
  })
}

You can make use of the important property to highlight the button:

function entry(API){
  new API.StatusBarItem({
    label: 'Button',
    important: true,
    action(){
      //action
    }
  })
}

You can also bind an action when right-clicking the button:

function entry(API){
  new API.StatusBarItem({
    label: 'Button',
    contextAction(){
      console.log('Right clicked the button.')
    }
  })
}

Show a text when hovering the button:

function entry(API){
  new API.StatusBarItem({
    label: 'Button',
    hint: 'This is a very cool button'
  })
}

Move the button to the right side of the status bar:

function entry(API){
  new API.StatusBarItem({
    label: 'Button',
    position: 'right'
  })
}

Passing a custom puffin component:

function entry(API){
  new API.StatusBarItem({
     component(){
        return API.puffin.element`
           <span>Button</span>
         `
      }
  })
}