CODEWITHSUNDEEP
angularjsangular-material
Radu Cojocari
Radu Cojocari

Reputation: 1779

Angular materials : Basic Usage template

I would very much like to integrate in my angular app the Basic Usage template from Angular Materials.enter image description here

I really like the transition effect when the <> is clicked.

I already did a search for that directive on their website but did not find it. The closest thing I managed to find is the Toolbar, but it's slightly different in the way that the upper corners are not rounded. Also, using a simple ng-show, will not provided that transition.

Any suggestions on how to achieve this?

Upvotes: 2

Views: 957

Answers (3)

kuhnroyal
kuhnroyal

Reputation: 7553

You can do that with angular animations which is just some simple CSS with transitions. And you are on the right track with md-toolbar. The demos use it, you just need to set some CSS to round the top corners.

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

Now add some content below the md-toolbar that you want to toggle and use ng-show on it.

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

Then just check the ngShow documentation on how to animate it with CSS. What you want to animate here is the height of the toogle-content element. When it is hidden, height: 0 is applied, otherwise 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;
}

And of course you need a md-button in the toolbar that toggles the content.

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

Complete example: http://codepen.io/kuhnroyal/pen/XXZPrE

Upvotes: 2

Radu Cojocari
Radu Cojocari

Reputation: 1779

It turns out this is the closest thing that I managed to find that suits my needs.

'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="jquery@*" 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>

Other solutions that provide out-of-the-box functionality are very much welcomed.

Upvotes: 0

gnerkus
gnerkus

Reputation: 12019

You need to implement something akin to the slideToggle() method in jquery. The Angular Slideables directive provides this functionality.

The straight corners are a custom style implemented in addition to the md-toolbar directive.

Upvotes: 0

Related Questions