Angular Material mdTabs - 如何只获得标签动画的效果而不是内容? [英] Angular Material mdTabs - how to get only the effect of tabs animation not the content?
本文介绍了Angular Material mdTabs - 如何只获得标签动画的效果而不是内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想获得当有人点击选项卡时的动画效果,该选项卡下方的边框向右滑动,按钮具有很好的涟漪效果.不想用tab里面的内容,只想要tab效果.
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?
推荐答案
你可以使用没有内容的 md-tabs 指令:
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>
这篇关于Angular Material mdTabs - 如何只获得标签动画的效果而不是内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文