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

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.

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;
}

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>

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.

####sy-tabs

####sy-pane

• 1.0
  • Initial release