Angel Todorov Angel Todorov - 29 days ago 17
AngularJS Question

Angular Material $mdBottomSheet - split into thumbnail and text horizontally

I am implementing Angular Material (AM) in Cordova / Phonegap application. I need to use AM Bottom Sheet where its template is adjusted in certain order:
I have one container, split into two parts where:


  • Left part is a thumbnail (square) where fits the Bottom Sheet height and thumbnail width is equal to the thumbnail height

  • Right part is a text container where fits the Bottom Sheet height and its width takes the remaining from the Bottom Sheet width.



The image below illustrates the Bottom Sheet container split:

enter image description here

I hope this could be achieved via Angular Material Layout, but no luck so far.
Any help would be greatly appreciated!

Answer

Here you go - CodePen

Markup

<div ng-controller="BottomSheetExample" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
  <md-button flex="50" class="md-primary md-raised" ng-click="showListBottomSheet()">Show bottom sheet</md-button>

  <script type="text/ng-template" id="bottom-sheet-template.html">
    <md-bottom-sheet>
      <div style="height:150px" layout="row">
        <div style="background:green; width:150px"></div>
        <div style="background:orange" flex></div>
      </div>
    </md-bottom-sheet>
  </script>
</div>

CSS

md-bottom-sheet {
  padding-left: 0;
  padding-top: 0;
  padding-right: 0;
  margin-bottom: -10px;
  border: none;
  background-color: transparent;
}

JS

angular.module('MyApp',['ngMaterial'])
.controller('BottomSheetExample', function($scope, $mdBottomSheet) {
  $scope.showListBottomSheet = function() {
    $mdBottomSheet.show({
      templateUrl: 'bottom-sheet-template.html',
      controller: 'BottomSheetCtrl'
    });
  };
})

.controller('BottomSheetCtrl', function($scope, $mdBottomSheet) {
});
Comments