1. дома
  2. Вопрос и ответ
  3. Угловые UT Bootstrap Вертикальные вкладки

Угловые UT Bootstrap Вертикальные вкладки

2014-10-16 4 views

ответ

12

Для реализации этих вкладок, нам нужно сделать несколько вещей.

  1. Добавить 'Вкладки левый' CSS класс для угловых закладок пользовательского интерфейса бутстраповских как указано из https://github.com/angular-ui/bootstrap/issues/102

    <tabset class="tabs-left"> 
    <tab heading="Vertical A">Vertical content A</tab> 
    <tab heading="Vertical B">Vertical content B</tab> 
</tabset>

  2. Добавить пользовательские CSS, как ответил с Stacked Tabs in Bootstrap 3

    .tabs-below > .nav-tabs, 
.tabs-right > .nav-tabs, 
.tabs-left > .nav-tabs { 
    border-bottom: 0; 
} 

.tab-content > .tab-pane, 
.pill-content > .pill-pane { 
    display: none; 
} 

.tab-content > .active, 
.pill-content > .active { 
    display: block; 
} 

.tabs-below > .nav-tabs { 
    border-top: 1px solid #ddd; 
} 

.tabs-below > .nav-tabs > li { 
    margin-top: -1px; 
    margin-bottom: 0; 
} 

.tabs-below > .nav-tabs > li > a { 
    -webkit-border-radius: 0 0 4px 4px; 
    -moz-border-radius: 0 0 4px 4px; 
    border-radius: 0 0 4px 4px; 
} 

.tabs-below > .nav-tabs > li > a:hover, 
.tabs-below > .nav-tabs > li > a:focus { 
    border-top-color: #ddd; 
    border-bottom-color: transparent; 
} 

.tabs-below > .nav-tabs > .active > a, 
.tabs-below > .nav-tabs > .active > a:hover, 
.tabs-below > .nav-tabs > .active > a:focus { 
    border-color: transparent #ddd #ddd #ddd; 
} 

.tabs-left > .nav-tabs > li, 
.tabs-right > .nav-tabs > li { 
    float: none; 
} 

.tabs-left > .nav-tabs > li > a, 
.tabs-right > .nav-tabs > li > a { 
    min-width: 74px; 
    margin-right: 0; 
    margin-bottom: 3px; 
} 

.tabs-left > .nav-tabs { 
    float: left; 
    margin-right: 19px; 
    border-right: 1px solid #ddd; 
} 

.tabs-left > .nav-tabs > li > a { 
    margin-right: -1px; 
    -webkit-border-radius: 4px 0 0 4px; 
    -moz-border-radius: 4px 0 0 4px; 
    border-radius: 4px 0 0 4px; 
} 

.tabs-left > .nav-tabs > li > a:hover, 
.tabs-left > .nav-tabs > li > a:focus { 
    border-color: #eeeeee #dddddd #eeeeee #eeeeee; 
} 

.tabs-left > .nav-tabs .active > a, 
.tabs-left > .nav-tabs .active > a:hover, 
.tabs-left > .nav-tabs .active > a:focus { 
    border-color: #ddd transparent #ddd #ddd; 
    *border-right-color: #ffffff; 
} 

.tabs-right > .nav-tabs { 
    float: right; 
    margin-left: 19px; 
    border-left: 1px solid #ddd; 
} 

.tabs-right > .nav-tabs > li > a { 
    margin-left: -1px; 
    -webkit-border-radius: 0 4px 4px 0; 
    -moz-border-radius: 0 4px 4px 0; 
    border-radius: 0 4px 4px 0; 
} 

.tabs-right > .nav-tabs > li > a:hover, 
.tabs-right > .nav-tabs > li > a:focus { 
    border-color: #eeeeee #eeeeee #eeeeee #dddddd; 
} 

.tabs-right > .nav-tabs .active > a, 
.tabs-right > .nav-tabs .active > a:hover, 
.tabs-right > .nav-tabs .active > a:focus { 
    border-color: #ddd #ddd #ddd transparent; 
    *border-left-color: #ffffff; 
}

источник

2014-10-16 01:06:08

+0

Этот метод не работает для меня. Сложенные вкладки просто заканчиваются над содержимым, а не слева. Проверяется ли это с помощью бутстрапа 3.3.6 и бутстрапа углового ui 2.5? – Derrek

+0

В моем случае одним из элементов внутри каждой вкладки является таблица начальной загрузки. Это 100% фиксированная ширина, которая заставила их опуститься ниже плавающих вкладок. Мне все равно понравилось бы решение этого, но простая вещь - установить ширину в auto (или фиксированную сумму). Не идеально. – Derrek

19

Другое решение - создать что-то вроде этого

<div class="row"> 
<div class="col-sm-3"> 
    <ul class="nav nav-tabs nav-stacked nav-pills" role="tablist"> 
     <li ng-class="{'active': view_tab == 'tab1'}"> 
      <a class="btn-lg" ng-click="changeTab('tab1')" href="">My Tab 1</a> 
     </li> 
     <li ng-class="{'active': view_tab == 'tab2'}"> 
      <a class="btn-lg" ng-click="changeTab('tab2')" href="">My Tab 2</a> 
     </li> 
    </ul> 
</div> 
<div class="col-sm-9"> 
    <div class="tab-content"> 
     <div class="tab-pane" ng-show="view_tab == 'tab1'"> 
      This is tab 1 content 
     </div> 
     <div class="tab-pane" ng-show="view_tab == 'tab2'"> 
      This is tab 2 content 
     </div> 
    </div> 
</div> 
</div>

А как в JS

$scope.changeTab = function(tab) { 
    $scope.view_tab = tab; 
}

В подходе, как это у меня больше контроля над HTML-разметкой.

источник

2014-10-16 02:31:27

+0

Спасибо, Сергей, мой вопрос был сосредоточен вокруг углового ui бутстрапа для других, но мне очень нравится ваш подход тоже .. есть похожий видео youtube Майкл Калкинс на этот подход .. http://www.youtube.com/watch?v= 9COtsDovNpM –

+0

Я также использовал Angular UI, но в некоторых случаях такой подход дал мне гораздо больше. Вот почему я опубликовал его. –

+0

Awesome thanks Sergey :) –

Смежные вопросы

 Смежные вопросы