Angular FlexLayout 卡相同布局
Angular FlexLayout Cards same Layout
我对这个主题很陌生,目前正处于项目的第一次尝试中。所以我希望你能帮助我:)
我正在使用带有垫卡的 FlexLayout,前三个元素按预期工作。但是,最后一个元素的高度与其他元素不一样,我无法解决这个问题。
这是我的代码:
<div class="container" fxLayout="row wrap" fxLayoutGap="16px grid">
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard></ra-doughnutcard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard></ra-doughnutcard>
</div>
<div fxFlex="40%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-linecard></ra-linecard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-listcard></ra-listcard>
</div>
</div>
Listcard-Component-html:
<mat-card class="mat-elevation-z5">
<mat-card-title>
<h5>Text</h5>
</mat-card-title>
<mat-card-content>
<mat-list-item *ngFor="let item of items"> {{ item }} </mat-list-item>
</mat-card-content>
</mat-card>
没有标签 ra-listcard 它似乎工作。我也尝试了 FlexLayout 的拉伸对齐但没有成功。我认为作为父容器的 ra-listcard 设置了错误的高度,我该如何解决这个问题?
在 CSS 中只有 h5 大小和文本对齐设置。
我的猜测是在 ra-listcard
组件样式中声明以下内容:
:host {
display: block;
}
mat-card {
height: 100%;
}
有关简化版本,请参阅 https://angular-9-material-starter-5k4ugj.stackblitz.io。
在 Clemens Sums 回答的帮助下,我了解了如何在父容器上设置属性,并且找到了解决我的问题的方法:
:host {
display: flex;
height: 100%;
}
mat-card {
width: 100%;
}
您可以在您的标签中添加 fxFlex
,以便它们占用所有可用的 space,如下所示:
<div class="container" fxLayout="row wrap" fxLayoutGap="16px grid">
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard fxFlex></ra-doughnutcard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard fxFlex></ra-doughnutcard>
</div>
<div fxFlex="40%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-linecard fxFlex></ra-linecard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-listcard fxFlex></ra-listcard>
</div>
</div>
我对这个主题很陌生,目前正处于项目的第一次尝试中。所以我希望你能帮助我:)
我正在使用带有垫卡的 FlexLayout,前三个元素按预期工作。但是,最后一个元素的高度与其他元素不一样,我无法解决这个问题。
这是我的代码:
<div class="container" fxLayout="row wrap" fxLayoutGap="16px grid">
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard></ra-doughnutcard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard></ra-doughnutcard>
</div>
<div fxFlex="40%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-linecard></ra-linecard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-listcard></ra-listcard>
</div>
</div>
Listcard-Component-html:
<mat-card class="mat-elevation-z5">
<mat-card-title>
<h5>Text</h5>
</mat-card-title>
<mat-card-content>
<mat-list-item *ngFor="let item of items"> {{ item }} </mat-list-item>
</mat-card-content>
</mat-card>
没有标签 ra-listcard 它似乎工作。我也尝试了 FlexLayout 的拉伸对齐但没有成功。我认为作为父容器的 ra-listcard 设置了错误的高度,我该如何解决这个问题?
在 CSS 中只有 h5 大小和文本对齐设置。
我的猜测是在 ra-listcard
组件样式中声明以下内容:
:host {
display: block;
}
mat-card {
height: 100%;
}
有关简化版本,请参阅 https://angular-9-material-starter-5k4ugj.stackblitz.io。
在 Clemens Sums 回答的帮助下,我了解了如何在父容器上设置属性,并且找到了解决我的问题的方法:
:host {
display: flex;
height: 100%;
}
mat-card {
width: 100%;
}
您可以在您的标签中添加 fxFlex
,以便它们占用所有可用的 space,如下所示:
<div class="container" fxLayout="row wrap" fxLayoutGap="16px grid">
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard fxFlex></ra-doughnutcard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-doughnutcard fxFlex></ra-doughnutcard>
</div>
<div fxFlex="40%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-linecard fxFlex></ra-linecard>
</div>
<div fxFlex="20%" fxFlex.sm="100%" fxFlex.xs="100%">
<ra-listcard fxFlex></ra-listcard>
</div>
</div>