角材料：基本用法模板

我非常想在我的角度应用从Angular Materials整合基本用法模板。 角材料：基本用法模板

当点击<>时，我非常喜欢过渡效果。

我已经在他们的网站上搜索过该指令，但没有找到它。我设法找到的最接近的是Toolbar，但它的上角没有圆整的方式略有不同。另外，使用简单的ng-show，不会提供这种转换。

有关如何实现此目的的任何建议？

来源

2016-01-23 Radu Cojocari

你可以用angular animations这样做，它只是一些简单的CSS转换。你正在与md-toolbar在正确的轨道上。演示使用它，你只需要设置一些CSS来围绕顶角。

md-card md-toolbar { 
    border-radius: 3px 3px 0 0; 
}

现在添加要切换并使用就可以了ng-show的md-toolbar下面的一些内容。

<div class="toggle-content" ng-show="open"> 
    The toggled content! 
</div>

然后，只需检查如何使用CSS动画它ngShow文档。你想在这里制作动画是toogle-content元素的高度。隐藏时，应用height: 0，否则height: 200px。

.toggle-content { 
    height: 200px; 
    background: red; 
} 

.toggle-content.ng-hide-add, .toggle-content.ng-hide-remove { 
    transition: height linear 0.5s; 
} 

.toggle-content.ng-hide { 
    height: 0; 
}

当然你切换内容的工具条中需要一个md-button。

<md-button ng-click="open = !open"> 
    Toggle 
</md-button>

完整的示例：http://codepen.io/kuhnroyal/pen/XXZPrE

来源

2016-01-24 12:32:52 kuhnroyal

嗨@kuhnroyal，谢谢你的例子。我试图用你的例子。但是当我不在CSS中添加高度：200像素时，过渡不是动画效果。切换内容仅在没有任何动画的情况下消失。任何想法为什么？ – Ravi

@Ravi因为高度是动画的属性，所以如果删除它，整个事情当然不起作用。 – kuhnroyal

如果没有提供高度，它是否不会将元素的当前高度作为默认高度？我想不是。但是有没有办法用自定义高度（自定义高度为0，然后是0到自定义高度切换）与上面示例中的固定高度相比来管理动画？ – Ravi

您需要实施类似于中的slideToggle()方法。 Angular Slideables指令提供了此功能。

直角是除md-toolbar指令以外实现的自定义样式。

来源

2016-01-23 21:10:31 gnerkus

我跳了更多的东西“外的即用”。就像ui-bootstrap提供的手风琴一样。 –

事实证明，这是我设法找到的最适合我需要的东西。

'use strict'; 
 
angular.module('ui', ['ui.bootstrap']); 
 

 

 
(function() { 
 
    
 
    angular.module('ui', [ 
 
    "ui.bootstrap", 
 
     "ngAnimate" 
 
     ]); 
 
    
 
    var module = angular.module("ui"); 
 
    module.controller("controller", function($scope) { 
 

 
    var model = this; 
 
    model.oneAtATime = true; 
 

 
    model.Operators = [{ 
 
     ReportItemName: "asd" 
 
    }, { 
 
     ReportItemName: "fds" 
 

 
    }]; 
 
    }); 
 
}());

<!DOCTYPE html> 
 
<html ng-app="ui"> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script> 
 
    <script data-require="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
    <script data-require="[email protected]" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script> 
 
    <script data-require="[email protected]" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-controller="controller as model"> 
 
    <uib-accordion close-others="model.oneAtATime"> 
 
     <uib-accordion-group heading="Custom template"> 
 
     <uib-accordion-heading> 
 
      I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
 
     </uib-accordion-heading> 
 
     <h1>Some Content</h1> 
 
     </uib-accordion-group> 
 
    </uib-accordion> 
 
    </div> 
 
</body> 
 

 
</html>

其他的解决方案，提供了即装即用的功能都非常欢迎。

来源

2016-01-24 11:18:32

角材料：基本用法模板

回答

相关问题