Overview - DevExtreme Tab Panel

index.html

    <div class="dx-viewport demo-container" ng-app="DemoApp" ng-controller="DemoController">
        <div id="tabpanel">
            <div dx-tab-panel="tabPanelOptions" dx-item-alias="company">
                <div data-options="dxTemplate : { name: 'title' } ">
                    <span>{{company.CompanyName}}</span>
                </div>
                <div data-options="dxTemplate : { name: 'customer' } ">
                    <div class="tabpanel-item">
                        <div>
                            <p>
                                <b>{{company.City}}</b> 
                                (<span>{{company.State}}</span>)
                            </p>
                            <p>
                                <span>{{company.Zipcode}}</span> 
                                <span>{{company.Address}}</span>
                            </p>
                        </div>
                        <div>
                            <p>
                                Phone: <b>{{company.Phone}}</b>
                            </p>
                            <p>
                                Fax: <b>{{company.Fax}}</b>
                            </p>
                            <p>
                                Website: 
                                <a ng-href="{{company.Website}}" 
                                    target="_blank">
                                    {{company.Website}}
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="item-box">
                Item <span >{{selectedIndex + 1}}</span> 
                of <span>{{itemCount}}</span>
            </div>
        
            <div class="options">
                <div class="caption">Options</div>
                <div class="option">
                    <div dx-check-box="{
                        text: 'Loop enabled', 
                        bindingOptions: {
                            value: 'loop'
                        }
                    }"></div>
                </div>   
                <div class="option">
                    <div dx-check-box="{ 
                        text: 'Animation enabled',
                        bindingOptions: {
                            value: 'animationEnabled'
                        } 
                    }"></div>
                </div>
                <div class="option">
                    <div dx-check-box="{
                        text: 'Swipe enabled',
                        bindingOptions: {
                            value: 'swipeEnabled'
                        } 
                    }"></div>
                </div>
            </div>
        </div>
    </div>

overview-devextreme-tab-panel.markdown

Overview - DevExtreme Tab Panel

A Pen by Juan Antonio Navarro on CodePen.

License.

script.js

var DemoApp = angular.module('DemoApp', ['dx']);

DemoApp.controller('DemoController', function DemoController($scope) {
    $scope.itemCount = tabPanelItems.length;
    $scope.selectedIndex = 0;
    $scope.animationEnabled = true;
    $scope.swipeEnabled = true;
    $scope.loop = false;
    
    $scope.tabPanelOptions = {
    	height: 260,
        dataSource: tabPanelItems,
        itemTemplate: "customer",
        bindingOptions: {
            selectedIndex: "selectedIndex",
            loop: "loop",
            animationEnabled: "animationEnabled",
            swipeEnabled: "swipeEnabled"
        }     
    };
    
});

var tabPanelItems  = [{
    "ID": 1,
    "CompanyName": "SuprMart",
    "Address": "702 SW 8th Street",
    "City": "Bentonville",
    "State": "Arkansas",
    "Zipcode": 72716,
    "Phone": "(800) 555-2797",
    "Fax": "(800) 555-2171",
    "Website": "http://www.nowebsitesupermart.com"
}, {
    "ID": 2,
    "CompanyName": "El'Depot",
    "Address": "2455 Paces Ferry Road NW",
    "City": "Atlanta",
    "State": "Georgia",
    "Zipcode": 30339,
    "Phone": "(800) 595-3232",
    "Fax": "(800) 595-3231",
    "Website": "http://www.nowebsitedepot.com"
}, {
    "ID": 3,
    "CompanyName": "K&S Music",
    "Address": "1000 Nicllet Mall",
    "City": "Minneapolis",
    "State": "Minnesota",
    "Zipcode": 55403,
    "Phone": "(612) 304-6073",
    "Fax": "(612) 304-6074",
    "Website": "http://www.nowebsitemusic.com"
}, {
    "ID": 4,
    "CompanyName": "Tom Club",
    "Address": "999 Lake Drive",
    "City": "Issaquah",
    "State": "Washington",
    "Zipcode": 98027,
    "Phone": "(800) 955-2292",
    "Fax": "(800) 955-2293",
    "Website": "http://www.nowebsitetomsclub.com"
}];

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/19.2.3/js/dx.all.js"></script>

style.css

.tabpanel-item {
    height: 200px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 25px;
    padding-top: 55px;
}

.mobile .tabpanel-item {
    padding-top: 10px;
}

.tabpanel-item  > div {
    float: left;
    padding: 0 85px 10px 10px
}

.tabpanel-item  p {
    font-size: 16px;
    margin: 0;    
}

.item-box {
    font-size: 16px;
    margin: 15px 0 45px 10px;
}

.options {
    padding: 20px;
    background-color: rgba(191, 191, 191, 0.15);
    margin-top: 20px;
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option {
    margin-top: 10px;
}

.dx-tabs-scrollable .dx-tab {
    display: table-cell;
}

styles

<link href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.common.css" rel="stylesheet" />
<link href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.light.css" rel="stylesheet" />