Bootstrap for Angular와 Material for Angular의 조합에 의한 설계
이 템플릿으로 프로젝트를 진행 중입니다.
템플릿은 AngularJs와 Bootstrap-UI(각선용 부트스트랩)를 사용하여 작성되어 있으며 카드 등의 머티리얼 디자인 요소를 포함하고 싶습니다.
그렇게 할 수 있을까요?추천해주실 수 있나요?이 템플릿은 이미 마음에 들어하고 많은 요소를 사용하고 있습니다만, 재료 디자인에는 카드, 드롭다운, 라벨 애니메이션이 들어간 텍스트 입력 등이 있어 매우 훌륭합니다.
제 질문은 다음과 같습니다.
AngularJS + Bootstrap for Angular + Material Design for Angular = Awesomeness 또는 Disaster?
부트스트랩과 앵귤러 머티리얼을 모두 추가하면 이렇게 됩니다.
모두 요소 " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " "
표시, 표시)각각 독자적인 외관과 느낌이 있습니다(부트스트랩 입력 요소는 재료 입력 요소와 다릅니다).따라서 프로젝트 전체가 하나의 외관과 느낌을 가질 수 없습니다.
둘 다 추가할 경우 공통 부품(글꼴 크기 및 글꼴 패밀리 등)에서 다른 제품보다 css 스타일을 우선시해야 합니다.
각도 재료는 프론트 엔드 요소를 각도 있게 처리합니다(지시적). 따라서 새로운 버전(지금까지 29개 릴리즈)이 출시되면 이전 코드를 테스트해야 합니다(예를 들어 $mdMedia에서 $mdMenu로 변경됨).왜 sideMenu가 작동하지 않는지 많은 시간을 보냈습니다!
두 개의 프런트 엔드 프레임워크를 사용하는 경우 프로젝트 종속성의 전체 크기가 증가합니다.
각질 물질은 '각질-애니메이트'와 '각질-아리아'와 같은 그 자체의 의존성을 필요로 한다.
md-cards에 대해 말하자면 부트스트랩에 "panels"가 있습니다.여기서 보세요.
부트스트랩이나 각진 소재 중 하나를 고집하는 것이 좋습니다.둘 다 멋진데 섞지 마세요.
최근에 Bootstrap을 Angular-Material로 대체하는 방법에 대한 블로그 투고를 작성했습니다.제가 사용하는 킥스타터 프레임워크에 기반하지만 원하는 작업을 수행할 수 있습니다.
@nitin이 말한 것처럼 두 가지 모두를 구현하기는 어려울 것입니다.가능하든 없든 생각해보길 바라는 건 왜 둘 다 원하느냐는 거죠?
양쪽의 목적은 전체적으로 공통적인 UI 스타일을 제공하는 것이지만, 서로 연동되는 것이 아니라 개념적으로 배치되어 있습니다.
바로 시작하기 전에 구글 가이드에서 재료 디자인에 대해 자세히 읽어보시길 권합니다.
나는 Angular인 Angular Bootstrap Material을 썼다.JS 버전의 부트스트랩 재료 설계 테마입니다.jQuery와 부트스트랩의 JavaScript에 의존하지 않습니다.또한 다음을 사용하여 폼 검증을 지원합니다.ng-messages.
라우터에서 설치할 수 있습니다.bower install abm.
UI 부트스트랩을 이미 사용하고 있기 때문에 유일한 추가 의존관계는 부트스트랩 재료 설계 테마 css와 Angular 메시지입니다.
다음은 기본 폼 검증 데모입니다.
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="johndoe@mail.com" 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>폼 요소에는 각진 재료 패키지를 사용합니다.응답 설계에는 부트스트랩 css 그리드를 사용합니다. https://www.npmjs.com/package/@zirafa/bootstrap-grid-only
저도 최근에 이 문제를 분석했습니다.Angular의 새로운 버전은 Angular 5입니다.하지만 몇 주 전에 출시된 이 버전의 Angular는 보기 좋은 부품을 찾기가 쉽지 않습니다.
각도 재료는 대부분 플렉스 레이아웃을 기반으로 합니다.당신은 그것이 당신에게 제한적인지 확인해야 합니다.입력 컴포넌트만 사용하고 다른 부트스트랩 javascript(ng-bootstrap 등) 프레임워크는 통합하지 않으면 동작합니다.
재료 구성요소는 기본 스타일을 변경하지 않기 때문에(normalize.css 구현도 없습니다).https://unpkg.com/@material/material/prebuilt-pink/indigo-pink.css 등의 소재 스타일링을 체크하면 네이티브 태그에 대한 스타일링이 없습니다.
주의할 점은 동일한 요소에서 두 가지 스타일을 모두 사용하지 않는 것입니다. 예를 들어, 다음 스타일이 원하는 대로 작동하지 않습니다.
<button mat-raised-button class="btn btn-primary">Submit</button>
재료 구성요소를 사용하는 경우 해당 구성요소에 재료별 스타일링을 사용해야 합니다.예를들면
<button mat-raised-button color="primary">Primary</button>
" "만 "bootstrap-grid-min.css 다른 . 하다text-rightsyslog.
은, ''라고 써주세요.bootstrap-min.css「 」:
Import :styles.scss/styles.css:
@import './assets/css/bootstrap.min.css';
그러나 이것은 재료의 의 설계와 상충된다.예를 들어, 버튼을 클릭했을 때 예상치 못한 테두리가 나타나는 것을 바로 알아차렸습니다(말처럼 귀찮지는 않지만).
다음 항목을 에 추가할 수 있습니다.styles.scss이 효과를 없애기 위해서요.
* {
&:active,
:focus {
outline: none !important; // 1
}
}
a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
color: #3f51b5; // 2
}
상세내용 : https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/
언급URL : https://stackoverflow.com/questions/29313990/using-bootstrap-for-angular-and-material-design-for-angular-together
'programing' 카테고리의 다른 글
| Spring Reactor 웹 앱에서 일련의 작업을 수행하고 다음 작업을 완료하기 전에 하나의 작업을 완료하려면 어떻게 해야 합니까? (0) | 2023.03.07 |
|---|---|
| AngularJS: ng-include에 각부하 스크립트를 작성하는 방법 (0) | 2023.03.07 |
| Reactjs Dev 툴의 훅 번호는 무엇에 해당합니까? (0) | 2023.03.07 |
| React.forwardRef를 사용하는 것과 커스텀 레퍼런스 프로포즈를 사용하는 것의 가치 (0) | 2023.03.07 |
| 브라우저에서 testacular를 사용한 디버깅(현재의 카르마) (0) | 2023.03.07 |