javascript - 如何使用 Angular Material 在绝对位置创建可折叠 div

Question

我正在尝试使用 Angular-Material 创建一个可折叠的 div，它应该固定在左下角，如下图所示。

这真的可能吗？

Answer 1

您必须使用 CSS - CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill>
  <div id="chatWindow" layout="column" style="height:{{status==='Open'?'50px':'200px'}}">
    <md-button ng-click="toggle()">{{status}}</md-button>
  </div>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope) {
  $scope.status = "Open";
  $scope.toggle = function () {
    $scope.status = ($scope.status === "Open") ? "Close" : "Open";
  }
});

CSS

body {
  background: purple;
}

#chatWindow {
  display: block;
  width: 300px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: yellow;
}