webentwicklung-frage-antwort-db.com.de

Angular UI Bootstrap Vertical Tabs

Wie erstellen Sie mit Angular UI Bootstrap vertikal gestapelte Registerkarten, die links neben dem Registerkarteninhalt ausgerichtet sind, der so aussieht?

enter image description here

11
Henry Neo

Um diese Registerkarten zu implementieren, müssen wir einige Dinge tun.

  1. Fügen Sie die CSS-Klasse 'tabs-left' zu angular ui bootstrap tabs hinzu, auf die von https://github.com/angular-ui/ verwiesen wird. 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. Fügen Sie den benutzerdefinierten CSS-Code hinzu, wie in Gestapelte Registerkarten in Bootstrap angegeben

    .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;
    }
    
13
Henry Neo

Eine andere Lösung besteht darin, so etwas zu erstellen

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

Und wie in JS

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

Bei diesem Ansatz habe ich mehr Kontrolle über HTML-Markup.

19
Sergey Romanov

Diese Geige implementiert, was Sie brauchen:

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>

Sie können zwischen Registerkarten wechseln, wie es in der Antwort von Sergej erklärt wird

0
Denis Evseev

Ich habe eine Gist erstellt für das, was wir brauchen: 

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

0
hugsbrugs