Угловая гибкая компоновка: дизайн Святого Грааля - PullRequest
Новая
       7

Угловая гибкая компоновка: дизайн Святого Грааля

0 голосов
/ 03 марта 2019

Я пытаюсь создать простую страницу, используя Angular Flex Layout.(На самом деле я удаляю Bootstrap из приложения, потому что я использую Angular Material и чувствую, что смешивать их нехорошо).Моя цель состоит в том, чтобы настроить главную страницу с помощью «Макета Святого Грааля», просто имея верхний и нижний колонтитулы, содержимое и нижний колонтитул. 

|------------------------------------|
|              Header                |
|------------------------------------|
|                                    |
|              Content               |
|                                    |
|------------------------------------|
|              Footer                |
|------------------------------------|

Ниже приведен код

app.component.html 

<div class="main-container" fxLayout="column">
  <div fxFlex="none">
    <app-header></app-header>
  </div>
    <div fxFlex>
      <router-outlet></router-outlet>
    </div>
  <div fxLayout="row" fxLayoutAlign="start end">
    <div fxFlex>
      <app-footer></app-footer>
    </div>
  </div>
</div>

app.component.css 

.main-container {
  min-height: 100vh;
  border:1px solid black;
}

home.component.html 

<div>
  home works!
</div>

home.component.css 

div {
  margin: 1px 0px 1px 0px;
  padding: 1px;
  border: 1px solid blue;
  height: 100%;
}

Я ожидал, что домашний компонент занимает 100% высоты родителя, но, как мы видим по синемурамка на скриншоте чуть ниже не отвечает на это.

enter image description here

Элемент div home-component вставляется под углом с ожидаемым элементом, чтоне имеет стайлинга.Но это ни в коем случае не должно влиять на дочерние элементы.

Если я устанавливаю высоту div на home-компоненте, скажем, 200px (height: 200px), то он увеличивается, но мне нужно, чтобы он занимал 100%родительский элемент определен в app.component-html.

Другой подход

Я пытался не принимать во внимание элемент (аналогичный код был заменен наdiv с идентификатором «content»), но результат тот же:

app-component.html 

<div class="main-container" fxLayout="column" fxLayoutAlign="start stretch">
  <div fxFlex="none">
    <app-header></app-header>
  </div>
      <div id="content" fxFlex fxFlexAlign="stretch" fxLayout="row" fxLayoutAlign="start center" style="height: 100%">
        <div fxFlex="auto" style="height: 100%; border: 1px solid black; padding: 2px">
          col 1
        </div>

        <div fxFlex="4 0 auto" style="height: 100%; border: 1px solid black; padding: 2px">
          col 2
        </div>
      </div>
  <div fxLayout="row" fxLayoutAlign="start end">
    <div fxFlex>
      <app-footer></app-footer>
    </div>
  </div>
</div>

Лучшее, чего удалось добиться, - это центрироватьdiv с идентификатором «content», но он не занимает 100% высоты своего родителя, как показано на рисунке ниже:

enter image description here

Я быложидая, что fxFlexAlign = "stretch" или даже fxLayoutAlign = "start stretch" вместо fxLayoutAlign = "start center" в div "content" заставит его занять высоту 100%.

Может кто-нибудь заметить и /или объясните мне, что я делаю не так?Это хороший подход?Есть ли лучший или умный способ сделать это?

Я использую официальную документацию https://github.com/angular/flex-layout/wiki/fxFlex-API

Может кто-нибудь указать мне пример в интернете?Я не смог найти его с помощью Angular Flex Layout.

Спасибо

1 Ответ

0 голосов
/ 04 марта 2019

ОК, я попытался воспроизвести вашу проблему на Stackblitz, и вот результат: Stackblitz ЗДЕСЬ

app.component.html: 

<div fxFlexFill fxLayout="column" style="padding: 5px">
  <div fxFlex="none" style="border:2px solid black;">
    <app-header></app-header>
  </div>

    <div fxFlex style="border:2px solid black;">
      <router-outlet></router-outlet>
    </div>

  <div fxFlex="none"style="border:2px solid black;">
    <app-footer></app-footer>
  </div>
</div>

home.component.html: 

<div fxFill fxLayout="row">
  <div fxFlex style="border: 1px solid blue; padding: 2px">
    col 1
  </div>

  <div fxFlex="70" style="border: 1px solid blue; padding: 2px">
    col 2
  </div>
</div>

DEMO:

enter image description here

И все это было сделано с помощью Flex-Layout.Я надеюсь, что это поможет вам.

PS: Вы должны быть осторожны, чтобы не изменить высоту, это может быть проблемой с Flex-Layout.Используйте «fxFlex», «fxFill» или «fxFlexFill» instead.( Документация )

Я видел, что вы используете "fxFlexAlign", но я не думаю, что он существует для Flex-Layout.Вы должны использовать "fxLayout" и "fxLayoutAlign", чтобы поместить их в колонку или онлайн.Вот сайт, который мне очень помог для Flex-Layout ( Angular Flex-Layout Demos )

На самом деле я удаляю Bootstrap из приложения, потому что я использую Angular Materialи чувствую, что смешивать их нехорошо

Это правда, что использование обоих не обязательно очень хорошо, особенно если вы используете загрузчик "col" с "flex" из Flex- Макет, но некоторые вещи начальной загрузки остаются полезными для использования в качестве «margin» или «padding», которые очень просты.Так что я продолжаю в том же духе.

...