在角度材料设计中调整 sidenav 的大小栏. [英] resize bar for sidenav in angular material design.

问题描述

角度材料中是否有调整 sidenav 大小的指令?

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

我使用了以下

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

我在下面找到的

Angular JS 可调整大小的 div 指令

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

<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="数据中的客户端"><md-item-content><md-button ng-click="selectClient(client);">{{客户名称}}</md-button></md-item-content></md-item></md-list></md-sidenav><div id="sidebar-resizer"调整器=垂直"调整器宽度=6"resizer-left="#sidenav"resizer-right="#primary-col"resizer-max="400">
<!-- 视口列--><div layout="column" flex class="content-wrapper" id="primary-col"><div id="viewPort" ng-view></div>

谢谢

解决方案

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

Angularjs 版本使用 1.3.15，Angular material design 版本使用的是 0.9.8..

在 IE10+ 和 chrome 中测试.

这是 Git 中心链接

<块引用>

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

这是可用的 codepen 示例

<块引用>

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

PS-我的 r-flex 有问题，所以我将它设置为 false.它工作正常.

Is there a directive in angular material to resize 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.

I used the following

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.

<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

解决方案

Found a snippet that can help add resize where ever required and this works well with the Angular Material Design.

Angularjs version used 1.3.15 and Angular material design version Used is 0.9.8..

Tested in IE10+ and chrome.

Here is the Git hub link

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

And here is the working codepen example

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

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

这篇关于在角度材料设计中调整 sidenav 的大小栏.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！