Максимум 4 столбца на строку Угловой материал 2 FlexLayout - PullRequest
Новая
       11

Максимум 4 столбца на строку Угловой материал 2 FlexLayout

0 голосов
/ 04 сентября 2018

У меня проблема с Angular Material 2 и flexLayout, я что-то не понял: как начать новую строку после 4 столбцов?

Я бы хотел что-то вроде этого:

enter image description here

Пока что я использовал трубу среза, чтобы получить первую строку (одна кнопка, три элемента), но у меня проблема с другими строками.

Я хотел бы начать новую строку, когда у меня есть 4 столбца. Как мне этого добиться?

Вот код: 

<div fxFlexFill>
                        <div fxFlexFill fxLayout="row" fxLayoutWrap fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid">
                            <div fxFlex="25">
                                <div fxFlexFill fxLayoutAlign="center center">
                                    <mat-card (click)="addAdvert()" class="mat-card-add">
                                        <div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%">
                                            <span style="font-size:32px;text-align:center">+<br />Ajouter une publicité</span>
                                        </div>
                                    </mat-card>
                                </div>
                            </div>
                            <div fxFlex="25" *ngFor="let product of products | slice:0:3">
                                <div style="border:1px solid #ccc" fxFlexFill fxLayoutAlign="center center">
                                    <mat-card>
                                        <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
                                        <mat-card-title>{{product.designation}}</mat-card-title>
                                        <mat-card-content>
                                            <p>
                                                {{product.description}}
                                            </p>
                                        </mat-card-content>
                                        <mat-divider [inset]="true"></mat-divider>
                                        <mat-card-actions align="end">
                                            <button mat-button>LIKE</button>
                                            <button mat-button>SHARE</button>
                                        </mat-card-actions>
        
                                    </mat-card>
                                </div>
                            </div>
                        </div>
                        <div fxFlexFill fxLayout="row" fxLayoutWrap fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid">
                            <div fxFlex="25" *ngFor="let product of products | slice:3; let i = index">
                                <div style="border:1px solid #ccc" fxFlexFill fxLayoutAlign="center center">
                                    <mat-card>
                                        <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
                                        <mat-card-title>{{product.designation}}</mat-card-title>
                                        <mat-card-content>
                                            <p>
                                                {{product.description}}
                                            </p>
                                        </mat-card-content>
                                        <mat-divider [inset]="true"></mat-divider>
                                        <mat-card-actions align="end">
                                            <button mat-button>LIKE</button>
                                            <button mat-button>SHARE</button>
                                        </mat-card-actions>
        
                                    </mat-card>
                                </div>
                            </div>
                        </div>
                    </div>

Большое спасибо!

1 Ответ

0 голосов
/ 01 января 2019

Если вы используете материал Angular 7+ со степпером и вам нужна предыдущая и следующая кнопки в том же ряду, но одна кнопка начинается слева, а другая справа. Используйте код ниже. 

<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%"
                         fxLayoutAlign="center">
                        <div fxFlex=50%">
                            <div fxLayout="row" fxLayoutAlign="start none">
                                <button mat-raised-button type="button" fxFlexAlign="start none" color="primary"
                                        matStepperPrevious>
                                    Previous
                                </button>
                            </div>
                        </div>
                        <div fxFlex="50%">
                            <div fxLayout="row" fxLayoutAlign="end end">
                                <button mat-raised-button type="button" fxFlexAlign="end end" color="accent"
                                        matStepperNext [disabled]="frmStepTwo.invalid">
                                    Next
                                </button>
                            </div>
                        </div>
                    </div>
...