Angular materials : 基本用法模板

Question

我非常想在我的 angular 应用程序中集成 基本用法模板 来自 Angular Materials.

我很喜欢点击<>时的过渡效果。

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

关于如何实现这一点有什么建议吗？

Answer 1

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

直角是 md-toolbar 指令之外的自定义样式。

Answer 2

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

'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="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <script data-require="angular-animate@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
  <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script data-require="ui-bootstrap@0.14.3" 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="ui-bootstrap-tpls-0.11.2.min.js@0.14.3" 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>

非常欢迎提供 out-of-the-box 功能的其他解决方案。

Answer 3

您可以使用 angular animations 来做到这一点，这只是一些带有过渡的简单 CSS。 md-toolbar 你走在正确的轨道上。演示使用它，你只需要设置一些 CSS 来圆顶角。

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

现在在要切换的 md-toolbar 下方添加一些内容，然后在其上使用 ng-show。

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

然后只需查看 ngShow 文档，了解如何使用 CSS 对其进行动画处理。您要在此处设置动画的是 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

Angular materials : 基本用法模板

Angular materials : Basic Usage template

angularjs

angular-material