각도 재료 설계 구성 요소로 UI를 만듭니다

이 튜토리얼은 각도 재료 설계를 소개하고 재료 UI로 간단한 각도 응용 프로그램을 만들어 안내합니다. 사전 제작 된 구성 요소를 활용하면 개발 속도가 발전하고 전문적인 응용 프로그램을 만듭니다

주요 개념 :

Angular Material은 재료 설계 원칙을 준수하는 포괄적 인 UI 구성 요소 세트를 제공합니다. 전제 조건에는 node.js (6.9.0), npm (3) 및 각도 Cli가 포함됩니다. 설치에는 NPM을 사용하여 각도 재료와 그 종속성을 추가해야합니다. 테마는 사전 구축 된 테마를 가져 오거나 사용자 정의 테마를 만들어 달성합니다. 구성 요소는 각도 모듈로 모듈 식으로 가져옵니다 튜토리얼은 버튼, 카드, 테이블 및 양식을 사용하여 보여줍니다 제스처 (Hammerjs를 통해) 및 애니메이션 ()과 같은 고급 기능은 사용자 경험을 향상시킵니다.

재료 디자인이란 무엇입니까? 재료 디자인은 플랫폼에서 디지털 경험을 만드는 디자인 언어입니다. 그것은 디자인 프로세스를 간소화하여 상호 작용, 모션 및 구성 요소에 대한 원칙과 지침을 제공합니다. 재료 구성 요소는 모듈성, 테마 및 사용자 정의를 제공합니다 각도 재료 개요 :

각도 재료는 각도에 대한 재료 설계를 구현합니다.

에 대한 구성 요소가 포함되어 있습니다
• 형태 (입력, 선택, 확인란, 날짜 선택기) 탐색 (메뉴, 사이드 바, 도구 모음) 레이아웃 (그리드, 카드, 탭, 목록) 버튼, 표시기, 팝업, 모달 및 데이터 테이블
개발 환경 설정 :
• Node.js (6.9.0) 및 NPM (3)이 설치되어 있는지 확인하십시오. Angular CLI :
를 설치하십시오
• 새로운 각도 프로젝트를 만듭니다 :
구성 요소 생성 :
: 를 구성하십시오
• 각도 재료 설치 :
각도 재료 및 그 종속성을 설치하십시오 :
• @angular/animations : 에서 hammerjs를 가져옵니다
테마를

: 에 추가하십시오

재료 아이콘을 : 에 추가하십시오

import

in

:

재료 모듈 생성 :

생성

:

가져 오기
• UI 건축 : (, ,

  및 app.component.html에 대한 자세한 UI 구성은 여기에 포함하기에는 너무 광범위합니다. 원래 응답은이 세부 사항을 제공합니다. 전체 코드 예제에 대해서는 참조하십시오.) 원본 응답은 모달 대화 상자 및 스낵바 알림을 포함한 오류 처리를 포함하여 이러한 구성 요소 내에서 다양한 각도 재료 구성 요소를 사용하는 포괄적 인 예를 제공합니다. login.component.html 결론 : customer-list.component.html 이 튜토리얼은 재료 설계 UI를 사용하여 각도 응용 프로그램을 구축하기위한 토대를 제공합니다. Angular Material의 모듈성 및 광범위한 기능은 개발 효율성을 크게 향상시키고 시각적으로 매력적이고 사용자 친화적 인 응용 프로그램을 만듭니다. 자세한 내용과 구성 요소 옵션은 공식 각도 자료 문서에 문의하십시오. customer-create.component.html

위 내용은 각도 재료 설계 구성 요소로 UI를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!