# can-tabs

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

Latest version **0.0.1-alpha.10** (published 2015-02-03) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-alpha.10 |
| Published | 2015-02-03 |
| First published | 2015-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Bitovi |
| Maintainers | justinbmeyer |
| Keywords | CanJS, UI, Slider |

## Links

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

## Dependencies (2)

- [canjs](https://npm.io/package/canjs.md) 2.2.0-alpha.9
- [cssify](https://npm.io/package/cssify.md) ^0.6.0

## 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

- 0.0.1-alpha.10 (latest) — 2015-02-03
- 0.0.1-alpha.9 — 2015-01-27
- 0.0.1-alpha.8 — 2015-01-27
- 0.0.1-alpha.7 — 2015-01-27
- 0.0.1-alpha.6 — 2015-01-14
- 0.0.1-alpha.4 — 2015-01-14
- 0.0.1-alpha.3 — 2015-01-14
- 0.0.1-alpha.2 — 2015-01-14
- 0.0.1-alpha.1 — 2015-01-14
- 0.0.1-alpha.0 — 2015-01-14

## README

## can-tabs

[![Build Status](https://travis-ci.org/bitovi-components/can-tabs.svg?branch=master)](https://travis-ci.org/bitovi-components/can-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="can-tabs"/>
	
	<can-tabs>
	    <can-panel title="CanJS">
	      CanJS provides the MV*
	    </can-panel>
	    <can-panel title="StealJS">
	      StealJS provides the infrastructure.
	    </can-panel>
  	</can-tabs>
</script>

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

Alternatively, you can import this module like:

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


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

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

```


## CJS use

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

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

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


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

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

```

## AMD use

Configure the `can` and `jquery` paths and the `can-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: 'can-tabs',
		    	location: 'node_modules/can-tabs/dist/amd',
		    	main: 'lib/can-tabs'
	    }]
	});
	require(["main-amd"], function(){});
</script>
```

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

Use can-tabs like:

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

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

## Standalone use

Load the `global` css and js files:

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

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