barra di ridimensionamento per sidenav in materiale angolare.

Esiste una direttiva in materiale angolare per ridimensionare il sidenav?barra di ridimensionamento per sidenav in materiale angolare.

C'è un sidenav che mostra l'elenco dei client e il riquadro destro ha i dettagli del client. Sto cercando di aggiungere una barra di ridimensionamento tra di loro.

Ho usato il seguente

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

che ho trovato nella seguente

Angular JS resizable div directive

Ho provato seguendo l'esempio plunker sopra ma il sidenav mai ridimensionato. Il riquadro destro si sposta a destra ma il riquadro sinistro rimane invariato.

<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>

Grazie

fonte

2015-05-05 user4321

Trovato un frammento che può aiutare aggiungere ridimensionamento dove mai richiesto e questo funziona bene con l'Angolare Material Design.

versione

Angularjs utilizzato 1.3.15 e la versione di progettazione materiale angolare Used è 0.9.8 ..

testato in IE10 + e cromo.

Ecco il link hub Git

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

E qui è il lavoro esempio codepen

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

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

fonte

2015-06-19 16:04:31 user4321

Ho avuto lo stesso problema e ho trovato la stessa direttiva. Tuttavia, hai ottenuto la direttiva ridimensionabile per lavorare con md-sidenav? Ho ricevuto l'errore "Direttive multiple che richiedono un nuovo scope isolato". Ho fatto una direttiva personalizzata per risolverlo, ma se c'è un modo per lavorare con la direttiva ridimensionabile originale, sarei interessato a sapere come lo hai fatto. Grazie! – LeoLozes

'width', 'max-width' e 'min-width' tutti sono impostati a 304px per MD-sidenav all'interno angolare material.css. È necessario sovrascrivere massimi valori & min larghezza in yr custom.css

material.css

fonte

2015-05-07 07:27:25 nitin

credo ignorando il loro css si chiede di un hack. Comunque grazie per l'aiuto. – user4321

Puoi farlo nel tuo css, niente di sbagliato in questo. –

Per rispondere a @LeoLozes: Mi ci è voluto un po '(e una pausa caffè) per capire la soluzione. Che, fondamentalmente, deve avvolgere il sidenav con un altro div che è ridimensionabile come questo

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

fonte

2017-07-21 01:33:27 dhwang

barra di ridimensionamento per sidenav in materiale angolare.

risposta

Problemi correlati