Blessed Tab Container Element

A tabbed container for the blessed CLI UI library. Implements clickable tabs by rendering a tabline as the root element label, with each label styled to indicate the tabs' active & dirty status.

Features

• Configurable tab styling
• Indicates tab 'dirty' state in label
• Tabs!

API

The tab container function returns an object with setVisibleTab(label) and setDirty(tab) methods. More details can be found in the docs/ folder

Example Usage

const BlessedTabContainer = require('blessed-tab-container')
const blessedContrib = require('blessed-contrib')
const colors = require('colors')

const screen = blessed.screen({ smartCSR: true })

screen.enableInput()
screen.key(['escape', 'q', 'C-c'], () => {
  screen.destroy()
  process.exit(0) // eslint-disable-line
})

const grid = new blessedContrib.grid({
  screen: screen,
  rows: 1,
  cols: 2
})

const tabGroupA = []
const tabGroupB = []

for (let i = 0; i < 2; i += 1) {
  tabGroupA.push(grid.set(0, 0, 1, 1, blessed.element, {
    content: `Content for Tab ${i + 1}`
  }))
}

for (let i = 0; i < 5; i += 1) {
  tabGroupB.push(grid.set(0, 1, 1, 1, blessed.element, {
    content: `Content for Tab ${i + 1}`
  }))
}

const tabContainerSettings = {
  screen,
  tabSeperator: ' | ',
  activeColorFunc: colors.bgBrightBlue.black,
  dirtyColorFunc: colors.underline
}

const tabContainerA = BlessedTabContainer({
  ...tabContainerSettings,
  defaultVisible: 'Tab 1',
  tabs: tabGroupA.map((t, i) => ({
    label: `Tab ${i + 1}`,
    component: t
  }))
})

const tabContainerB = BlessedTabContainer({
  ...tabContainerSettings,
  defaultVisible: 'Tab 1',
  tabs: tabGroupB.map((t, i) => ({
    label: `Tab ${i + 1}`,
    component: t
  }))
})

// Do something with the containers
tabContainerA.setVisibleTab('Tab 2')
tabContainerB.setVisibleTab('Tab 4')

screen.render()

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request