Смешивание bootstrap и материалов Google для Angular проектов - PullRequest
Новая
       7

Смешивание bootstrap и материалов Google для Angular проектов

1 голос
/ 23 января 2020

Я использую Material и Flex и, например, @angular/material и @angular/flex-layout

Я использую flex для макетов, которые реагируют.

Я ищу элегантный способ сделать простые вещи как поля.

Я знаю, что мог бы просто добавить немного CSS, но тогда оно должно быть реактивным, может быть, я не хочу поля на меньших экранах и т. д. c, опять же, я мог бы просто сделать это с CSS, но чем больше CSS I, тем меньше я получаю от фреймворка.

Я обнаружил, что использование 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 с материалом / flex или это можно сделать с помощью чистого flex?

1 Ответ

3 голосов
/ 23 января 2020

В идеале Вы должны стараться избегать одновременного использования обоих, но если в любом случае вам действительно нужно использовать bootstrap с Материалом, вы можете импортировать только тот аспект, который вы действительно хотите использовать, например, типографику или систему координат. импорта полных bootstrap стилей.

Также следует избегать импорта bootstrap. js (который отвечает за обработку рабочих bootstrap модальных и выпадающих меню) или JQuery, так как оба непосредственно манипулируют DOM, который можно рассматривать скорее как анти-шаблон для Angular вместо оптимизированных манипуляций с DOM.

Вы также можете взглянуть на некоторые из bootstrap переписываний для angular, есть несколько хороших например, ng- bootstrap.

Теперь, перейдя к конкретному c общему сценарию, этого можно достичь без использования bootstrap, поскольку гибкий макет уже предоставляет специализированные * Директивы 1009 * и 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>

и вот оно в действии,

enter image description here

В моем примере .list-custom is только добавляя немного поля и фона, но вы можете использовать эти реактивные директивы для достижения того, что вы когда-либо хотели, самое лучшее в этом то, что вам не нужно писать собственные медиа-запросы. Кроме того, я надеюсь, что вы знаете, что вы можете ввести собственные точки останова, а также в гибкий макет; например, скажите xxxl для специальной обработки определенного разрешения, вы даже можете комбинировать эти пользовательские точки останова с этими реактивными директивами, такими как ngClass.xxxl и ngStyle.xxxl.

, читайте документы для директивы flex-layout ngClass и других поддерживаемых директив проверьте это .

...