javascript - Angular Material md-slider : Vertical Slider will not work in md-sidenav

Question

实际行为:

有什么问题吗？ *md-slider 无法垂直放置在 md-sidenav https://material.angularjs.org/latest/demo/sidenav material.angularjs.org/latest/demo/slider

预期的行为是什么？当我将 md-vertical 属性添加到 md-slider 时，它在项目的任何部分都将是垂直的，但是当放置在 md-sidenav 中时，它会保持水平

Plnkr 显示问题 https://embed.plnkr.co/7lBplI/详细信息:请注意，当侧边栏打开时，md-slider 是水平的而不是垂直的，尽管具有垂直属性 Angular 版本:* Angular 版本:1.5.3 Angular Material 版本:1.0.9附加信息:

浏览器类型:* chrome:最新版本浏览器版本: * Chrome:最新操作系统:* Mac:OSX 10.10.5

Answer 1

我认为这是因为您使用的是旧版本的 Angular Material。根据 angular-material.js 文件的 header ，它显示版本 v0.5.1。我认为您已将所有缩小的 JS 文件合并到 docs.js 中，并且无法看到其中的版本或 angular-material.min.js。

我已经剥离了你的示例 - Plunker - 匹配工作 CodePen例子。正如您所看到的，CodePen 按预期工作。

将 Angular Material 更新到最新版本 (v1.1.0)，它应该可以正常工作。

CodePen 标记

<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" md-disable-backdrop="" md-whiteframe="4">
  <div layout-padding="" ng-controller="LeftCtrl">
    <md-slider-container flex>
      <md-slider ng-model="vol" min="0" max="100" aria-label="volume" id="volume-slider" class="md-accent" md-vertical md-range>
      </md-slider>
  <h5>Volume</h5>
  </md-slider-container>
    <p hide="" show-gt-md="">
      This sidenav is locked open on your device. To go back to the default behavior,
      narrow your display.
    </p>
  </div>
</md-sidenav>

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