是否有角度材料的指令来调整sidenav的大小?
有一个sidenav显示客户端列表,右侧窗格显示客户端的详细信息。我想在它们之间添加一个调整大小栏。
我使用了以下
http://plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview
我在下面的
中找到了Angular JS resizable div directive
我尝试按照上面的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>
谢谢
答案 0 :(得分:8)
找到一个可以帮助在需要时添加调整大小的片段,这适用于Angular Material Design。
Angularjs版本使用1.3.15和Angular材料设计版本使用是0.9.8 ..
在IE10 +和chrome中测试。
这是Git中心链接
这是工作的代码集示例
PS-I had issues with the r-flex so I set it to false.It worked fine.
答案 1 :(得分:1)
'width','max-width'和'min-width'都被设置为304px。 你需要覆盖max&amp; yr custom.css中的最小宽度值
答案 2 :(得分:1)
这是我如何用 angular 构建一个简单的侧边栏,您也可以使用 angularjs 或 javascript 构建类似的东西。我在这个例子中使用了 CSS flexbox 模型(它有一些可调整大小的属性)和鼠标事件的组合。
这是 HTML 模板:
<div class="main-container" (mouseup)="changeResizeMode(false)" (mousemove)="changeLeftContainerWidth($event)" (mouseleave)="changeResizeMode(false)">
<div class="left-container" [style.flex-basis]="leftContainerWidth">
<!-- This is the left bar -->
</div>
<div class="resize-handle" (mousedown)="changeResizeMode(true)" (mouseup)="changeResizeMode(false)" [style.background-color]="highlightHandle">
<div>||</div>
</div>
<div class="right-container">
<!-- This is the right bar -->
</div>
</div>
这是打字稿代码,我使用 $event 对象捕获鼠标指针的 x 坐标。
leftContainerWidth: string = '33vw';
mouseDownOnHandle: boolean = false;
highlightHandle: string = 'blue';
changeResizeMode(value: boolean): void{
this.mouseDownOnHandle = value;
if(value===true)
this.highlightHandle = 'green';
else
this.highlightHandle = 'blue';
}
changeLeftContainerWidth(event: MouseEvent): void{
if(this.mouseDownOnHandle)
this.leftContainerWidth = event.clientX - 10 + "px";
}
最后是 CSS 代码,实现 CSS flexbox。 :)
.main-container{
display: flex;
height: 500px;
}
.left-container{
flex-grow: 0;
flex-shrink: 0;
}
.resize-handle{
flex: 0 0 20px;
cursor: col-resize;
display: flex;
align-items: center;
justify-content: center;
}
.right-container{
flex: 1 1 50vw;
}
答案 3 :(得分:0)
回答@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>