angularjs - bootstrap - ng-href angular 5
Uso de Bootstrap para diseño angular y material para angular juntos (5)
Estoy trabajando en un proyecto con esta template .
La plantilla está escrita usando AngularJs y Bootstrap-UI (bootstrap para angular) y me gustaría incluir algunos elementos de diseño de materiales como tarjetas y otros.
¿Es posible hacer eso? se recomienda Lo mío es que ya amamos esta plantilla y muchos elementos de ella, pero Material Design tiene tarjetas, menús desplegables, entradas de texto con la animación de la etiqueta, etc., por ejemplo, que son increíbles.
Entonces mi pregunta es:
AngularJS + Bootstrap para Angular + Diseño de materiales para Angular = ¿Awesomeness o desastre?
He escrito
Angular Bootstrap Material,
que es una versión AngularJS del
tema de diseño de material Bootstrap
.
Elimina la dependencia de jQuery y JavaScript de bootstrap.
Y admite la validación de formularios usando
ng-messages
.
Puede instalar desde bower a través de
bower install abm
.
Como ya está utilizando UI Bootstrap, la única dependencia adicional será el tema de diseño de material de arranque css y los mensajes angulares
A continuación se muestra una demostración básica de validación de formularios:
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;
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script>
<script src="https://rawgit.com/tilwinjoy/angular-bootstrap-material/master/dist/angular-bootstrap-material.min.js"></script>
<div class="container-fluid" ng-app="angularBootstrapMaterialDocs">
<div class="row" ng-controller="validationDemoCtrl">
<div class="col-xs-12 col-sm-6">
<form name="signup">
<abm-form-group error-messages="errorMap">
<label data-abm-label type="floating">Name</label>
<input type="text" name="name" class="form-control" abm-form-control ng-model="user.name" required>
</abm-form-group>
<abm-form-group error-messages="errorMap">
<label data-abm-label>Email</label>
<input type="email" name="email" class="form-control" placeholder="[email protected]" abm-form-control ng-model="user.email" required>
</abm-form-group>
<div class="form-group">
<div class="togglebutton" abm-toggle label="Premium Account">
<input type="checkbox" name="premiumAccount" ng-model="user.premium" ng-change="user.paymentMode=undefined">
</div>
</div>
<abm-form-group error-messages="errorMap">
<label>Prefered payment method</label>
<div class="radio" abm-radio label="Net banking">
<input type="radio" name="payment" value="net" ng-model="user.paymentMode" ng-required="user.premium" ng-disabled="!user.premium">
</div>
<div class="radio" abm-radio label="Credit card">
<input type="radio" name="payment" value="credit" ng-model="user.paymentMode" ng-required="user.premium" ng-disabled="!user.premium">
</div>
</abm-form-group>
<div class="form-group">
<div class="togglebutton" abm-toggle label="Send Me Updates">
<input type="checkbox" name="notifications" ng-model="user.notify" ng-change="user.notifications={}">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<abm-form-group error-messages="errorMap">
<label>Notifications via:</label>
<div class="checkbox" abm-checkbox label="Text Message">
<input type="checkbox" name="text-notifications" ng-model="user.notifications.text" ng-disabled="!user.notify" ng-required="user.notify && !user.notifications.email">
</div>
<div class="checkbox" abm-checkbox label="Email">
<input type="checkbox" name="email-notifications" ng-model="user.notifications.email" ng-disabled="!user.notify" ng-required="user.notify && !user.notifications.text">
</div>
</abm-form-group>
</div>
<div class="col-xs-6">
<abm-form-group error-messages="errorMap">
<label>Notification Frequency:</label>
<select class="form-control" name="frequency" abm-form-control ng-model="user.notifications.frequency" ng-disabled="!user.notify" ng-required="user.notify">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</abm-form-group>
</div>
</div>
<a href="" class="btn btn-raised btn-primary" ng-disabled="signup.$invalid" abm-component>Create Account</a>
</form>
</div>
<div class="col-xs-12 col-sm-6">
<pre>{{user | json}}</pre>
</div>
</div>
</div>
Recientemente analicé este problema también. Hay una nueva versión de Angular que es Angular 5. Pero no es fácil encontrar componentes atractivos para esta versión de angular que se lanzó hace un par de semanas.
El material angular se basa principalmente en el diseño flexible. Debe verificar si eso es una restricción para usted. Si solo usa componentes de entrada y no integra ningún otro marco de arranque de JavaScript (como ng-bootstrap), debería funcionar.
Debido a que los componentes de material no definen ningún cambio, ningún estilo nativo (incluso no tiene ninguna implementación normalize.css). Si marca un tema de estilo de material, por ejemplo, https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css , no encontrará ningún estilo para las etiquetas nativas.
Lo que debe prestar atención es no usar ambos estilos en el mismo elemento, por ejemplo, el siguiente no funcionará como se desea
<button mat-raised-button class="btn btn-primary">Submit</button>
Si usa un componente de material, debe usar un estilo específico de material en ese componente. por ejemplo
<button mat-raised-button color="primary">Primary</button>
Si agrega tanto bootstrap como material angular, esto es lo que sucederá
-
Ambos tienen css que se enfocarán en sus elementos frontales (por ejemplo, entrada
elemento, botones) -
Cada uno tiene su propia apariencia (es decir, el elemento de entrada Bootstrap es diferente del elemento de entrada Material). Por lo tanto, su proyecto general no tendrá una sola apariencia.
-
Si agrega ambos, tendrá que ocuparse de los estilos CSS que reemplazan a otros en partes comunes (por ejemplo, tamaño de fuente y familia de fuentes).
-
El material angular maneja los elementos frontales de forma angular (directiva) Entonces, cuando lanzan una nueva versión (29 lanzamientos hasta ahora), tendrá que pasar un tiempo probando su código anterior (por ejemplo, cambiaron $ media a $ mdMedia para manejar sideMenu) . ¡He pasado mucho tiempo descubriendo por qué mi sideMenu dejó de funcionar!
-
El tamaño general de las dependencias del proyecto aumentará si está utilizando dos marcos front-end.
Angular-material necesita sus propias dependencias como ''angular-animate'' y ''angular-aria''.
Hablando de tus "tarjetas-md" hay "paneles" en bootstrap, quizás quieras echar un vistazo here
Le recomendaría que se apegue a una cosa, ya sea bootstrap o material angular. Ambos son increíbles, simplemente no los mezcles.
Utilice el paquete de material angular para elementos de forma.
Use la cuadrícula css bootstrap para un diseño receptivo.
https://www.npmjs.com/package/@zirafa/bootstrap-grid-only
Recientemente escribí una publicación de blog sobre cómo reemplazar Bootstrap con Angular-Material. Se basa en el marco de kickstarter de elección que estoy usando, pero hará el trabajo que buscas.
Al igual que @nitin dijo, será difícil implementar ambos. Lo que realmente te pediría que pienses, independientemente de si es posible, es por qué querrías ambos.
El propósito de ambos es proporcionar un estilo de interfaz de usuario común en general, pero están conceptualmente unidos entre sí, en lugar de algo que podría funcionar en conjunto.
Te recomiendo que comiences a leer más sobre el diseño de materiales de las guías de Google antes de saltar directamente.