7
votes

Redimensionner la barre pour Sidenav en matière de matériau angulaire.

Y a-t-il une directive dans des matériaux angulaires pour redimensionner Sidenav?

Il y a un Sidenav qui montre la liste des clients et le volet de droite présente les détails du client. J'essaie d'ajouter une barre de redimensionnement entre eux.

J'ai utilisé ce qui suit

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

que j'ai trouvé dans ce qui suit

J'ai essayé après l'exemple ci-dessus Plunker, mais le Sidenav jamais redimensionné. Le volet de droite se déplace correctement mais le volet gauche reste inchangé. xxx

merci

javascript css angular-material angularjs angularjs-directive

0 commentaires

4 Réponses :

1
votes

'largeur', 'max-largeur' et 'min-largeur' tous sont définis sur 304px pour MD-Sidenav à l'intérieur de matériaux angulaires.css. Vous devez écraser les valeurs de largeur maximale et min dans YR Custom.CSS

matériau.css

2 commentaires

Je pense que remplacer leur CSS est recherché sur un hack. Quoi qu'il en soit, merci pour l'aide.

Vous pouvez le faire dans votre propre CSS, rien de mal à cela.

9
votes

a trouvé un extrait qui peut aider à ajouter à redimensionner si nécessaire et cela fonctionne bien avec la conception de matériau angulaire.

La version angularjs utilisée 1.3.15 et la version de conception de matériau angulaire utilisée est de 0,9,8 .. < p> Testé dans IE10 + et chrome.

Voici la liaison de hub git

https://github.com/reklino/angular-Resisable
et voici l'exemple de code de fonctionnement

http://codepen.io/reklino/pen/raraxq xxx

1 commentaires

J'ai eu le même problème et j'ai trouvé la même directive. Cependant, avez-vous reçu la directive ressixable pour travailler avec le MD-Sidenav? J'ai obtenu les "directives multiples demandant une erreur nouvelle / isolée". J'ai fait une directive personnalisée pour le réparer, mais s'il y a un moyen de travailler avec la directive sévère originale, je serais intéressé à savoir comment vous l'avez fait. Merci!

0
votes

Pour répondre à @leolozes: il m'a fallu un moment (et une pause-café) pour comprendre la solution. Vous devez essentiellement envelopper le Sidenav avec une autre div une autre divisible comme celle-ci xxx

0 commentaires

1
votes

Voici comment j'ai construit une simple barre latérale en angulaire, vous pouvez également construire des choses similaires à l'aide d'angularjs ou de JavaScript. J'ai utilisé CSS Flexbox modèle (qui a un Peu de propriétés redimensionnables) Dans cet exemple avec une combinaison d'événements de souris.

Voici le modèle HTML: P>

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

0 commentaires