Scrollable Height:

{{demo | json}}

syTabs is a simple and lightweight AngularJs tab directive working with Bootstrap. And these are the only dependencies you need. Awesome.

You wanna see a live demo? I´ll tell you something: You already found it. Yeah, you´re right: THIS is the demo.

You may now go to , to learn more about syTabs.

Download the project here and implement it in your application like this:

index.html 
<script src="path/to/sy-tabs.js"></script>
app.js 
angular.module('yourApp', ['sy.tabs']);

Now you can use syTabs in your HTML. To know how, go to .

To use syTabs, insert something like this in your 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>

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

And now, the Party can begin.
You should see something like this tabbed element.

Have a look at other .

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="gylphicon glyphicon-star">
    ...
  </sy-pane>
  ...
</sy-tabs>

syPaneLink

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

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.

Here we´re done. I hope you´ll enjoy my little directive. You can visit my website sydev.de, maybe there is another project, which is interesting.

Hopefully see you soon.