각진 재료
머티리얼 디자인(Material Design), 중국어: 머티리얼 디자인 언어(Material Design Language)는 구글이 출시한 새로운 디자인 언어로, 구글은 이 언어가 모바일폰, 태블릿, 데스크톱 및 "기타 플랫폼"에 대해 보다 일관되고 폭넓은 "느낌"을 제공하기 위해 설계되었다고 밝혔습니다.
구글에 따르면, 머티리얼 디자인은 "종이와 잉크 연구에서 영감을 받은 실제 터치"에 기반하며, 사용자가 "기계학의 원칙에 반하지 않고" 현실 세계를 대체하는 시각적 단서를 이해할 수 있게 해줍니다. 또한, 빛, 표면, 움직임의 기본 원리는 물체들이 서로 공간에서 어떻게 움직이고 상호작용하며 존재하는지 나타내는 핵심입니다. 사실적인 빛과 그림자 효과는 블록 사이의 이음새를 보여주고, 공간을 나누며, 움직이는 부품을 표시합니다. 더 자세한 소개는 Material 공식 웹사이트를 방문해 주세요하이퍼링크 로그인이 보입니다.。
Angular Material은 Material 명세와 공식 웹사이트 주소를 기반으로 Angular 팀이 완벽하게 구현한 Angular2+ UI 프레임워크 세트입니다:하이퍼링크 로그인이 보입니다.
이 글에서는 Angular Material의 MatSnackBar 컴포넌트를 사용해 경고 상자를 캡슐화하는데, 먼저 렌더링을 살펴보겠습니다:
1단계: 설치
2단계: 애니메이션 구성
애니메이션 패키지가 설치되면, BrowserAnimationsModule을 애플리케이션에 불러와 애니메이션 지원을 활성화하세요.
app.module.ts 다음과 같이 가져오기:
3단계: 테마 가져오기
테마를 포함하는 것은 모든 핵심 및 테마 스타일을 애플리케이션에 적용하는 데 필수적입니다.
미리 만들어진 테마를 시작하려면 Angular Material의 미리 구축된 테마 중 하나를 전역적으로 지원서에 포함하세요. Angular CLI를 사용 중이라면 설정할 수 있습니다styles.scss로：
만약 당신이사용하지 않음Angular CLI, 그럼<link>통과할 수 있습니다당신의 원소들은 미리 만들어진 주제 index.html을 포함하고 있습니다.
4단계: 경고 박스를 캡슐화하기 시작하세요
cmd 명령어 cd를 통해 /app/services 디렉터리에 입력하면, 자신의 프로젝트에 맞게 디렉터리를 수정하고 Create Service 명령을 실행할 수 있습니다:
ts 코드는 다음과 같습니다:
5단계: 프롬프트 박스를 CSS 스타일로 설정하세요
프로젝트 내에서스타일스.SCSS파일 하단에 다음 스타일을 추가하세요. 실제 상황에 맞게 수정할 수 있습니다! 코드는 다음과 같습니다:
6단계: 알림 박스 사용
로그인 인터페이스를 예로 들어 login.module.ts 안에 가져와서경보 서비스그리고매트스낵바모듈구성 모듈은 다음과 같습니다:
login.component.ts 컴포넌트에서 사용되는 코드는 다음과 같습니다:
MatSnackBar 컴포넌트 API 문서:하이퍼링크 로그인이 보입니다.
(끝)
|
게시됨 2018. 11. 22. 오후 3:00:49
|
|
|
|
