如何使用角材料在绝对位置创建可折叠 div

Question

I am trying to create a collapsible div using angular-material which should be fixed to the bottom left corner like shown on the image below.

Is that actually possible?

Answer 1

Yes, it is doable. There is a github repository if you want to implement chat window like you are saying.

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

But, if you want to tweak yourself then here is the code for collapsable div. Good luck.

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

Answer 2

You would have to use CSS - CodePen

Markup

<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;
}