Я знаю Bootstrap, могу ли я использовать компоненты MD Bootstrap или Angular Material в одном проекте? - PullRequest
Новая
       27

Я знаю Bootstrap, могу ли я использовать компоненты MD Bootstrap или Angular Material в одном проекте?

0 голосов
/ 28 июня 2019

Я довольно давно знаком с Bootstrap.Я только изучаю Angular и сейчас смотрю на MD Bootstrap и Angular Material .

Но я немного растерялся.Могут ли эти две платформы, в частности их компоненты, использоваться в качестве дополнения с помощью Bootstrap?

Я знаю, что их можно использовать вместо Bootstrap, но что, если мне нравится Bootstrap и я просто хочу использовать 2 компонента из Angular Material?

ex.sidenav

Bootstrap не имеет нативного sidenav, поэтому я пытаюсь посмотреть, сработает ли sidenav Angular Meterials ...

Ответы [ 3 ]

1 голос
/ 28 июня 2019

MD Bootstrap и Угловой материал - это два разных пакета, пытающихся достичь одного и того же, обеспечить готовые компоненты.

В текущих сценариях разработки нет явной необходимости использовать Bootstrap, как в старые добрые времена. Теперь большую часть времени Bootstrap используется для структурирования макетов, и вы можете получить урезанную версию начальной загрузки, если хотите использовать ее только для макетов (bootstrap-grid.min.css). Кроме того, Bootstrap пытается поддерживать большинство браузеров, включая IE10 и 11.

С другой стороны, Angular Material фокусируется на компонентах и ​​их поведении. И работает в основном во всех современных браузерах (Chrome, в основном Chrome) и почти ничего не дает, когда дело доходит до макетов. Он поддерживает темы, индивидуальные стили и т. Д.

Вы можете использовать оба в своем проекте, оба они стабильны и имеют большую поддержку сообщества. Но они очень разные по-своему. Возможно, вам лучше использовать только один из них.

Но если вам действительно нужен какой-то компонент, вы все равно можете импортировать отдельный модуль из материала Angular, нет необходимости импортировать весь модуль материала и использовать его, что обеспечивает минимальный размер пакета. Поэтому я бы посоветовал вам использовать MD-bootstrap в качестве библиотеки основных компонентов, а импортировать можно 2 или 3 компонента из материала Angular. Вам нужно будет добавить собственные стили для угловых компонентов материала.

1 голос
/ 28 июня 2019

Я пробовал кое-что с начальной загрузкой вместе с материалом.

Вы можете построить несколько вещей вместе.

Посмотрите на это сообщение в блоге: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

Там объясняется, как вы можете создавать хорошие вещи из обоих вместе с Scss.

Мне понравилось решение, позволяющее объединить все вспомогательные классы начальной загрузки с материалом.

А теперь вопрос, почему кто-то должен это делать?

Поскольку у bootstrap есть много очень хороших помощников, базовых стилей и особенно лучших reboot.scss, расширенных из normalize.css. Есть и другие хорошие вещи, такие как помощники flex-box, может быть, также чистая система решеток CSS.

С помощью SCSS вы можете импортировать только те детали, которые вам нужны, и это очень крутая вещь - не импортировать все.

Вот моя рабочая база SCSS, просто вытяните нужные части из начальной загрузки:

_variables.scss 

$link-color: #3f51b5;
$link-hover-color: currentColor;
$link-hover-decoration: none;

_reset.scss 


* {
  &:active,
  :focus {
    outline: none !important;  // 1
  }
}

label {
  margin-bottom: 0; // 2
}


a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
  color: #3f51b5; // 3
}

main.scss 

@import 'variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/utilities';
@import 'reset';

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();

// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the default theme styles.
@include angular-material-theme($candy-app-theme);

// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
}


// Your styles
1 голос
/ 28 июня 2019

Да, вы можете использовать Angular Material в качестве дополнения к начальной загрузке.

Я лично использую Таблица угловых материалов

с динамической загрузкой данных во многих моих проектах.

Я также использую автозаполнение компонента углового материала.

И самое приятное, что эти компоненты легко настраиваются .

...