javascript 在角度材料设计中调整 sidenav 的大小栏。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30058517/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
resize bar for sidenav in angular material design.
提问by user4321
Is there a directive in angular material to resize sidenav?
角度材料中是否有调整 sidenav 大小的指令？
There is a sidenav which shows list of clients and the right pane has the details of the client. I am trying to add a resize bar between them.
有一个 sidenav 显示客户端列表，右侧窗格包含客户端的详细信息。我正在尝试在它们之间添加一个调整大小栏。
I used the following
我使用了以下
http://plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview
http://plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview
which i found in the following
我在下面找到的
Angular JS resizable div directive
I tried following the above plunker example but the sidenav never resized. The right pane moves right but the left pane remain unchanged.
我尝试按照上面的 plunker 示例进行操作，但 sidenav 从未调整大小。右窗格向右移动，但左窗格保持不变。
<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>
Thank you
谢谢
回答by user4321
Found a snippet that can help add resize where ever required and this works well with the Angular Material Design.
找到了一个片段，可以帮助在需要的地方添加调整大小，这与 Angular Material Design 配合得很好。
Angularjs version used 1.3.15 and Angular material design version Used is 0.9.8..
Angularjs 版本使用 1.3.15 和 Angular material design 版本使用是 0.9.8..
Tested in IE10+ and chrome.
在 IE10+ 和 chrome 中测试。
Here is the Git hub link
这是 Git 中心链接
And here is the working codepen example
这是有效的 codepen 示例
PS-I had issues with the r-flex so I set it to false.It worked fine.
回答by nitin
'width', 'max-width' and 'min-width' all are set to 304px for md-sidenav inside angular-material.css. You need to overwrite max & min width values in yr custom.css
对于 angular-material.css 中的 md-sidenav，'width'、'max-width' 和 'min-width' 都设置为 304px。您需要覆盖 yr custom.css 中的最大和最小宽度值
回答by dhwang
To answer @LeoLozes: It took me a while (and a coffee break) to figure out the solution. You basically have to wrap the sidenav with another div that is resizable like this
回答@LeoLozes：我花了一段时间（和喝咖啡休息时间）才找到解决方案。您基本上必须用另一个可调整大小的 div 包裹 sidenav
<div resizable r-directions="['left']" r-flex="false">
<md-sidenav layout="row" class="md-sidenav-right md-whiteframe-2dp" ...>
</md-sidenav>
</div>
