javascript - Angular Material 设计中 sidenav 的调整栏大小。

Question

Angular Material 中是否有调整 sidenav 大小的指令？

有一个 sidenav 显示客户端列表，右侧 Pane 包含客户端的详细信息。我正在尝试在它们之间添加一个调整大小栏。

我用了下面的

http://plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview

这是我在下面找到的

Angular JS resizable div directive

我尝试按照上面的 plunker 示例进行操作，但 sidenav 从未调整过大小。右 Pane 向右移动，但左 Pane 保持不变。

<div layout="row" flex>

        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" id="sidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
            <md-list class="sideBar">
                <md-item ng-repeat="client in data">
                    <md-item-content>
                        <md-button ng-click="selectClient(client);" >

                                {{client.name}} 
                        </md-button>
                    </md-item-content>
                </md-item>
            </md-list>
        </md-sidenav>

        <div id="sidebar-resizer" 
        resizer="vertical" 
        resizer-width="6" 
        resizer-left="#sidenav" 
        resizer-right="#primary-col"
        resizer-max="400">
    </div>
    <!-- viewport column -->

    <div layout="column" flex class="content-wrapper" id="primary-col">
        <div id="viewPort" ng-view></div>
    </div>
 </div> 

谢谢

Answer 1

找到了一个片段，可以帮助在任何需要的地方添加调整大小，这与 Angular Material Design 配合得很好。

使用的 Angularjs 版本为 1.3.15，使用的 Angular Material 设计版本为 0.9.8..

在 IE10+ 和 chrome 中测试。

这是 Git 中心链接

https://github.com/Reklino/angular-resizable

这是工作代码笔示例

http://codepen.io/Reklino/pen/raRaXq

PS-I had issues with the r-flex so I set it to false.It worked fine.