Angular의 UI / UX 구성 요소는 각도 재료. 그들Angular 응용 프로그램이 수행하는 데 도움 효율적으로 . 그러나 아직 모르는 경우 Angular Materials를 자세히 배우는 데 도움이되는 문서가 있습니다. 또한, to Angular에 대한 심층적 인 지식을 얻고 등록을 고려하십시오. ' Edureka에서.
이 기사에서는 다음 주제를 다룰 것입니다.
Angular Materials 소개
기재 2014 년 Google에서 개발 한 디자인 언어로 도입되었습니다. 머티리얼 디자인 도구이다도움이되는 프런트 엔드 프레임 워크 시각적 , 운동 , 및 상호 작용 디자인. 또한 다양한 장치와 다양한 화면 크기에 맞게 조정할 수 있습니다. 먼저 AngularJS에 태그를 지정하여 이러한 앱을 더 많이 만들었습니다. 매력 그리고 수행 더 빨리 . 그런 다음 Google은 코드를 처음부터 완전히 다시 작성하고 JS를 제거했습니다. , 이름을 지정했습니다. 나중에 Google은 머티리얼 디자인을 Angular에 태그했습니다. , Angular Materials로 이름을 지정했습니다.
각도 재료 또는 UI (사용자 인터페이스) 구성 요소를 사용하면 구조화 방법. 그들은 사용자를 끌어 들이고 접근하기 쉬움 응용 프로그램에있는 요소 또는 구성 요소. 또한 독특한 방식으로 매력적인 방식으로 애플리케이션을 설계하는 데 도움이됩니다. 스타일 과 모양 . 이러한 구성 요소는 응용 프로그램을 더 일관된 , 빠른 , 변하기 쉬운 그리고 심지어 디자인 반응하는 웹 사이트.
각도 재료 설치
이제 Angular Materials를 설치하는 방법에 대한 간단한 자습서로 시작하겠습니다. 먼저 시스템에 Angular가 설치되어 있는지 확인하십시오. Angular에 익숙하지 않은 경우 다음 링크를 참조하십시오. . 모든 설정이 완료되면 다음 명령을 사용하여 Angular Materials를 프로젝트에 추가 할 수 있습니다.
@ 각도 / 재료 추가
먼저 미리 작성된 테마 이름 또는 사용자 지정 테마를 선택하라는 메시지가 표시됩니다.
애플리케이션 스타일을 지정하려면 기본 테마 인 '인디고 / 핑크'사전 제작 된 테마를 선택해야합니다. 모든 공통 스타일을 포함하는 테마 파일을 사용자 정의 할 수 있도록 '사용자 정의'테마를 선택할 수도 있습니다.
다음으로 설정을 요청합니다. HammerJS . HammerJS는 Angular 애플리케이션에서 주로 사용되는 인기있는 라이브러리입니다. 특히 모바일 애플리케이션에서 스 와이프, 팬, 핀치, 회전 등과 같은 터치 제스처에 대한 지원을 추가합니다.
'예'또는 '아니오'를 선택할 수 있습니다. HammerJS는 모바일에서 애플리케이션을 사용할 때 유용 할 수 있습니다. 모바일에서 터치 디스플레이를 제공하기 때문에 이러한 제스처는 더 유용하고 모바일 애플리케이션에서 유행처럼 보일 수 있습니다.
선택한 후 설정을 요청합니다. 브라우저 애니메이션 Angular Material의 경우.
애플리케이션에서 애니메이션을 사용할 수 있도록 '예'를 선택해야합니다. Angular Animation은 애플리케이션을 더 재미 있고 사용하기 쉽게 만듭니다. 이를 통해 사용자의 관심을 끄는 앱과 사용자 경험을 개선 할 수 있습니다.
그 후 애플리케이션에 Angular Materials를 설치합니다.
각도 재료 구성 요소
앞서 언급했듯이 Angular Material Components는 UI / UX 디자인 구성 요소. 여기에는 양식 컨트롤, 탐색, 버튼 및 표시기, 팝업 등과 같은 다양한 구성 요소가 포함되어 있습니다. 이러한 구성 요소는 머티리얼 디자인 사양에 따라 패턴을 구현하는 데 도움이됩니다.
계속해서 Angular 애플리케이션에서 이러한 구성 요소를 구현하는 방법에 대한 몇 가지 예를 살펴 보겠습니다.
항해
먼저 내비게이션의 구성 요소에 대해 설명하겠습니다.
- 툴바
다음 코드를 입력해야합니다. app.component.html 응용 프로그램에서 도구 모음 구성 요소를 사용하기위한 파일입니다.
Angular Material 튜토리얼 헤더와 제목에 사용되는 Angular 재질의 컨테이너입니다. 의 색상 컨테이너를 사용하여 변경할 수 있습니다. 색깔 특성.기본적으로 도구 모음은 현재 테마 (예 : 밝거나 어두움)에 따라 중립적 인 배경색을 사용합니다.다음과 같은 세 가지 기본 테마를 선택할 수 있습니다. '일 순위' , '악센트' , 또는 ‘경고’ .이 도구 모음을 사용하려면 먼저 app.module.ts 다음 명령을 사용하여 Angular 재질에서 파일을 만듭니다.
'@ angular / material'에서 {MatToolbarModule} 가져 오기나중에이 모듈을 수입품 : [] 섹션에있는 app.module.ts 파일.
가져 오기 : [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Mat-Toolbar의 경우 ' MatToolbarModule ”.
이제 다음 명령어를 사용하여 프로젝트를 제공하겠습니다.
서브 -o
그러면 아래와 같이 시스템의 기본 브라우저에서 프로젝트가 열립니다.
선택에 따라 툴바의 색상을 변경하려면 CSS 스타일 시트를 사용하여 변경할 수 있습니다. 예를 하나 보여 드리겠습니다.
먼저 지워야합니다 색깔 속성 컨테이너를 입력하고 다음을 입력하십시오. CSS 코드 app.component.css 파일.
mat-toolbar {background-color : / * 선택한 색상 * / color : / * text-color * /}이제 프로젝트를 제공하여 결과를 확인하십시오.
- 메뉴
다음으로 메뉴 구성 요소에 대해 설명하겠습니다. 다음 코드를 입력해야합니다. app.component.html 파일.
Angular Material 튜토리얼 메뉴 설정 도움말스타일링을 추가하겠습니다. 메뉴 단추. 다음 코드를 입력해야합니다. app.component.css 파일.
.space {flex : 1 1 auto} .btns {width : 100px 높이 : 40px font-size : large border-radius : 10px border : 3px solid # 113c89 background-color : lightcoral}클래스 = '공간' '도구 모음 이름'과 '메뉴 옵션'사이에 공백을 추가하는 데 사용됩니다.
CSS 스타일 시트에 익숙하지 않은 경우 다음 블로그를 참조하십시오. 심층적입니다.
툴바와 마찬가지로 과 컨테이너를 가져 오려면 위와 동일한 절차를 따라야합니다. MatMenuModule 과 MatButtonModule ...에서 각도 재료 그리고 그들을 추가하십시오 수입품 : [] 에 위치한 섹션 app.module.ts 파일.
출력을 표시하려면 지금 프로젝트를 제공하십시오.
양식 컨트롤
이제 폼 컨트롤의 구성 요소에 대해 설명하겠습니다.
- 양식 필드
이름에서 알 수 있듯이 Form-Field는 사용자가 입력 한 내용에 사용됩니다. 응용 프로그램 또는 웹 사이트에서 사용자 등록에 가장 일반적으로 사용됩니다.
다음 코드를 입력해야합니다. app.component.html 응용 프로그램에서 Form-Field 구성 요소를 사용하기위한 파일입니다.
양식 컨트롤
이름
평소와 같이 가져와야합니다. MatFormFieldModule 과 MatInputModule 그리고 그들을 추가하십시오 수입품 : [] 섹션에있는 app.module.ts 파일. 위의 코드는 일반적으로 '이름', '성'등과 같은 이름을 입력하는 데 사용됩니다. 유효성 검사기를 사용하고 필드를 필수로 만들 수도 있습니다. 예를 들어 이메일 필드에 사용할 수 있습니다. 암호 텍스트를 숨기거나 숨김 해제 할 수 있습니다. 참고로 아래 코드를 확인하세요.
이메일을 입력하세요 {{getErrorMessage ()}} 비밀번호를 입력하세요 {{hide? 'visibility_off': 'visibility'}}당신의 app.component.css 파일에 다음 코드를 추가해야합니다.
.example-container {padding-left : 50px}자, 당신의 app.component.ts 파일을 가져와야합니다. FormControl 과 검증 인 ...에서 @ angular / forms 예배 규칙서.
'@ angular / forms'에서 {FormControl, Validators} 가져 오기다음 클래스에 오류를 표시하려면 텍스트를 추가해야합니다.
export class AppComponent {email = new FormControl ( '', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ( 'required')? '값을 입력해야합니다': this.email.hasError ( 'email')? '유효하지 않은 이메일': ''} hide = true}위의 절차를 참조하여 다음 코드를 입력해야합니다. app.module.ts 파일을 가져와 필요한 모듈을 가져옵니다.
import {FormsModule, ReactiveFormsModule} from '@ angular / forms'import {MatIconModule} from '@ angular / material'나중에 이러한 모듈을 수입품 : [] 부분.
- 라디오 버튼
라디오 버튼은 일반적으로 다양한 옵션 중에서 선택하는 데 사용됩니다. 참조를 위해 다음 코드를 확인할 수 있습니다.
에 대한 app.component.html 파일,
성별
남성 여성
에 대한 app.component.css 파일,
mat-radio-button {Padding-left : 50px}이제 가져와야합니다. MatRadioModule 그리고 그것을 추가하십시오 수입품 : [] 섹션에있는 app.module.ts 파일.
나중에 출력을 표시하기 위해 프로젝트를 제공해야합니다.
계속해서 Angular Material CDK에 대해 설명하겠습니다.
각도 재료 CDK
CDK (일명 구성 요소 개발 키트 은의 라이브러리입니다. 미리 정의 된 동작 Angular Material에서 공통적으로 구현하는 도구 세트입니다. 상호 작용 패턴 과 응용 기능 . 머티리얼 디자인에 특정한 스타일이 없습니다. CDK의 예를 살펴 보겠습니다.
- 텍스트 필드
텍스트 필드 구성 요소는 텍스트 입력 필드 작업을위한 유틸리티를 제공합니다. 텍스트 필드에서 CDK 구성 요소를 사용하여 입력 크기를 조정할 수 있습니다. 이를 구현하는 방법의 예를 살펴 보겠습니다.
에 대한 app.component.html 파일,
각도 재료 CDK
글꼴 크기 10px 12px 14px 16px 18px 20px 텍스트 영역 자동 크기 조정
에 대한 app.component.ts 파일의 경우 먼저 필요한 구성 요소를 가져와야합니다.
'@ angular / cdk / text-field'에서 {CdkTextareaAutosize} 가져 오기 '@ angular / core'에서 {NgZone, ViewChild} 가져 오기 'rxjs / operators'에서 {take} 가져 오기이제 클래스 내부에 다음 코드를 입력해야합니다.
자바의 is-a 및 has-a 관계
export class AppComponent {constructor (private _ngZone : NgZone) {} @ViewChild ( 'autosize', {static : false}) autosize : CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampgt this.autosize.resizeToFitContent (true))}}다음으로 가져와야합니다. MatSelectModule 그리고 그것을 추가하십시오 수입품 : [] 섹션에있는 app.module.ts 파일.
마지막으로 출력을 표시하려면 프로젝트를 제공해야합니다.
이것은 결론이 아니며 Angular Materials에는 몇 가지 다른 구성 요소가 있습니다. 당신은 그들을 참조 할 수 있습니다 공식 웹 사이트 Angular Material의.
이것으로 블로그를 종료하고 싶습니다. Angular Material의 기본 사항에 대해 명확하게 이해하시기 바랍니다.이 기사에 대한 의문이나 질문이 있으시면 주저하지 마시고 아래 댓글 섹션에 게시하십시오.
이 블로그에서 방금 배운 모든 것을 배우고 싶다면 모난 , 능숙한 Angular 개발자를 향한 경력을 쌓은 다음 ' .
질문이 있으십니까? 이 'Angular Material'블로그의 댓글 섹션에 언급 해 주시면 가능한 한 빨리 연락 드리겠습니다.