https://github.com/atmajs/compo-tabs

Tabs UI Component
https://github.com/atmajs/compo-tabs

Last synced: 6 days ago
JSON representation

Tabs UI Component

• Host: GitHub
• URL: https://github.com/atmajs/compo-tabs
• Owner: atmajs
• Created: 2014-09-14T23:06:44.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2016-03-17T11:54:33.000Z (over 8 years ago)
• Last Synced: 2024-10-11T12:49:23.649Z (about 1 month ago)
• Language: JavaScript
• Size: 28.3 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
### Component: Tabs

[![Build Status](https://travis-ci.org/atmajs/compo-tabs.png?branch=master)](https://travis-ci.org/atmajs/compo-tabs)

[![Bower version](https://badge.fury.io/bo/compo-tabs.svg)](http://badge.fury.io/bo/compo-tabs)

```mask

Tabs

	x-visible = 'foo' // optional, name of the current visible tab 

	x-route = '/baz'  // optional, listens hashchange or history API changes 

	x-anchors = true  // all panels are visible and it behaves like a scrollspy

	

	{ /*Template*/ }

```

- Best works with [RutaJS](https://github.com/atmajs/ruta) and [Mask.Animation](https://github.com/atmajs/mask-animation)

- Renders the Bootstraps HTML and the class structure.

_Tired always to write extra html code?[Boostrap Tabs](http://getbootstrap.com/javascript/#tabs-usage)_

##### Templates

- Headers And Panels

	```mask

	Tabs x-visibile = baz {

		@tab name = foo {

			@head > 'FooHeader'

			@body > 'FooContent' 

		}

		@tab name = baz {

			@head > 'BazHeader'

			@body > 'BazContent' 

		}

	}

	```

	

- Panels only

	```mask

	Tabs {

		@panel name=foo >

			span.foo > 'Foo'

		

		@panel name=baz >

			span.baz > 'Baz'

	}

	```

	

- Animations

	```mask

	Tabs {

		// Tabs Template

		// ...

		

		// Animations

		@show {

			@model > 'transform | scale(0) translate3d(100%, 100%, 0) > scale(1) translate3d(0, 0, 0) | 2s linear'

		}

		@hide {

			@model > 'transform | scale(1) > scale(0)| 2s linear'

		}

	}

	```

	

#### API

- **`setActive = function(String)`** #

	

	Show the tab by name.

	

- **`getActiveName = function(): String`** #

	

	Get current active name.

- **`getList = function(): [String]`** #

	Get all names.

	

- **`has = function(String): Boolean`** #

	Check if the component contains the tab name.

###### Api Example

_template_

```mask

	section >

		Tabs #tabs-example {

			@tab name = foo {

				@head > 'FooHeader'

				@body > 'FooContent' 

			}

			@tab name = baz {

				@head > 'BazHeader'

				@body > 'BazContent' 

			}

		}

```

_javascript_

```javascript

var App = Compo({ template: template })

var app = mask.Compo.initialize(App);

var tab = app.find('#tabs-example');

tab.getList() //> foo, baz

tab.getActiveName() //> foo

tab.setActive('baz');

```

### Examples

- [/examples](/examples)

```bash

# install atma toolkit

npm install atma

# run server

atma server

# navigate `http://localhost:5777/examples/simple.html`

```

### Test

```bash

npm test

```

:copyright: MIT - Atma.js Project