角材料mdTabs - 如何让动画标签不是内容的唯一效果？

问题描述

我想获得具有一个很好的连锁反应按钮，当有人点击选项卡上的向右的动画效果和边境低于标签幻灯片。我不想用标签里面的内容，我只想标签效应。

正如你所看到的，点击第二个选项卡将使边境向右滑动，但内容也将转移到左侧。我只想标签按钮向右滑动为我的效果的一部分。我怎样才能做到这一点？

解决方案

您可以使用MD-标签指令没有的内容：

\r

\r

VAR应用= angular.module（'应用'，['ngMaterial']） ;\r
app.controller（'myController的'，函数（$范围）{\r
  $ scope.selectedIndex = 0;\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.3.15/angular.min.js\"></script>\r
＆所述; SCRIPT SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js\"></script>\r
＆LT;链接rel =stylesheet属性HREF =htt​​ps://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.min.css＆GT;\r
\r
＆LT; MD-NG内容应用=应用程序NG控制器=myController的＆GT;\r
  ＆LT; MD-标签MD-动态高度MD-边框底部MD-选择=的selectedIndex＆GT;\r
    ＆LT; MD-选项卡标签=一＆GT;＆LT; / MD-标签＆gt;\r
    ＆LT; MD-选项卡标签=两化＆GT;＆LT; / MD-标签＆gt;\r
    ＆LT; MD-选项卡标签=三＆GT;＆LT; / MD-标签＆gt;\r
  ＆LT; / MD-标签＆GT;\r
  ＆LT; D​​IV布局布局-ALIGN =中心中心＆GT; {{}的selectedIndex}＆LT; / DIV＆GT;\r
＆LT; / MD-含量＆GT;

\r

\r

\r

I want to get the animation effect of when someone clicks on the tab and the border below that tab slides to right with the button having a nice ripple effect. I don't want to use the content inside the tab, I just want the tab effect.

As you can see, clicking on the second tab will make the border slide to the right but content will also move to left. I only want tab button sliding to the right as part of my effect. How can I achieve this?

解决方案

You can use the md-tabs directive without the contents:

var app = angular.module('app', ['ngMaterial']);
app.controller('myController', function($scope) {
  $scope.selectedIndex = 0;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.min.css">

<md-content ng-app="app" ng-controller="myController">
  <md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex">
    <md-tab label="one"></md-tab>
    <md-tab label="two"></md-tab>
    <md-tab label="three"></md-tab>
  </md-tabs>
  <div layout layout-align="center center">{{ selectedIndex }}</div>
</md-content>

这篇关于角材料mdTabs - 如何让动画标签不是内容的唯一效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！