blessed-tab-container
Version:
A CLI Multi-Tab Container Utilizing Labels For Blessed
167 lines (110 loc) • 4.02 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
<script src="scripts/nav.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav >
<input type="text" id="nav-search" placeholder="Search" />
<h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#BlessedTabContainer">BlessedTabContainer</a></li></ul>
</nav>
<div id="main">
<section class="package">
<h3> </h3>
</section>
<section class="readme usertext">
<article><h1>Blessed Tab Container Element</h1>
<p><a href="https://travis-ci.org/f3rno/blessed-tab-container"><img src="https://travis-ci.org/f3rno/blessed-tab-container.svg?branch=master" alt="Build Status"></a></p>
<p>A tabbed container for the <a href="https://github.com/chjj/blessed"><code>blessed</code></a> 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.</p>
<h2>Features</h2>
<ul>
<li>Configurable tab styling</li>
<li>Indicates tab 'dirty' state in label</li>
<li>Tabs!</li>
</ul>
<h2>API</h2>
<p>The tab container function returns an object with <code>setVisibleTab(label)</code> and
<code>setDirty(tab)</code> methods. More details can be found in the <a href="/docs"><code>docs/ folder</code></a></p>
<h2>Example Usage</h2>
<pre class="prettyprint source lang-js"><code>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()
</code></pre></article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Mar 31 2020 19:20:06 GMT+0700 (Indochina Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>
<script src="scripts/search.js" defer></script>
</body>
</html>