шкала изменения размера для сиденва в конструкции углового материала.

Есть ли директива в угловом материале для изменения размера 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>

Спасибо

источник

2015-05-05 user4321

Нашел фрагмент, который может помочь добавить изменение размера, где когда-либо требуется, и это хорошо работает с угловым Material Design.

Angularjs используется версия 1.3.15 и версия дизайна Угловая Используемый материал 0.9.8 ..

Испытано в IE10 + и хрома.

Вот ссылка Гита ступицы

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

У меня такая же проблема, и я нашел ту же директиву. Однако вы получили директиву resizable для работы с md-sidenav? Я получил сообщение «Несколько директив, запрашивающих новую/изолированную область». Я сделал специальную директиву, чтобы исправить это, но если есть способ работать с оригинальной изменяемой по размеру директивой, мне было бы интересно узнать, как вы это сделали. Благодаря! – LeoLozes

'ширина', 'макс ширину' и 'мин-ширина' все устанавливаются на 304px для мд-sidenav внутри углового-material.css. Вам необходимо перезаписать максимальные значения & мин ширина в годе custom.css

material.css

источник

2015-05-07 07:27:25 nitin

Я думаю, что переопределение их css требуется для взлома. В любом случае спасибо за помощь. – user4321

Вы можете сделать это в своем собственном css, ничего страшного в этом. –

Чтобы ответить @LeoLozes: Мне потребовалось некоторое время (и кофе-брейк), чтобы выяснить решение. Вы в основном должны обернуть sidenav с помощью другого 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

шкала изменения размера для сиденва в конструкции углового материала.

ответ

Смежные вопросы