Angular Material 2 md卡响应列

发布时间：2020-12-17 17:29:19 所属栏目：安全来源：网络整理

导读：我正在寻找这种布局的Angular 2/4示例.我需要从两列牌开始(左侧2个,右侧1个).但是,如果屏幕很小,它们应该折叠到一列.我可以在带有div的CSS中完成它,但在Material 2中必须有一个简单的方法 – 有很多Material 1的例子. 这段代码改编自Angular Material 1答案,

我正在寻找这种布局的Angular 2/4示例.我需要从两列牌开始(左侧2个,右侧1个).但是,如果屏幕很小,它们应该折叠到一列.我可以在带有div的CSS中完成它,但在Material 2中必须有一个简单的方法 – 有很多Material 1的例子.

这段代码改编自Angular Material 1答案,但它不起作用(我将“row”更改为“column”,希望这样可行,但我只得到一列有三张牌)：

how do i create a grid of cards with angular material?

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 1</h2>
      </md-card-content>
    </md-card>

    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Left Card 2</h2>
      </md-card-content> 
    </md-card>
</div>

<div class='md-padding' layout="column" layout-wrap>
    <md-card flex="40" flex-sm="80">
      <md-card-content>
        <h2>Right Column </h2>
      </md-card-content>
    </md-card>
</div>

从答案：“在这个例子中,你将有两张牌(每张40％),当屏幕调整到-sm时,牌将达到80％.”

解决方法

首先,在您的应用中添加@ angular / flex-layout包.阅读有关 “flex-layout”的更多信息.然后,您需要在app.module.ts导入条目中导入FlexLayoutModule：

import { FlexLayoutModule } from '@angular/flex-layout';

....
@NgModule({
    imports: [
        // other modules
        // .....
        FlexLayoutModule
    ],....

然后,您可以在应用中使用“flex-layout”.要像上面提到的那样使卡片响应,您可以使用以下模板：

<div fxLayout="row" fxLayout.xs="column">
    <md-card fxFlex="40%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Left Card 1</h2>
        </md-card-content>
    </md-card>

    <md-card fxFlex="40%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Left Card 2</h2>
        </md-card-content>
    </md-card>

    <md-card fxFlex="20%;" fxFlex.xs="80%">
        <md-card-content>
            <h2>Right Column </h2>
        </md-card-content>
    </md-card>
</div>

链接到stackblitz demo.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!