소재 디자인 라이트 (MDL) VS Angular2 재질 Angular2 앱

YouTube 및 기타 학습 사이트에 몇 가지 Angular2 자습서가 있습니다. 그 중 일부는 Material Design Lite (MDL)을 사용했으며 일부는 새로운 Angular2 재질을 사용했습니다. 데모 목적으로. 이 시간의 점과 무엇 Angular2에 구현하는 더 좋은 옵션이 될 것이다 MDL, 에 비해 Angular2 재료는 여전히 꽤 (현재 알파)에 새로운 구성 요소의 수와 문서에 한계가 있음을 고려소재 디자인 라이트 (MDL) VS Angular2 재질 Angular2 앱

각의 장단점은 이며 Angular2에만 해당합니까?

출처

2016-06-16 Neville Katila

MDL은 확실히 문서화가 잘되었습니다 (Angular2 Material에 대한 좋은 설명서를 찾지 못했습니다). 나는 이것 때문에 MDL이 (현재)이 좋다고 생각합니다. MDL의 부정은 typescript/angular2에 통합되지 않는다는 것입니다.

Angular 2 구성 요소 템플릿에서 MDL 구성 요소를 사용하려는 경우 다음과 같이 구성 요소를 확장하여 MDL 구성 요소를 등록 할 수 있습니다 (그렇지 않으면 MDL 애니메이션이 작동하지 않음).

Angular2 재료는 알파의 부족과 일부 문서를하면

@Component({ 
    selector: 'my-selector', 
    template: ` 
     <form action="#"> 
     <div class="mdl-textfield mdl-js-textfield"> 
     <input value="{{bleh}}" class="mdl-textfield__input" type="text" id="sample1"> 
     <label class="mdl-textfield__label" for="sample1">Text...</label> 
     </div> 
     <button (click)="action()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> 
     create 
     </button> 
     </form>` 
}) 
export class CreateComponent extends MaterialTemplate {...}

, 내가 그 생각으로 전환 할 것 : 자바 스크립트)

declare var componentHandler: any; 
export class MaterialTemplate { 
    ngAfterViewInit(){ 
     componentHandler.upgradeAllRegistered(); 
    } 
}

사용법은 다음과 같이 될 것이다.

출처

2016-06-16 08:15:42

완전히 사용 사례입니다. 프로젝트가 곧 제작 될 예정입니까, 아니면 꽤 오랜 시간이 걸릴 것입니까? 세부 사항까지 UI 구성 요소를 사용자 정의해야합니까, 아니면 매우 일반적인 용도입니까? Ive는 많은 연구를 해왔으므로 짧은 시간 동안 제작을 시작 했으므로 부트 스트랩 재질 디자인 URL을 선택하십시오. mdbootstrap.com 이유 : 각 구성 요소를 사용하는 경우 먼저 알파 초 단위로 사용하고 있습니다. 사용자 정의, 예를 들어, 라디오, 확인란 같은 기본 정보를 채우기 위해 나머지 서비스를 호출합니다. 당신은 시간에 짧은 경우

포인트는 무거운 사용자 정의 (심지어 인기 Wijmo 5 NG2 구성 요소가 지금 사용) 또는 기다려 angular2 재료를 선택할 수를 MDL로 갈 필요 것.

출처

2016-06-16 13:10:36

Angular2-material과 MDL 외에도 재질 디자인을 기반으로 한 CSS Framework 인 MaterializeCSS도 있습니다. 그들의 공식 웹 사이트는 http://materializecss.com

에 있으며 MDL 또는 Angular2 재료가 제공하는 것보다 훨씬 많은 작업 구성 요소를 가지고 있습니다. 모두 예제와 문서가 있습니다.

그러나 MaterializeCSS는 JQuery를 기반으로합니다. 즉, 일부 구성 요소의 동적 동작을 활성화하려면 JQuery가 필요합니다. https://www.npmjs.com/package/angular2-materialize을 살펴보십시오. 이 패키지는 Angular2 앱에이 동적 인 동작을 정확하게 추가합니다. Angular2 구성 요소에 MaterializeDirective을 가져 오면 올바르게 작동합니다.

출처

2016-07-27 18:03:33 Cerny

소재 디자인 라이트 (MDL) VS Angular2 재질 Angular2 앱

답변

관련 문제