syTabs

syTabs is a simple and lightweight angular tab directive working with bootstrap

Installation

npm

$ npm install --save sytabs

bower

$ bower install --save sytabs

manually

$ git clone https://github.com/sydev/sytabs.git

Or simply download the latest release.

Usage

HTML

<sy-tabs>
  <sy-pane title="Pane 1">
    <p>Lorem Ipsum...</p>
  </sy-pane>
  <sy-pane title="Pane 2">
    <p>Lorem Ipsum...</p>
  </sy-pane>
  ...
</sy-tabs>

<script src="path/to/sytabs.js"></script>

JavaScript

angular.module('myModule', ['sy.tabs']);

For an optimal experience with this directive you should add following styles to your CSS

.tab-content {
  position: relative;
}
.tab-pane {
  width: 100%;
  padding: 15px;
  position: absolute;
  z-index: 1;
}
.tab-pane.hidden, .tab-pane:not(.in) {
  z-index: 0;
}

Features

Icons

You can use icons in the tabs too. Just add the "icon"-attribute to the pane like:

<sy-tabs>
  <sy-pane title="Pane 1" icon="glyphicon glyphicon-star">
    ...
  </sy-pane>
  ...
</sy-tabs>

sy-pane-link

There is a little feature, that i don't wanna deprive: syPaneLink.

With this directive you can set links anywhere in your panes and go to another pane. Just like magic.

To implement these links add something like this to your HTML:

<sy-tabs>
  <sy-pane title="Pane 1">
    <p>
      ...
      <sy-pane-link pane="1">
      ...
    </p>
  </sy-pane>
  ...
</sy-tabs>

The value of the "pane"-attribute is the zero-based-index of all panes. So with "1" we shall go to "Pane 2". You can set any pane-index as value, so you can also go back or skip two panes, no problem.

Options

####sy-tabs

Name	Type	Default	Description
animated	boolean	false	Apply a CSS fade transition to the tab panes.
justified	boolean	false	Make the tabs stretch at equal sizes to span the entire width.
scrollable	boolean	false	Make the tab content scrollable if specific height is exceeded. See scrollable-height.
scrollable-height	integer	300	Set the max-height-breakpoint for scrollable content. The unit is 'px'.

####sy-pane

Name	Type	Default	Description
title	string	'Pane'	Set the title for this pane.
icon	string	none	Set the icon next to the title of this pane

sy-pane-link

Name	Type	Default	Description
pane	integer	0	Set the target-pane for the link. The value is the zero-besed-index of all panes.

Changelog

1.0
- Initial release