각도 재료 시작

31633 단어 uxangularwebdevmaterial
이 강좌는 Angular Material 에서 Material Design UI 구성 요소 라이브러리를 구현하는 방법에 대해 설명합니다.각도 응용 프로그램을 설정하여 각도 재료를 사용하고 내용을 만들어서 재료 구성 요소를 보여주는 방법을 소개합니다. 아래와 같습니다.
이 강좌의 전체 코드는 GitHub에 있습니다.모든 제출은 본문의 한 단계와 일치한다.
Angular
https://github.com/melissahoughton/angular-material-blog

설치


애플리케이션 생성


새 각도 응용 프로그램을 생성하고 각도 재료를 추가합니다.

  • Angular CLI를 사용하여 새 Angular 애플리케이션 생성
    명령줄에서 실행ng new my-app하고 my-app 을 응용 프로그램의 이름으로 바꿉니다.
    경로설정Y을 선택합니다.
    스타일로 SCSS를 선택합니다.

  • 각도 재료 추가
    다음 명령 실행
    cd my-app
ng add @angular/material
    제공된 사전 구축 테마를 선택하십시오.
    글로벌 버전 (글꼴 스타일) 으로 Y 을 선택합니다.
    애니메이션의 경우 Y 을 선택합니다.add 명령은 @angular/cdk 및 @angular/material 라이브러리를 설치하고 재료 글꼴, 아이콘 및 기본 스타일을 설정합니다.

    • 기본값 삭제


    현재 컨텐트는 첫 번째 단계에서 Angular에서 자동으로 생성되지만 자체 컨텐트를 만들고자 합니다.app.component.html 에서 <router-outlet></router-outlet> 을 제외한 모든 내용을 삭제합니다.

    재료 모듈 생성하기


    응용 프로그램에서 재료 구성 요소를 사용하려면 가져와야 합니다.개별 구성 요소를 가져오기 위한 별도의 material.module.ts 를 만듭니다. 다음 단계에서는 재료 모듈을 응용 프로그램으로 가져옵니다.
    재료 어셈블리 파일을 직접 가져오는 것은 권장되지 않지만app.module.ts응용 프로그램에서 사용할 수 있도록 뿔 재료의 모든 구성 요소를 가져옵니다.나중에 이 파일을 단순화하여 원하는 어셈블리만 가져올 수 있습니다.
  • material 에 src\app 라는 폴더를 만듭니다.
  • 라는 파일을 만들고 다음 내용을 이 파일에 복사합니다.또는 이 재료 모듈 파일을 my 에서 폴더로 복사합니다.
    • import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';

@NgModule({
  exports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule,
  ]
})
export class MaterialModule { }
    이 파일은 사용 가능한 모든 재료 구성 요소를 가져오고 내보내기로 추가합니다 material.module.ts. 이 파일은 이 구성 요소를 응용 프로그램에 공개합니다.

    github 재료 모듈 가져오기

    MaterialModule에서 마지막으로 생성된 재료 모듈의 가져오기 문구입니다.app.module.ts의imports 그룹에 MaterialModule을(를) 추가하여 응용 프로그램에 가져옵니다.
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';

