문서의 이전 판입니다!
Angular Material
ng CLI 사용
Angular Project에 Angular Material을 추가 설치하려면
npm install --save @angular/material @angular/cdk @angular/animations 또는 ng add @angular/material
Component Segments
| Name | Description |
|---|---|
| address-form | Component with a form group that uses Material Design form controls to prompt for a shipping address |
| navigation | Creates a component with a responsive Material Design sidenav and a toolbar for showing the app name |
| dashboard | Component with multiple Material Design cards and menus which are aligned in a grid layout |
| table | Generates a component with a Material Design data table that supports sorting and pagination |
| tree | Component that interactively visualizes a nested folder structure by using the <mat-tree> component |
Additionally @angular/CDK
| Name | Description |
|---|---|
| drag-drop | Component that uses the @angular/cdk/drag-drop directives for creating an interactive to-do list |
Address form schematic
ng generate @angular/material:address-form <component-name> ng generate @angular/material:nav <component-name> ng generate @angular/material:table <component-name> ng generate @angular/material:dashboard <component-name> ng generate @angular/material:tree <component-name> ng generate @angular/cdk:drag-drop <component-name>
Defining a custom theme
When you want more customization than a pre-built theme offers, you can create your own theme file.
A custom theme file does two things:
Imports the mat-core() Sass mixin. This includes all common styles that are used by multiple components. This should only be included once in your application. If this mixin is included multiple times, your application will end up with multiple copies of these common styles. Defines a theme data structure as the composition of multiple palettes. This object can be created with either the mat-light-theme function or the mat-dark-theme function. The output of this function is then passed to the angular-material-theme mixin, which will output all of the corresponding styles for the theme. A typical theme file will look something like this:
참조
icon https://material.io/tools/icons/?style=baseline css grid