# bit-tabs

> A tabs can.Component; allows switching between one of many panels using a tabs interface.

Latest version **2.0.1** (published 2018-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install bit-tabs
pnpm add bit-tabs
yarn add bit-tabs
bun add bit-tabs
```

## 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 | 2.0.1 |
| Published | 2018-11-02 |
| First published | 2015-03-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 74 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Bitovi |
| Maintainers | chasen, justinbmeyer, matthewp, phillipskevin, sinjhin |
| Keywords | CanJS, UI, Slider, can-component |

## Links

- npm: https://www.npmjs.com/package/bit-tabs
- Repository: https://github.com/bitovi-components/bit-tabs
- Issues: https://github.com/bitovi-components/bit-tabs/issues
- npm.io page: https://npm.io/package/bit-tabs

## Dependencies (7)

- [cssify](https://npm.io/package/cssify.md) ^0.6.0
- [can-define](https://npm.io/package/can-define.md) ^2.7.0
- [can-stache](https://npm.io/package/can-stache.md) ^4.15.3
- [steal-less](https://npm.io/package/steal-less.md) ^1.3.4
- [steal-stache](https://npm.io/package/steal-stache.md) ^4.1.2
- [can-component](https://npm.io/package/can-component.md) ^4.0.0
- [can-view-model](https://npm.io/package/can-view-model.md) ^4.0.1

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2018-11-02
- 3.0.0-pre.0 (pre) — 2019-10-30
- 1.0.0-alpha.0 (alpha) — 2017-01-10
- 2.0.0 — 2018-02-22
- 2.0.0-pre.2 — 2018-01-23
- 2.0.0-pre.1 — 2018-01-04
- 2.0.0-pre.0 — 2017-12-14
- 1.0.4 — 2017-11-01
- 1.0.3 — 2017-05-23
- 1.0.2 — 2017-04-27
- 1.0.0 — 2017-03-16
- 0.3.0-pre.0 — 2016-05-23
- 0.2.1 — 2016-05-02
- 0.2.0 — 2015-09-30
- 0.1.3 — 2015-09-10
- … 15 more at https://npm.io/package/bit-tabs/versions

## README

## bit-tabs

[![Build Status](https://travis-ci.org/bitovi-components/bit-tabs.svg?branch=master)](https://travis-ci.org/bitovi-components/bit-tabs)

A tabs widget that can be loaded by:

- StealJS + ES6
- npm / browserify / CJS
- RequireJS / AMD
- Standalone with CanJS and jQuery


## ES6 use

With StealJS, you can import this module directly in a template that is autorendered:

```html
<script type='text/stache' can-autorender>
	<can-import from="bit-tabs"/>
	
	<bit-tabs>
	    <bit-panel title="CanJS">
	      CanJS provides the MV*
	    </bit-panel>
	    <bit-panel title="StealJS">
	      StealJS provides the infrastructure.
	    </bit-panel>
  	</bit-tabs>
</script>

<script src='./node_modules/steal/steal.js'
	main="can/view/autorender/"></script>
```

Alternatively, you can import this module like:

```js
import "bit-tabs";
import can from "can";
import $ from "jquery";
import stache from "can/view/stache/stache";


var template = stache("<bit-tabs>"+
	"<bit-panel title='X'>X Content</bit-panel>"+
	"<bit-panel title='Y'> Y-Content</bit-panel>"+
"</bit-tabs>");

$("body").append(template());

```


## CJS use

Use `require` to load `bit-tabs` and everything else
needed to create a template that uses `bit-tabs`:

```js
var can = require("canjs");
var $ = require("jquery");

// Add's bit-tabs tag
require("bit-tabs");
// Use stache
require("canjs/view/stache/stache");


var template = can.stache("<bit-tabs>"+
	"<bit-panel title='X'>X Content</bit-panel>"+
	"<bit-panel title='Y'> Y-Content</bit-panel>"+
"</bit-tabs>");

$("body").append(template());

```

## AMD use

Configure the `can` and `jquery` paths and the `bit-tabs` package:

```html
<script src="require.js"></script>
<script>
	require.config({
	    paths: {
	        "jquery": "node_modules/jquery/dist/jquery",
	        "can": "node_modules/canjs/dist/amd/can"
	    },
	    packages: [{
		    	name: 'bit-tabs',
		    	location: 'node_modules/bit-tabs/dist/amd',
		    	main: 'lib/bit-tabs'
	    }]
	});
	require(["main-amd"], function(){});
</script>
```

Make sure you have the `css` plugin configured also!

Use bit-tabs like:

```js
define(["can", "jquery", "can/view/stache","bit-tabs"], function(can, $){
	var template = can.stache("<bit-tabs>"+
		"<bit-panel title='X'>X Content</bit-panel>"+
		"<bit-panel title='Y'> Y-Content</bit-panel>"+
	"</bit-tabs>");

	$("body").append(template());
});
```

## Standalone use

Load the `global` css and js files:

```html
<link rel="stylesheet" type="text/css" 
      href="./node_modules/bit-tabs/dist/global/bit-tabs.css">
      
<script src='./node_modules/jquery/dist/jquery.js'></script>
<script src='./node_modules/canjs/dist/can.jquery.js'></script>
<script src='./node_modules/canjs/dist/can.stache.js'></script>
<script src='./node_modules/bit-tabs/dist/global/bit-tabs.js'></script>
<script id='main-stache' text='text/stache'>
  <bit-tabs>
    <bit-panel title='X'>X Content</bit-panel>
    <bit-panel title='Y'>Y-Content</bit-panel>
  </bit-tabs>
</script>
<script>
  $("body").append( can.view("main-stache",{}) );
</script>
```

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