在角材料设计中调整 sidenav 的大小。

Posted 2023-03-06

【中文标题】在角材料设计中调整 sidenav 的大小。

【英文标题】：resize bar for sidenav in angular material design.

【发布时间】：2015-07-15 12:20:45

【问题描述】：

角度材料中是否有调整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- 
        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> 

谢谢

【参考方案1】：

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

使用的Angularjs版本是1.3.15，使用的Angular材料设计版本是0.9.8..

在 IE10+ 和 chrome 中测试。

这是 Git 中心链接

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

这是工作的 codepen 示例

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

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

【讨论】：

我遇到了同样的问题并找到了相同的指令。但是，您是否获得了可调整大小的指令来与 md-sidenav 一起使用？我收到“请求新/隔离范围的多个指令”错误。我做了一个自定义指令来修复它，但是如果有办法使用原始的可调整大小的指令，我很想知道你是如何做到的。谢谢！

【参考方案2】：

'width', 'max-width' 和 'min-width' 都设置为 304px 用于 angular-material.css 中的 md-sidenav。 您需要覆盖 yr custom.css 中的最大和最小宽度值

【讨论】：

我认为覆盖他们的 css 是一种黑客行为。无论如何感谢您的帮助。

你可以在自己的 css 中做到这一点，没有错。

【参考方案3】：

这是我如何用 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;
 

【参考方案4】：

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