# essence-tab

> Essence Tab - Tab & TabItem components

Latest version **1.0.6** (published 2016-03-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install essence-tab
pnpm add essence-tab
yarn add essence-tab
bun add essence-tab
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2016-03-25 |
| First published | 2016-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 412 |
| Author | Hetmann W. Iohan |
| Maintainers | blogtools, essence_md, pearlventures |
| Keywords | color palette, component, essence, google material, grid lists, javascript, less css, less, lesscss, material components, material design framework, material design, material, module, react component, react components, react native, react, react-component, template, templates, tile, tiles, UI component, UI kit, UI kits, UI, widget, tab, bar, tab-bar, tab bar |

## Links

- npm: https://www.npmjs.com/package/essence-tab
- Repository: https://github.com/Evo-Forge/Essence
- Homepage: http://getessence.io/
- Issues: https://github.com/Evo-Forge/Essence/issues
- npm.io page: https://npm.io/package/essence-tab

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.x
- [essence-core](https://npm.io/package/essence-core.md) ^1.x

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2016-03-25
- 1.0.5 — 2016-03-25
- 1.0.4 — 2016-02-26
- 1.0.3 — 2016-02-26
- 1.0.2 — 2016-02-19
- 1.0.1 — 2016-02-19
- 1.0.0 — 2016-02-18
- 0.0.6 — 2016-02-16
- 0.0.5 — 2016-02-10
- 0.0.4 — 2016-02-05
- 0.0.3 — 2016-02-02
- 0.0.2 — 2016-01-18
- 0.0.1 — 2016-01-07

## README

# Essence Tab - Tab component

#### Options:
- data: an object list with keys: `header`, `rows`, `footer`
- header: an object list with keys: `context` & `callback` callback function
- rows: an array list with the same number of columns as from header
- indicator: the class color for tab header indicator


### How to use
```js
import Tab from 'essence-tab';

var tabData = {
  'header': [
    {
      'context': (<Text>Tab 1</Text>)
    },
    {
      'context': (<Text>Tab 2</Text>)
    },
    {
      'context': (<Text>Tab with callback alert</Text>),
      'callback': ( function() { alert('Hey you'); } )
    },
    {
      'context': (<Text>Tab with callback with link</Text>),
      'callback': ( function() { window.open('http://www.google.com/', '_blank'); })
    }
  ],
  'rows': [
    (<Text>This is the context for Tab 1</Text>),
    (<Text>This is the context for Tab 2</Text>),
    (<Text>This is the context for Tab with callback alert</Text>),
    (<Text>This is the context for Tab with callback link</Text>)
  ]
};

class TabTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      classes: ClassNames(
        this.props.classes,
        this.props.className
      )
    };
  }

  render() {
    return(
      <Tab
        data={tabData}
        classes={'e-background-cyan-500 e-text-grey-50'}
        indicator={'e-background-red-500'}/>
    );
  }
};
```

---
_Source: https://npm.io/package/essence-tab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._