如何使用角材料在絕對位置創建可折疊 div

Question

我正在嘗試使用 angular-material 創建一個可折疊的 div，它應該固定在左下角，如下圖所示。

這真的可能嗎？

Answer 1

是的，這是可行的。 如果你想像你說的那樣實現聊天窗口，有一個 github 存儲庫。

https://github.com/irontec/angular-bootstrap-simple-chat

但是，如果你想調整自己，那么這里是collapsable div 的代碼。 祝你好運。

http://jsfiddle.net/hungerpain/eK8X5/7/

Answer 2

你將不得不使用 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;
}