角度材料設計中的sidenav調整大小欄。

角度材料中是否存在調整sidenav大小的指令？角度材料設計中的sidenav調整大小欄。

有一個sidenav顯示客戶端列表，右窗格包含客戶端的詳細信息。我正試圖在它們之間添加一個調整大小欄。

我用下面

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

我在下面

我試圖按照上述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>

謝謝

來源

2015-05-05 user4321

發現了一個片段，可以幫助補充何地需要這工作得很好與角料設計調整大小。

Angularjs版本1.3.15使用和角度的材料設計使用的版本是0.9.8 ..

經測試，在IE10 +和鉻。

這裏是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.

來源

2015-06-19 16:04:31 user4321

我得到了同樣的問題，並發現相同的指令。但是，您是否獲得了可調整大小的指令以使用md-sidenav？我得到了「Multiple directives requests new/isolated scope」錯誤。我做了一個自定義指令來解決它，但是如果有一種方法可以處理原始的可調整大小的指令，我會對你知道你是如何做到的感興趣。謝謝！ – LeoLozes

'寬度'， '最大寬度' 和 '最小寬度' 所有都設置爲304px爲角material.css內部MD-sidenav。您需要在年覆蓋最大&最小寬度值custom.css

material.css

來源

2015-05-07 07:27:25 nitin

我認爲覆蓋他們的css是被黑客攻擊的。無論如何感謝您的幫助。 – user4321

你可以在你自己的CSS中做到這一點，沒有錯。 –

要回答@LeoLozes：我花了一段時間（和一個休息時間）找出解決方案。你基本上必須用另一個div來包裹這個可調整大小的div。

<div resizable r-directions="['left']" r-flex="false"> 
    <md-sidenav layout="row" class="md-sidenav-right md-whiteframe-2dp" ...> 
    </md-sidenav> 
</div>

來源

2017-07-21 01:33:27 dhwang

角度材料設計中的sidenav調整大小欄。

回答

相關問題