<!DOCTYPE html>
<html ng-app="materialChips">
<head>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script data-require="angular-animation@*" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular-animate.js"></script>
<script data-require="angular-aria@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular-aria.js"></script>
<link data-require="angular-material@0.9.0" data-semver="0.9.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css" />
<link data-require="font-awesome@4.3.0" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script data-require="angular-material@0.9.0" data-semver="0.9.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>
<script data-require="underscore.js@1.5.2" data-semver="1.5.2" src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="AppController">
<md-toolbar class="md-primary">
<h2 class="md-toolbar-tools">
<span>Angular Material Bottomsheet</span>
</h2>
</md-toolbar>
<md-button id="btnShareMenu" name="btnShareMenu" style="margin-top: 2%;" class="md-icon-button" aria-label="Social Share Menu" ng-click="showListBottomSheet($event)">
<span class="fa fa-ellipsis-v"></span>
</md-button>
</body>
</html>
// Code goes here
var app = angular.module('materialChips', ['ngMaterial']).
controller('AppController', function($scope, $mdBottomSheet) {
$scope.showListBottomSheet = function($event) {
$mdBottomSheet.show({
//template: '<md-bottom-sheet class="md-grid md-has-header"><md-subheader>Share</md-subheader><md-list><md-list-item ng-repeat="item in items"><md-button class="md-grid-item-content" ng-click="listItemClick($index)"><i class="item.icon"></i><div class="md-grid-text"> {{ item.name }} </div></md-button></md-list-item></md-list></md-bottom-sheet>',
templateUrl: 'template.html',
controller: 'GridBottomSheetCtrl',
targetEvent: $event
}).then(function(clickedItem) {
//$scope.alert = clickedItem.name + ' clicked!';
});
};
})
.controller('GridBottomSheetCtrl', function($scope, $mdBottomSheet) {
$scope.items = [
{ icon: 'fa-twitter', class: 'md-primary md-hue-2' },
{ icon: 'fa-google-plus', class: 'md-warn md-hue-2' },
{ icon: 'fa-facebook', class: 'md-primary' },
{ icon: 'fa-linkedin', class: 'md-primary' }
];
$scope.listItemClick = function($index) {
var clickedItem = $scope.items[$index];
$mdBottomSheet.hide(clickedItem);
};
});
/* Styles go here */
<md-bottom-sheet class="md-grid">
<md-subheader>Share</md-subheader>
<md-button ng-repeat="item in items" class="md-grid-item-content"
ng-class="item.class" ng-click="listItemClick($index)" style="padding: 10px;">
<i class="fa fa-4x" ng-class="item.icon"></i>
</md-button>
</md-bottom-sheet>