如何使用 angular material 创建一个 collapsable/expandable 开锁 sidenav

Question

我想要一个带有 angular material 的 sidenav，它有 2 种状态：折叠（仅显示项目的图标）和展开（显示标签 + 图标）。示例行为如 at the RDash Dashboard 所示，不幸的是 bootstrap 完成了。

由于angular material的默认sidenav没有提供那个功能，所以我想自己做。

我有 2 个关于如何做的想法：

1) 使用 2 种不同的侧边导航：一种用于折叠，一种用于展开。然后在它们之间切换打开锁定或者只是 hiding/showing 一次一个。

2) 仅使用 1 个 sidenav。以某种方式以编程方式更改宽度和 sidenav 的项目并保持打开锁定。

我最喜欢的方法是 2，但我想知道是否有更好的方法可以用 angular material 实现这种 sidenav？

Answer 1

我认为方法 2 是最好的 - CodePen

标记

<div ng-controller="AppCtrl" layout="column" style="height:500px;" ng-cloak="" class="sidenavdemoBasicUsage" ng-app="MyApp">
  <section layout="row" flex="">
    <md-sidenav class="md-sidenav-left" md-component-id="left" md-whiteframe="4" id="leftSideNav">
      <md-toolbar class="md-theme-indigo" layout="row">
        <h1 class="md-toolbar-tools">Sidenav Left</h1>
        <span flex></span>
        <md-button ng-click="toggleExpand()">{{toggleExpandButtonLabel}}</md-button>
      </md-toolbar>
      <md-content layout-padding="">
        <md-button ng-click="close()" class="md-primary">
          Close Sidenav Left
        </md-button>
      </md-content>
    </md-sidenav>

    <md-content flex="" layout-padding="">
      <div layout="column" layout-align="top center">
        <div>
          <md-button ng-click="toggleLeft()" class="md-primary">
            Toggle left
          </md-button>
        </div>
      </div>
    </md-content>
  </section>
</div>

JS

angular
  .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('AppCtrl', function ($scope, $timeout, $mdSidenav, $log, $element) {
    $scope.toggleLeft = buildToggler('left');
    $scope.toggleExpandButtonLabel = "Expand";
    var sideNav = angular.element($element[0].querySelector('#leftSideNav'));

    $scope.toggleExpand = function () {
      if ($scope.toggleExpandButtonLabel == "Expand") {
        sideNav.css("width", "500px")
      }
      else {
        sideNav.css("width", "320px")
      }
      $scope.toggleExpandButtonLabel = ($scope.toggleExpandButtonLabel == "Expand") ? "Collapse" : "Expand";
    }

    $scope.close = function () {
      $mdSidenav('left').close();
      $scope.toggleExpandButtonLabel = "Expand";
      sideNav.css("width", "320px")
    };

    function buildToggler(navID) {
      return function() {
        $mdSidenav(navID)
          .toggle()
          .then(function () {
            $log.debug("toggle " + navID + " is done");
          });
      }
    }
});

如何使用 angular material 创建一个 collapsable/expandable 开锁 sidenav

how to create a collapsable/expandable open-locked sidenav with angular material

angularjs

angular-material