@NgModule({
declarations: [
  AppComponent
],
imports: [
  BrowserModule,
  AppRoutingModule,
  BrowserAnimationsModule,
  MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
    이제 응용 프로그램에서 각도 재료를 사용할 수 있습니다.다음 단계를 계속하여 응용 프로그램에 내용을 추가합니다. 이 응용 프로그램은 재료 구성 요소를 보여 줍니다.

    컨텐트 추가


    어셈블리 생성


  • Angular CLI를 사용하여 구성 요소 생성
    실행 AppModule

  • 노선 설정ng generate component home의 빈 라우트를 다음으로 교체
    const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];
    • 이 절차는 app.routing.module.ts 라는 구성 요소를 만들고 기본 페이지로 설정합니다.
    응용 프로그램 컴파일 및 텍스트 보기Home 실행

    기본 스타일 추가


    페이지에 간격을 만들기 위해 기본 스타일을 추가합니다.
    우리는 사용할 것이다 .
    Angular는 CSS FlexBox와 mediaQuery를 결합한 강력한 Flex 레이아웃 APICSS FlexBox도 제공합니다.
  • 재료 배경 스타일을 추가합니다.ng serve에서 클래스home works!를 바디 표시에 추가합니다.
  • 용류index.html
    • mat-app-background표시를 <router-outlet></router-outlet>에 포장

  • 다음 스타일 추가div
    .container {
  max-width: 800px;
  margin: 4em auto;
  padding: 0 20px;
}

.container > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

  • 다음 스타일 추가container
    .flex-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 16px;
}

button {
  margin: 8px;
}

.mat-radio-button~.mat-radio-button {
  margin-left: 16px;
}

    • @ 각도 / 커브 레이아웃 제목 도구 모음 만들기

    app.component.scss에서 용기div 위에 도구막대를 응용 프로그램 제목으로 추가합니다
    <mat-toolbar class="mat-elevation-z6" color="primary"></mat-toolbar>
    home.component.scss를 실행하고 브라우저를 열어 응용 프로그램의 맨 위에 있는 제목을 봅니다.
    이제 첫 번째 각 재료 어셈블리가 추가되었습니다.이 구성 요소들은 주제에 따라 설계된 것이다.
    우리는 app.component.html 속성을 사용하여 항목을 테마의 원색으로 설정합니다.
    재료ng-serve 클래스에 그림자를 추가하여 텍스쳐 재료 모양새를 생성합니다.

    각도 재료 어셈블리 추가

    color의 내용을 재료 성분을 포함하는 샘플을 다음 코드로 교체합니다.브라우저를 새로 고쳐 각도 재료 어셈블리의 역할을 확인합니다.
    <h1 class="mat-display-1">Easy, Breezy, Beautiful: Angular Material</h1>

<p>Here are some random angular material components</p>

<mat-card>
    <mat-card-header>
        <img mat-card-avatar src="https://cdn.pixabay.com/photo/2018/10/11/12/31/black-cat-3739702_1280.jpg"
            alt="My Photos">
        <mat-card-title>Easy, Breezy, Beautiful</mat-card-title>
        <mat-card-subtitle>Angular Material</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <p>
            This is an amazing blog on Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
        </p>
    </mat-card-content>
    <mat-card-actions align="end">
        <button mat-raised-button color="primary">Read More</button>
    </mat-card-actions>
</mat-card>

<div class="flex-container">
    <div>
        <button mat-raised-button color="primary">Raised Primary</button>
        <button mat-raised-button color="accent">Raised Accent</button>
        <button mat-stroked-button>Basic Stroked</button>
        <button mat-stroked-button color="primary">Stroked Primary</button>
    </div>

    <button mat-fab>
        <mat-icon>thumb_up</mat-icon>
    </button>

    <mat-radio-group aria-label="Select an option">
        <mat-radio-button value="1">Option 1</mat-radio-button>
        <mat-radio-button value="2">Option 2</mat-radio-button>
    </mat-radio-group>

    <mat-checkbox>Check me!</mat-checkbox>

    <mat-form-field>
        <mat-label>Choose a date</mat-label>
        <input matInput [matDatepicker]="picker">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

    <mat-slider></mat-slider>


    <button mat-flat-button color="primary" matTooltip="Info about the action" matTooltipPosition="after"
        aria-label="Button that displays a tooltip when focused or hovered over">
        Tooltip
    </button>
</div>

<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
    축하이제 각도 재료를 사용하는 각도 프로그램이 생겼어요.
    전체 어셈블리의 각도 재료 와 이를 사용하는 방법을 확인합니다.
    Ext 메뉴 연동을 위한 완벽한 솔루션
    Ubuntu 20.04 마우스 스크롤 휠 속도

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage