Usando Bootstrap para Angular e Design de Materiais para Angular juntos

Eu estou trabalhando em um projeto com este modelo .

O modelo é escrito usando AngularJs e Bootstrap-UI (bootstrap para angular) e eu gostaria de include alguns elementos de Material Design como cartões e outros.

É possível fazer isso? é recomendado? Minha coisa é que nós já amamos esse modelo e o caminho para muitos elementos dele, mas o Material Design tem cartões, menus suspensos, inputs de texto com o label de animação etc, por exemplo, que são incríveis.

Então minha pergunta é:

AngularJS + Bootstrap para Angular + Design de Materiais para Angular = Awesomeness ou Desastre?

Se você adicionar bootstrap e material angular, isso é o que acontecerá

  1. Ambos têm CSS que irá direcionar seus elementos front-end (por exemplo, input
    elemento, botões)

  2. Cada um tem sua própria aparência (ou seja, o elemento de input Bootstrap é diferente do elemento de input de Material). Portanto, seu projeto geral não terá uma única aparência.

  3. Se você adicionar ambos você terá que cuidar de estilos css substituindo outros em partes comuns (por exemplo, tamanho da fonte e família de fonts).

  4. O material angular manipula os elementos front end de maneira angular (diretiva) Então, quando eles lançarem uma nova versão (29 lançamentos até agora), você terá que gastar algum tempo testando seu código anterior (por exemplo, eles mudaram $ media para $ mdMedia para manipular sideMenu) . Eu passei muito tempo tentando descobrir porque meu SideMenu parou de funcionar!

  5. O tamanho geral das dependencies do projeto aumentará se você estiver usando duas estruturas front-end.

    O material angular precisa de suas próprias dependencies, como ‘anular-animado’ e ‘angular-ária’.

Falando sobre o seu “md-cards” existem “painéis” no bootstrap que você pode querer dar uma olhada aqui

Eu recomendaria que você se atenha a uma coisa, seja bootstrap ou angular-material. Ambos são impressionantes apenas não misturá-los.

Recentemente, escrevi uma postagem no blog sobre como replace o Bootstrap pelo Angular-Material. É baseado no framework de kickstarter que eu estou usando, mas ele fará o trabalho que você está procurando.

Muito parecido com @nitin disse, será desafiador implementar ambos. O que eu realmente pedia para você pensar, independentemente de ser possível, é por que você iria querer as duas coisas?

O objective de ambos é fornecer um estilo geral de interface do usuário comum, mas eles são conceitualmente contrapostos um ao outro, em vez de algo que poderia funcionar em conjunto.

Eu recomendo que você comece a ler mais sobre design de materiais nos guias do google antes de pular para a direita.

Eu escrevi Angular Bootstrap Material, que é uma versão AngularJS do tema de design de material do Bootstrap . Elimina a dependência do jQuery e do JavaScript do bootstrap. E suporta validação de formulário usando ng-messages .

Você pode instalar a partir do bower via bower install abm .

Como você já está usando o UI Bootstrap, a única dependência adicional será o css do tema de design de material de boot e as Mensagens angulares


Abaixo está uma demonstração básica de validação de formulário:

 angular.module('angularBootstrapMaterialDocs', ['angularBootstrapMaterial', 'ui.bootstrap']); angular.module('angularBootstrapMaterialDocs') .controller('validationDemoCtrl', ['$scope', function($scope) { $scope.user = { name: "", notifications: {} } $scope.errorMap = { required: "This field is mandatory", email: "Please enter a valid email" } $scope.change = function() { console.log($scope); } } ]); 
 .container-fluid { background-color: #fff; 
           
Create Account
{{user | json}}

Você também pode tentar este projeto de material angular Bootstrap , eles têm o maior número de componentes em comparação com outras estruturas.

Em relação à resposta à nitina:

  1. Em relação ao 1,2 e 3 – o MDB vem com módulos sass para que você possa definir se deseja usar lib inteiro ou determinados módulos. O MDB sobrescreve todos os componentes nativos do Bootstrap, portanto, um aplicativo tem uma aparência consistente
  2. Todos conhecemos a dificuldade de alterar a syntax, verificar o changelog do MDB, ele sempre fornece uma diretriz interessante sobre como quebrar alterações, documentos legados e, muitas vezes, compatibilidade retroativa por meio de poucas liberações para ter tempo de migrar.
  3. Em relação ao quinto e mais pontos – como o MDB sobrescreve os elementos personalizados, há uma pegada menor

O MDB oferece alguns resources e componentes estendidos, embora sejam pagos. No entanto versão básica está disponível gratuitamente (MIT), então você deve definitivamente experimentá-lo.

Recentemente, analisei esse problema também. Existe uma nova versão do Angular que é Angular 5. Mas não é fácil encontrar componentes com boa aparência para esta versão do angular que foi lançada há algumas semanas.

O material angular é baseado principalmente no layout flexível. Você deve verificar se isso é restrição para você. Se você usar apenas componentes de input e não integrar nenhuma outra estrutura de bootstrap javascript (como ng-bootstrap), isso deve funcionar.

Porque os componentes de material não definem nenhuma mudança em nenhum estilo nativo (ele ainda não possui nenhuma implementação normalize.css). Se você verificar um tema de estilo de material, por exemplo, https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css, você não encontrará nenhum estilo para tags nativas.

O que você deve prestar atenção é não usar ambos os estilos no mesmo elemento, por exemplo, o seguinte não funcionará como desejado

  

Se você usar um componente de material, deverá usar um estilo específico de material nesse componente. por exemplo

  

Use pacote de material angular para elementos de formulário. Use bootstrap css grid para design responsivo. https://www.npmjs.com/package/@zirafa/bootstrap-grid-only