首页 文章

角度材料：基本用法模板

提问于
浏览 次
2

我非常想在我的角度应用程序中集成 Basic Usage template 来自Angular Materials .
enter image description here

单击 <> 时，我非常喜欢过渡效果 .

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

有关如何实现这一目标的任何建议？

angularjs angular-material

3 回答

  • 0

    你可以用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

    回复于
  • 0

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

    直角是除了 md-toolbar 指令之外实现的自定义样式 .

    回复于
  • 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>

    其他提供开箱即用功能的解决方案非常受欢迎 .

    回复于

相关问题