角材料 - 从底部的sidenav？答案

【问题标题】：angular material - sidenav from the bottom?角材料 - 从底部的sidenav？
【发布时间】：2017-02-15 11:10:16
【问题描述】：

Angular材质sidenav似乎有一个左/右选项：

&lt;md-sidenav class="md-sidenav-**right**"&gt;
&lt;md-sidenav class="md-sidenav-**left**"&gt;

虽然叫"side"-nav，是不是可以当成"bottom"-nav使用？

如果可以，怎么办？

【问题讨论】：

向我们展示您的具体要求是什么？一些代码或小提琴？

标签： javascript html angularjs angular-material sidebar

【解决方案1】：

没有你说的底部导航，但你可以使用https://material.angularjs.org/latest/demo/bottomSheet

查看

<div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center" >
    <md-button flex="50" class="md-primary md-raised" ng-click="showBottomSheet()">Show</md-button>
  </div>

$scope.showBottomSheet = function() {
    $scope.alert = '';
    $mdBottomSheet.show({
      templateUrl: 'bottom-sheet-template.html',
      controller: 'BottomSheetCtrl'
    }).then(function(clickedItem) {
      $scope.alert = clickedItem['name'] + ' clicked!';
    });
  };

【讨论】：

【解决方案2】：

角材质不支持底部导航..你必须手动实现它。

【讨论】：

【解决方案3】：

我认为您想要实现的目标可以通过覆盖角度材料样式来满足您的需求。只需将一些自定义类或 id 添加到 <md-sidenav> 元素并应用您的样式。

【讨论】：