ionic tab menü

ionicte sayfa içerisine  tab menü oluşturmak için:


style.css:

.slide-tab{
    display: table;
    overflow: hidden;
    margin: 0;
    width: 100%;
    background-color: #eff0f2;
    border-bottom: 2px solid #00897B;

}

.slide-tab li{
    float: left;
    line-height: 38px;
    overflow: hidden;
    padding: 0;
}

.slide-tab a{
    background-color: #eff0f2;
    border-bottom: 1px solid #fff;
    color: #888;
    font-weight: 500;
    display: block;
    letter-spacing: 0;
    outline: none;
    padding: 0 20px;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    border-bottom: 2px solid #00897B;
}
.current a{
    color: #fff;
    background: #00897B;
}

.tabheight{

   height:400px !important;

}

controller:

.controller('MyCtrl', function($scope,$ionicSlideBoxDelegate) {

 

    $scope.slideIndex = 0;

        $scope.slideChanged = function(index) {

            $scope.slideIndex = index;

      

        };

        $scope.activeSlide = function (index) {

            $ionicSlideBoxDelegate.slide(index);

        };

});

tab.html:

 <ion-content>

      <div class="row">

        <ul class="slide-tab">

            <li ng-class="slideIndex == 0 ? 'current':''"><a href="#" ng-lick="activeSlide(0)">Tab01</a></li>

            <li ng-class="slideIndex == 1 ? 'current':''"><a href="#" ng-lick="activeSlide(1)">Tab02</a></li>

            <li ng-class="slideIndex == 2 ? 'current':''"><a href="#" ng-lick="activeSlide(2)">Tab03</a></li>

        </ul> 

        </div>

        <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex" class="padding">

            <ion-slide class="tabheight">

                <h3>Tab 1</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium leo et dignissim. Nam aliquet sagittis turpis, eu dapibus ante suscipit nec. Cras vel dignissim nibh. Duis consectetur condimentum consequat. Nam ullamcorper congue nisi vel euismod. Nunc a tempus felis. Fusce lobortis scelerisque faucibus. Aliquam id scelerisque felis. Integer posuere magna in porta finibus. Maecenas sit amet quam neque.

</p>

            </ion-slide>

            <ion-slide class="tabheight">

                <h3>Tab 2</h3>

               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium leo et dignissim. Nam aliquet sagittis turpis, eu dapibus ante suscipit nec. Cras vel dignissim nibh. Duis consectetur condimentum consequat. Nam ullamcorper congue nisi vel euismod. Nunc a tempus felis. Fusce lobortis scelerisque faucibus. Aliquam id scelerisque felis. Integer posuere magna in porta finibus. Maecenas sit amet quam neque.

</p>

            </ion-slide>

            <ion-slide class="tabheight">

                <h3>Tab 3</h3>

               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus pretium leo et dignissim. Nam aliquet sagittis turpis, eu dapibus ante suscipit nec. Cras vel dignissim nibh. Duis consectetur condimentum consequat. Nam ullamcorper congue nisi vel euismod. Nunc a tempus felis. Fusce lobortis scelerisque faucibus. Aliquam id scelerisque felis. Integer posuere magna in porta finibus. Maecenas sit amet quam neque.

</p>

            </ion-slide>

   

        </ion-slide-box>

    </ion-content>

Çalıştırıp bakalım: