4 votes

La mise en page d'Angular Material se brise lors de l'utilisation d'UI-Router

J'utilise Angular Material 1.1.0 avec UI-Router 1.0.0-beta.1 dans mon projet Angular 1.5 et UI-Router semble casser la fonctionnalité flexbox.

La présentation index.html s'étire et remplit le conteneur lorsqu'elle ne contient pas d'élément UI-Router. Lorsque j'ajoute <div ui-view="container"></div> la mise en page est interrompue.

Flex fonctionne quand je l'ai fait :

<body ng-app="app" layout="column" ng-cloak>
  <div layout="row" flex>
    <div flex class="red">First item in row</div>
    <div flex class="blue">Second item in row</div>
  </div>
</body>

enter image description here

Lorsqu'il est inspecté, il affiche que la classe flex est ajoutée :

<div layout="row" flex= class="layout-row flex">
   <div flex class="red flex">First item in row</div>
   <div flex class="blue flex">Second item in row</div>
</div>

Mais lorsque j'ajoute UI-Router, il affiche deux lignes en haut de la page et les éléments ne sont pas flexibles verticalement. Le code dans index.html :

<body ng-app="app" layout="column" ng-cloak>
  <div class="gradient flex">
    <div ui-view="container" flex></div>
  </div>
</body>

Et dans le conteneur :

<div layout="row" flex>
  <div flex class="red">First item in row</div>
  <div flex class="blue">Second item in row</div>
</div>

enter image description here

Lorsqu'on l'inspecte, on s'aperçoit qu'il manque la classe flex :

<div class="gradient flex">
  <!-- uiView: container -->
  <div ui-view="container" flex class="ng-scope flex">
    <stream class="ng-scope ng-isolate-scope">
      <div layout="row">
        <div flex class="red">First item in row</div>
        <div flex class="blue">Second item in row</div>
      </div>
    </stream>
  </div>
</div>

Je suis conscient que la disposition n'affecte que la direction du flux pour les enfants immédiats de ce conteneur et que UI-Router ajoute <stream class="ng-scope ng-isolate-scope"> . Comment puis-je ajouter la classe flex aux vues UI-Router ?

1voto

JeremyGranger Points 13

Sans aller trop loin dans le trou du lapin, j'ai essentiellement résolu mon problème en utilisant cette convention :

<body ng-app="app" layout="column">
  <!-- Top tool bar (top of screen) -->
  <md-toolbar></md-toolbar>

  <!-- This div holds both my sidenav and main content -->
  <div flex layout="row">

    <!-- This is my sidenav -->
    <md-sidenav>...</md-sidenav>

    <!-- This is my main content, fit into an ng-view element -->
    <div flex ng-view></div>
</div>

Que se passe-t-il donc ici ? Je veux que ma barre d'outils (en haut) soit en colonne avec ma navigation latérale et mon contenu principal. Puisque je traite <body> comme élément parent, je lui attribue l'attribut layout=column . Maintenant que j'ai la barre d'outils en haut et que l'outil <div> qui contient à la fois la navigation latérale et le contenu principal empilés en dessous dans une "colonne", je veux faire ceci <div> une rangée afin de pouvoir empiler la barre de navigation et le contenu principal côte à côte. Le parent <div> qui détient ces titres layout=row . Les enfants de cette <div> sont le sidenav et le contenu principal, ils reçoivent donc l'attribut flex . Remarquez que je n'ai pas précisé flex sur le md-sidenav ; Angular Material s'en charge pour moi. Ouf C'était un peu long. Regardez cela et voyez si cela a du sens. Je serais également ravi de vous aider à résoudre ce problème sur un JSFiddle ou un Plnkr. Faites-le moi savoir !

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X