Wondering what’s next for npm?Check out our public roadmap! »

sytabs

1.0.0 • Public • Published

syTabs

syTabs is a simple and lightweight angularjs 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

Install

npm i sytabs

DownloadsWeekly Downloads

2

Version

1.0.0

License

MIT

Last publish

Collaborators

  • avatar