- Easy to use and customize
- Keyboard accessible
- Works with (or without)
ng-repeat
-
If you use bower or npm, just
bower/npm install v-tabs
. If not, download files from the github repo. -
Include
angular.js
,angular-animate.js
,v-tabs.js
, andv-tabs.css
:
<link href="v-tabs.css" rel="stylesheet" />
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
<script src="v-tabs.js"></script>
- Add
ngAnimate
andvTabs
as dependencies to your application module:
var myApp = angular.module('myApp', ['ngAnimate', 'vTabs']);
- And put the following markup in your template:
<v-tabs class="vTabs--default" horizontal active="activeTabIndex">
<v-tab>Tab 1</v-tab>
<v-tab>Tab 2</v-tab>
<v-tab>Tab 3</v-tab>
</v-tabs>
<v-pages class="vPages--default" active="activeTabIndex">
<v-page>
<h3>Page 1</h3>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.</p>
</v-page>
<v-page>
<h3>Page 2</h3>
<p>Maecenas malesuada elit lectus felis, malesuada ultricies.</p>
</v-page>
<v-page>
<h3>Page 3</h3>
<p>Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</v-page>
</v-pages>
- You can also use
v-tabs
withng-repeat
:
<v-tabs class="vTabs--default" horizontal active="activeTabIndex">
<v-tab ng-repeat="page in pages" ng-bind="page.title"></v-tab>
</v-tabs>
<v-pages class="vPages--default" active="activeTabIndex">
<v-page ng-repeat="page in pages" ng-bind="page.content"></v-page>
</v-pages>
Add the control
attribute to use API methods:
<v-tabs class="vTabs--default" control="tabs" active="tabs.active">
<v-tab ng-repeat="page in pages" ng-bind="page.title"></v-tab>
</v-tabs>
<v-pages class="vPages--default" active="tabs.active" ng-swipe-left="tabs.next()" ng-swipe-right="tabs.previous()">
<v-page ng-repeat="page in pages" ng-bind="page.content"></v-page>
</v-pages>
<button type="button" ng-click="tabs.previous()">Previous</button>
<button type="button" ng-click="tabs.next()">Next</button>
activate(index)
next()
previous()
vTabs manages keyboard focus and adds some common aria-* attributes. BUT you should additionally place the aria-controls
and aria-labelledby
:
<v-tabs class="vTabs--default" horizontal control="tabs" active="tabs.active">
<v-tab id="tab0{{$index}}" aria-controls="page0{{$index}}" ng-repeat="page in pages" ng-bind="page.title"></v-tab>
</v-tabs>
<v-pages class="vPages--default" active="tabs.active" ng-swipe-left="tabs.next()" ng-swipe-right="tabs.previous()">
<v-page id="page0{{$index}}" aria-labelledby="tab0{{$index}}" ng-repeat="page in pages" ng-bind="page.content"></v-page>
</v-pages>