Angular Material 2 карты с гибким макетом накладываются друг на друга

Я пытаюсь заставить карты Angular Material 2 работать с использованием flex-layout, так что по мере изменения размера браузера количество столбцов, которые я отображаю, изменяется. Я пытаюсь добиться чего-то похожего на то, как работает Google Keep.

<div *ngIf="condition == true">
    <div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="start start" fxLayoutGap="15px" >
        <md-card fxFlex="calc(25%+15px)" *ngFor="let d of details">
            <md-card-content>
                Content
            </md-card-content>
        </md-card>
    </div>
</div>    
<button md-button (click)="condition = !condition">Toggle</button>

Запустив этот плункер, вы можете увидеть, что когда когда-нибудь понадобится серия карт Angular Material чтобы обернуть, они немного перекрываются.

Кто-нибудь знает, что мне нужно сделать с flex-layout, чтобы в следующей строке был какой-то запас между элементами? У них есть атрибут fxLayoutGap, но, похоже, он работает только с желобами между объектами, непосредственно примыкающими к содержимому, а не ниже или выше.


angular angular-material2 angular-flex-layout
person Johnathon Sullinger    schedule 01.04.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Джонатон, я чувствую твою боль. Даже без использования flex-layout я изо всех сил пытался заставить md-карты вести себя полностью так, как я хочу, но я скажу, что это можно сделать, но часто в ущерб ремонтопригодности и экономии времени.

Я не реализовал flex-layout для каких-либо собственных целей, так как некоторое время использовал flex-подход в основном CSS.

Это не плагин для моего сайта, но это лучший пример, который я могу вам предложить: http://www.weo3.com — вы увидите на целевой странице, что раздел «Работа» состоит из карточек. Эти карточки основаны на подходе Material Design, но урезаны до сущности макета, которую я хотел.

Вот CSS, который я использовал для задания интервалов между ними и их отзывчивости — и обратите внимание, что «работа» — это родительский контейнер для карточек!

.work {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.card {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.card .card-content {
  flex: 1;
  padding: 0.25em 0.3em 0;
}

.card .card-content p {
  font-size: 1em;
  line-height: 1.2;
  margin-bottom: 0.5em;
}


@media only screen and (min-width: 37.50em) {
  .card {
    max-width: calc(50% - 20px);
  }
}

@media only screen and (min-width: 75em) {
  .card {
    width: calc(33.33333% - 20px);
  }
}

Надеюсь, как вы видите, одним из основных механизмов, помогающих карточкам сохранять свое место, является вычисление ширины, которое напрямую связано с объявлением полей. Таким образом, если вы хотите, чтобы поля составляли 10 пикселей с каждой стороны карты, тогда ширина должна рассчитываться в процентах от экрана, который вы хотите занять на карте, минус величина поля, умноженная на два.

FWIW, то, что я обнаружил, используя MaterialDesign2, заключается в том, чтобы либо быть полностью довольным его поведением, либо минимизировать его влияние, чтобы наслаждаться им.

MaterialDesign2 все еще находится в стадии бета-тестирования, поэтому, продвигаясь вперед с такими кодовыми базами, помните, что, возможно, потребуется внести коррективы для поддержания целостности ваших проектов по мере того, как эти кодовые базы растут и совершенствуются.

person weo3dev    schedule 03.04.2017