Как правильно использовать @ angular / flex-layout?

Я создаю веб-приложение, используя @ angular / flex-layout.

Я стараюсь оставлять поля 5% слева и справа, когда экран меньше 600 пикселей (xs). Он работает правильно на больших экранах (когда есть fxLayout="row"-layout), но не в xs и fxLayout="column"-ситуациях.

Это демонстрация в Plunker.

Вопрос: как сделать так, чтобы div не заполняли оставшееся пространство справа, а занимали только 90% со смещением 5% влево и вправо?


angular flexbox angular-flex-layout
person Enzo Volkmann    schedule 18.07.2017    source источник

Ответы (2)


arrow_upward
5
arrow_downward

В конце концов, я использовал тот же подход, что и @Nehal, но вместо ngStyle.xs я использовал ngClass.xs, и он заработал нормально.

<div fxLayout.xs="column"
     fxLayout.gt-xs="row"
     fxFlex.xs="grow"
     fxFlex.gt-xs="grow">
  <div ngClass.xs="section-title-xs-margin"
       fxFlex.xs="90"
       fxFlex.gt-xs="25"
       fxFlex.gt-sm="20"
       fxFlexOffset.xs="5"
       fxFlexOffset.gt-xs="5"
       fxFlexOffset.gt-sm="10">
    Left / Top
  </div>
  <div ngClass.xs="content-xs-margin"
       fxFlex.xs="90"
       fxFlex.gt-xs="63"
       fxFlex.gt-sm="55"
       fxFlexOffset.xs="5"
       fxFlexOffset.gt-xs="2"
       fxFlexOffset.gt-sm="5">
    Right / Bottom
  </div>
</div>

И в CSS:

.section-title-xs-margin {
  margin-right: 5%;
}

.content-xs-margin {
  margin-right: 5%;
}
person Enzo Volkmann    schedule 22.07.2017

arrow_upward
4
arrow_downward

Я отредактировал ваш плункер и заставил его работать с помощью [ngStyle.xs].

код:

@Component({
  selector: 'test-app',
  template: `
  <div fxLayout.xs="column"
     fxLayout.gt-xs="row"
     class="containerX"
     [ngStyle.xs]="{'width.%': 90, 'margin-left.%': 5, 'margin-right.%': 5}"
     style="background-color: grey">
    <div style="background-color: blue"
         fxFlex.xs="90"
         fxFlex.gt-xs="25"
         fxFlex.gt-sm="20"
         fxFlexOffset="5"
         fxFlexOffset.gt-xs="5"
         fxFlexOffset.gt-sm="10">
      Left / Top
    </div>
    <div style="background-color: red"
         fxFlex.xs="90"
         fxFlex.gt-xs="63"
         fxFlex.gt-sm="55"
         fxFlexOffset="5"
         fxFlexOffset.gt-xs="2"
         fxFlexOffset.gt-sm="5">
      Right / Bottom
    </div>
</div>
`,
  styles: [`
    .containerX {
      border: solid 1px #b6b6b6;
      background: skyblue;
      height: 200px;
      width: 100%;
    }`
]
})
export class TestApp {

}

демонстрация

Надеюсь это поможет!

person Nehal    schedule 18.07.2017
comment
Это не работает должным образом с вашим подходом. По какой-то причине xs-стили не применялись к div. Тем временем я сам нашел решение, используя ngClass.xs. Спасибо за ваше время! - person Enzo Volkmann; 22.07.2017