为 Angular 项目混合引导程序和谷歌材料

Question

我正在使用 Material 和 Flex，例如 @angular/material 和 @angular/flex-layout

我将 flex 用于响应式布局。

我正在寻找一种优雅的方式来处理诸如边距之类的简单事情。

我知道我可以只添加一些 CSS，但它需要是响应式的，也许我不希望在较小的屏幕等上留有余量，我可以再次使用 CSS 来做到这一点，但 CSS 越多，我就越不重视从框架中获取。

我发现使用 bootstrap 效果很好，但我也读到混合 bootstrap 和材料不是一个好主意。

这是我的代码

<div class="m-md-2">
    <div fxLayout="row wrap" fxLayoutGap="10px grid">
        <div fxFlex="25"  fxFlex.sm="33.3" fxFlex.xs="50" *ngFor="let dashboardAppPart of dashboardAppParts">
             ....
        </div>
    </div>
</div>

将 bootstrap 与 material / flex 混合是否存在问题，或者这可以通过纯 flex 来完成吗？

Answer 1

理想情况下，您应该尽量避免同时使用两者，但如果在任何情况下您确实需要将引导程序与 Material 一起使用，则只能导入您实际想要使用的某些方面，例如排版或网格系统，而不是导入完整的引导样式。

您还应该避免导入 bootstrap.js（负责处理引导模式和下拉菜单的工作）或 JQuery，因为两者都直接操作 DOM，这可以被认为更像是 Angular 的反模式，而不是优化的 DOM 操作。

您还可以查看一些针对 Angular 的引导程序重写，其中有一些不错的，例如ng-bootstrap.

现在来到特定的共享场景，这可以在不使用引导程序的情况下实现，因为 flex 布局已经公开了专门的 ngClass 和 ngStyle 指令，这些指令非常适合处理反应式布局。以下是如何实现这一点的示例，

ngClass.xs="list-custom"

这是一个有效的stackBlitz，展示了这种行为，

<mat-list ngClass.xs="list-custom">
    <h3 mat-subheader>Notes</h3>
    <mat-list-item *ngFor="let note of notes">
        <mat-icon mat-list-icon>note</mat-icon>
        <h4 mat-line fxFlex="100">{{note.name}}</h4>
        <p mat-line fxFlex="100"> {{note.updated | date}} </p>
    </mat-list-item>
</mat-list>

它正在行动中，

在我的示例中，.list-custom 只是添加了一点边距和背景，但是您可以使用这些反应性指令来实现您想要的，最好的事情是您不必编写自定义媒体查询。另外我希望你知道你可以在 flex 布局中引入自定义断点；例如比如说xxxl 用于特殊处理某个分辨率，您甚至可以将这些自定义断点与这些反应性指令结合起来，例如ngClass.xxxl 和ngStyle.xxxl。

请阅读 docs 到 flex-layout ngClass 指令和其他受支持的指令 check this out。