Анимированый Tab Ангуляр / AngularJS / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.2

Каталог: Сниппеты Bootstrap

Категория: AngularJS

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, WHMCS

Язык: Русский

Уникальный ID: 383

Количество символов:

Посмотрели: 4039 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.4 / 5 - 5 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/nervgh/angular-tabs

Информация: Пользователям

Информация: Правообладателям

Теги: angularjs, Tab, таб, ангуляр, ангулар, сниппет, Bootstrap, Angular, анимация, Snippet

Поделился: IZOTOP

Добавлено: 2016-01-17 в 00:36

Метка: 1645558965

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/angularjs/module/2016/tabs.animate.min.css" />
<script src="https://bootstraptema.ru/plugins/angularjs/stable/v1/1.4.8-angular.min.js"></script>
<script src="https://bootstraptema.ru/plugins/angularjs/module/2016/tabs.js"></script>

<style>
.ng-hide, [ng-cloak] {
display: none !important;
}

.ng-show {
display: block !important;
}

/* убрать скролл при анимации */
.tab-content{
overflow: hidden
}
</style>

<div class="container" ng-app="app">
<div class="row">
<div class="col-xs-12" ng-controller="TabController" ng-tabs>

<ul class="nav nav-tabs">
<li ng-tab-head>
<a href="#" ng-click="$event.preventDefault()">Таб 1</a>
</li>
<li ng-tab-head>
<a href="#" ng-click="$event.preventDefault()">Таб 2</a>
</li>
<li ng-tab-head="active">
<a href="#" ng-click="$event.preventDefault()">Таб 3</a>
</li>
<li ng-tab-head>
<a href="#" ng-click="$event.preventDefault()">Таб 4</a>
</li>
</ul>

<div class="tab-content">

<div ng-tab-body="animated bounceInLeft" class="tab-pane">
<img src="https://murchim.ru/_sf/33/20780530.jpg" class="img-responsive" alt="1" />
</div>
<div ng-tab-body="animated fadeInUpBig" class="tab-pane">
<img src="https://murchim.ru/_sf/33/20780530.jpg" class="img-responsive" alt="2" />
</div>
<div ng-tab-body="animated fadeInRightBig" class="tab-pane">
<img src="https://murchim.ru/_sf/33/20780530.jpg" class="img-responsive" alt="3" />
</div>
<div ng-tab-body="animated bounceInDown" class="tab-pane">
<img src="https://murchim.ru/_sf/33/20780530.jpg" class="img-responsive" alt="4" />
</div>

</div>

<script>
angular
.module( 'app', [ 'tabs' ])
.controller( 'TabController', function() {
});
</script>

</div>
</div>
</div>