Eckiges Material $ mdBottomSheet - horizontal in Thumbnail und Text aufgeteilt

Question

Ich implementiere Angular Material (AM) in der Anwendung Cordova/Phonegap. Ich brauche AM Bottom Blatt zu verwenden, wo seine Vorlage in bestimmten Reihenfolge eingestellt: ich einen Behälter haben, in zwei Teile geteilt, wobei:

• Der linke Teil ist ein Miniaturbild (Platz), wo passt das untere Blatt Höhe und Thumbnail Breite entspricht der Thumbnail-Höhe
• Der rechte Teil ist ein Textcontainer, in den die Höhe des Bottom Sheet passt und dessen Breite den Rest der Breite des Bottom Sheet berücksichtigt.

Das Bild unten zeigt den unteren Blatt Behälter Split:

Ich hoffe, das über scharfkantiges Material-Layout erreicht werden konnte, aber kein Glück so weit. Jede Hilfe würde sehr geschätzt werden!

Answer 1

Hier gehen Sie - 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) { 
});