feat(tabs): adds support for md-center-tabs

Closes angular#1992

Author: Robert Messerle

src/components/tabs/js/tabsController.js

@@ -23,6 +23,7 @@
     ctrl.attachRipple = attachRipple;
     ctrl.shouldStretchTabs = shouldStretchTabs;
     ctrl.shouldPaginate = shouldPaginate;
+    ctrl.shouldCenterTabs = shouldCenterTabs;
     ctrl.insertTab = insertTab;
     ctrl.removeTab = removeTab;
     ctrl.select = select;
@@ -97,7 +98,8 @@
     }
 
     function handleOffsetChange (left) {
-      angular.element(elements.paging).css('left', '-' + left + 'px');
+      var newValue = shouldCenterTabs() ? '' : '-' + left + 'px';
+      angular.element(elements.paging).css('left', newValue);
       $scope.$broadcast('$mdTabsPaginationChanged');
     }
 
@@ -113,6 +115,7 @@
     }
 
     function adjustOffset () {
+      if (shouldCenterTabs()) return;
       var tab = elements.tabs[ctrl.focusIndex],
           left = tab.offsetLeft,
           right = tab.offsetWidth + left;
@@ -249,6 +252,10 @@
       }
     }
 
+    function shouldCenterTabs () {
+      return $scope.centerTabs && !shouldPaginate();
+    }
+
     function shouldPaginate () {
       var canvasWidth = $element.prop('clientWidth');
       angular.forEach(elements.tabs, function (tab) { canvasWidth -= tab.offsetWidth; });

src/components/tabs/js/tabsDirective.js

@@ -57,6 +57,7 @@
  * @param {string=}  md-align-tabs Attribute to indicate position of tab buttons: `bottom` or `top`; default is `top`
  * @param {string=} md-stretch-tabs Attribute to indicate whether or not to stretch tabs: `auto`, `always`, or `never`; default is `auto`
  * @param {boolean=} md-dynamic-height When enabled, the tab wrapper will resize based on the contents of the selected tab
+ * @param {boolean=} md-center-tabs When enabled, tabs will be centered provided there is no need for pagination
  *
  * @usage
  * <hljs lang="html">
@@ -91,6 +92,7 @@
     return {
       scope: {
         dynamicHeight: '=?mdDynamicHeight',
+        centerTabs:    '=?mdCenterTabs',
         selectedIndex: '=?mdSelected',
         stretchTabs: '@?mdStretchTabs'
       },
@@ -126,6 +128,7 @@
               ng-keydown="$mdTabsCtrl.keydown($event)"\
               role="tablist">\
             <md-pagination-wrapper\
+                ng-class="{ \'md-center-tabs\': $mdTabsCtrl.shouldCenterTabs() }"\
                 md-tab-scroll="$mdTabsCtrl.scroll($event)">\
               <md-tab-item\
                   tabindex="-1"\

src/components/tabs/tabs.scss

@@ -158,6 +158,14 @@ md-tabs {
       transition: left $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
       position: relative;
       width: 999999px;
+      left: 0;
+      transform: translate3d(0, 0, 0);
+      &.md-center-tabs {
+        width: initial;
+        float: left;
+        left: 50%;
+        transform: translate3d(-50%, 0, 0);
+      }
     }
     &.md-stretch-tabs {
       md-pagination-wrapper {