在 angular material 设计中调整 sidenav 栏的大小。

Question

angular material 中是否有调整 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>

谢谢

Answer 1

'width'、'max-width' 和 'min-width' 都为 angular-material.css 中的 md-sidenav 设置为 304px。您需要在 yr custom.css

中覆盖最大和最小宽度值

Answer 2

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

Angularjs 使用的版本是 1.3.15 和 Angular material 使用的设计版本是 0.9.8..

已在 IE10+ 和 chrome 中测试。

这里是 Git 枢纽 link

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.

Answer 3

回答@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>

Answer 4

这是我在 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 flexboxes。 :)

 .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;
 }

在 angular material 设计中调整 sidenav 栏的大小。

resize bar for sidenav in angular material design.

javascript

css

angularjs

angularjs-directive

angular-material