Angular Month Picker 구성 요소 개요
Ignite UI for Angular 월-년 달력 뷰를 사용하여 특정 월과 년을 선택하는 쉽고 직관적인 방법을 제공합니다. 이 구성 요소를 사용하면 값을 날짜 개체에 바인딩할 수 있으며 사용자는 월 선택기 구성 요소 UI를 통해 날짜 개체의 월 및 년 부분을 변경할 수 있습니다. 또한 현지화도 지원합니다.
Angular 월 선택기 예제
여기서 보이는 것은 기본 Angular Month Picker의 예이며, 사용자가 연도와 월을 선택할 수 있는 기본 뷰가 포함되어 있습니다.
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
Ignite UI for Angular Month Picker 시작하기
Ignite UI for Angular Month Picker 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
cmd
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
첫 번째 단계는 IgxCalendarModule
우리 안에 app.module.ts 파일.
또한 IgxMonthPickerComponent는 터치 상호 작용에 따라 달라 BrowserAnimationsModule
지며 선택적으로 HammerModule
AppModule에도 추가해야 합니다.
// app.module.ts
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxCalendarModule } from 'igniteui-angular';
// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
...
})
export class AppModule {}
typescript
또는 16.0.0
부터 IgxMonthPickerComponent
독립 실행형 종속성으로 가져오거나 IGX_CALENDAR_DIRECTIVES
토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.
// home.component.ts
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxMonthPickerComponent } from 'igniteui-angular';
// import { IgxMonthPickerComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-month-picker></igx-month-picker>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [BrowserAnimationsModule, HammerModule, IgxMonthPickerComponent]
/* or imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES] */
})
export class HomeComponent {}
typescript
이제 Ignite UI for Angular 가져왔으므로 igx-month-picker
구성 요소를 사용할 수 있습니다.
IgxMonthPickerComponent
는 날짜 현지화 및 형식 지정을 위해 Intl WebAPI를 사용합니다. 대상 플랫폼이 이를 지원하지 않는 경우 적절한 폴리필 사용을 고려하세요.
Angular Month Picker 사용
템플릿에 Angular Month Picker를 추가하려면 다음 코드를 사용하세요.
<!-- month-picker-sample.component.html -->
<igx-month-picker></igx-month-picker>
html
설정 날짜
value
입력을 사용하여 날짜를 IgxMonthPickerComponent
로 설정합니다.
// month-picker-sample.component.ts
public date: Date = new Date();
typescript
<!-- month-picker-sample.component.html -->
<igx-month-picker [value]="date"></igx-date-picker>
html
양방향 데이터 바인딩을 만들려면 ngModel
다음과 같이 설정하세요.
<!-- month-picker-sample.component.html -->
<igx-month-picker [(ngModel)]="date"></igx-date-picker>
html
서식 지정
formatOptions
입력을 사용하여 월 선택 표시 형식을 변경합니다.
<!-- month-picker-sample.component.html -->
<igx-month-picker [(ngModel)]="date" [formatOptions]="numericFormatOptions"></igx-month-picker>
html
// month-picker-sample.component.ts
public date: Date = new Date();
public numericFormatOptions = {
month: '2-digit'
};
typescript
현지화
locale
입력을 사용하여 Ignite UI for Angular 사용자 정의합니다.
<!-- month-picker-sample.component.html -->
<igx-month-picker [(ngModel)]="date" [locale]="locale" [formatOptions]="formatOptions"></igx-month-picker>
html
// month-picker-sample.component.ts
public date: Date = new Date();
public locale: 'fr';
public formatOptions = {
month: 'long'
};
typescript
다음은 월 선택기 구성 요소를 지역화하고 형식을 지정하는 예입니다.
키보드 탐색
igxMonthPicker 구성 요소에 초점이 맞춰지면 다음을 사용하세요.
- PageUp 키는 전년도로 이동하고,
- PageDown 키를 누르면 다음 연도로 이동하고,
- 올해의 첫 달을 포커스하는 홈 키,
- 해당 연도의 마지막 달에 초점을 맞추는 End 키,
- 하위 헤더 버튼을 탐색하려면 Tab 키를 사용하세요.
<
(이전) 또는>
(다음) 연도 버튼(하위 헤더)에 초점이 맞춰진 경우- 다음 또는 이전 연도를 보려면 스크롤하려면 스페이스 나 Enter 키를 누르세요.
연도 버튼(하위 헤더에 있음)에 초점이 맞춰지면 다음을 사용하세요.
- 연도 보기를 열려면 Space 또는 Enter 키를 누르세요.
- 이전/다음 연도를 스크롤하여 보려면 오른쪽 또는 왼쪽 화살표 키를 사용하세요.
월 보기 내 월에 초점이 맞춰지면 다음을 사용하세요.
- 달을 탐색하려면 화살표 키를 사용하세요.
- 월 보기 내에서 첫 번째 달에 초점을 맞추는 홈 키,
- 월 보기 내에서 지난 달에 초점을 맞추는 종료 키,
- 현재 초점이 맞춰진 월을 선택하고 보기를 닫으려면 키를 입력하세요.
- 월을 탐색하려면 Tab 키를 사용하세요.
스타일링
월 선택기 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss
월 선택기는 달력 테마를 사용하므로 calendar-theme
확장하는 새 테마를 만들고 해당 매개변수 중 일부를 사용하여 월 선택기 항목의 스타일을 지정해야 합니다.
$my-calendar-theme: calendar-theme(
$border-radius: 15px,
$content-background: #011627,
$picker-background: #011627,
$ym-current-foreground: #ecaa53,
$ym-hover-background: #ecaa53,
$navigation-color: #ecaa53,
$picker-hover-foreground: #d37b08,
$navigation-hover-color: #d37b08,
$picker-foreground: #ecaa53,
);
scss
다음 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.
@include css-vars($my-calendar-theme);
scss
모든 작업이 완료되면 구성 요소는 다음과 같아야 합니다.