Angulaire UI Bootstrap Onglets Verticaux

À l'aide Angulaire UI Bootstrap, comment construire des verticales empilées les onglets qui est aligné à gauche de l'onglet de contenu qui ressemble à ceci?

OriginalL'auteur Henry Neo | 2014-10-16

Une autre solution est de créer quelque chose comme ça

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

Et comment en JS

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

Dans l'approche comme ça j'ai plus de contrôle sur le balisage HTML.

Grâce Sergey, ma question était centrée autour angulaire ui bootstrap pour les autres, mais j'aime beaucoup votre approche de trop.. il en est de même de la vidéo de youtube par Michael Calkins sur cette approche.. youtube.com/watch?v=9COtsDovNpM
J'ai aussi utilisé Angulaire de l'INTERFACE utilisateur, mais dans certains cas, cette approche m'a donné beaucoup plus. C'est pourquoi je l'ai posté.
Génial merci Sergey 🙂
Je crois que le JS doit être: $scope.changeTab = function(tab) { $scope.view_tab = tab; }
assurez-vous. Merci.

OriginalL'auteur Sergey Romanov

Afin de mettre en œuvre ces onglets, nous avons besoin de faire quelques choses.

Ajouter des onglets à gauche de " classe css angulaire ui bootstrap onglets comme référencé à partir de 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>

Ajouter le css personnalisé comme une réponse à partir de Empilées les Onglets dans le 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;
}

Cette méthode ne fonctionne pas pour moi. L'empilement des onglets simplement retrouver au-dessus du contenu, au lieu de la gauche. Est-ce vérifié avec bootstrap 3.3.6 et bootstrap angulaire de l'interface utilisateur de 2,5?
Dans mon cas, l'un des éléments à l'intérieur de chaque onglet est un bootstrap de la table. Ce sont des 100% de largeur fixe qui a causé leur chute en dessous de la flottait onglets. Je l'aime toujours une solution, mais le plus simple c'est de mettre la largeur de l'auto (ou un montant fixe). Pas l'idéal.

OriginalL'auteur Henry Neo

0

J'ai créé un résumé de ce que nous avons besoin de :

https://gist.github.com/hugsbrugs/c85a6b1c10d03e8cb0da

OriginalL'auteur hugsbrugs

Ce violon met en œuvre ce que vous avez besoin de:

https://jsfiddle.net/GetUIKit/b3nhjvot/

 <div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home-vr">Home Tab.</div>
<div class="tab-pane" id="profile-vr">Profile Tab.</div>
<div class="tab-pane" id="messages-vr">Messages Tab.</div>
<div class="tab-pane" id="settings-vr">Settings Tab.</div>
</div>
</div>
<div class="col-xs-3"> <!-- required for floating -->
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-right sideways">
<li class="active"><a href="#home-vr" data-toggle="tab">Home</a></li>
<li><a href="#profile-vr" data-toggle="tab">Profile</a></li>
<li><a href="#messages-vr" data-toggle="tab">Messages</a></li>
<li><a href="#settings-vr" data-toggle="tab">Settings</a></li>
</ul>
</div>

Basculer entre les onglets peut être fait, comme il est expliqué dans Sergey réponse

OriginalL'auteur Denis Evseev

Vous devez vous connecter pour publier un commentaire.