Angular Month Picker 구성 요소 개요

    Ignite UI for Angular 월-년 달력 뷰를 사용하여 특정 월과 년을 선택하는 쉽고 직관적인 방법을 제공합니다. 이 구성 요소를 사용하면 값을 날짜 개체에 바인딩할 수 있으며 사용자는 월 선택기 구성 요소 UI를 통해 날짜 개체의 월 및 년 부분을 변경할 수 있습니다. 또한 현지화도 지원합니다.

    Angular Month Picker Example

    여기서 보이는 것은 기본 Angular Month Picker의 예이며, 사용자가 연도와 월을 선택할 수 있는 기본 뷰가 포함되어 있습니다.

    Getting Started with Ignite UI for Angular Month Picker

    Ignite UI for Angular Month Picker 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

    ng add igniteui-angular

    Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

    첫 번째 단계는 다음 파일을 가져오는 것입니다.IgxCalendarModule 우리 안에서 app.module.ts 파일.

    Note

    ​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/calendar';
// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
    ...
})
export class AppModule {}

    또는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/calendar';
// 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 {}

    이제 Ignite UI for Angular 달력 모듈이나 월 선택기 컴포넌트를 가져왔으니 컴포넌트를igx-month-picker 사용할 수 있습니다.

    Note

    이 사이트는IgxMonthPickerComponent 날짜의 현지화 및 서식화를 위해 국제 WebAPI를 사용합니다. 목표 플랫폼에서 폴리필을 지원하지 않는다면 적절한 폴리필 사용을 고려해 보세요.

    Using the Angular Month Picker

    템플릿에 Angular Month Picker를 추가하려면 다음 코드를 사용하세요.

    <!-- month-picker-sample.component.html -->

<igx-month-picker></igx-month-picker>

    Setting date

    입력을IgxMonthPickerComponent 사용할 날짜value를 정하세요.

    // month-picker-sample.component.ts

public date: Date = new Date();

    <!-- month-picker-sample.component.html -->

<igx-month-picker [value]="date"></igx-date-picker>

    양방향 데이터 바인딩을 만들려면 다음과 같이 설정ngModel 하세요:

    <!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date"></igx-date-picker>

    Formatting

    입력을formatOptions 사용해 월 선택 표시 형식을 변경하세요.

    <!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date" [formatOptions]="numericFormatOptions"></igx-month-picker>

    // month-picker-sample.component.ts

public date: Date = new Date();
public numericFormatOptions = {
    month: '2-digit'
};

    Localization

    입력을locale 사용해 Ignite UI for Angular 월 피커 현지화를 맞춤화하세요.

    <!-- month-picker-sample.component.html -->

<igx-month-picker [(ngModel)]="date" [locale]="locale" [formatOptions]="formatOptions"></igx-month-picker>

    // month-picker-sample.component.ts

public date: Date = new Date();
public locale: 'fr';
public formatOptions = {
    month: 'long'
};

    다음은 월 선택기 구성 요소를 지역화하고 형식을 지정하는 예입니다.

    키보드 탐색

    • ​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';

    월 선택기는 달력의 테마를 사용하기 때문에, 확장하는calendar-theme 새로운 테마를 만들어야 합니다. 월별 선택자의 아이템을 스타일링하려면 매개변수를$content-background 설정할 수 있습니다. 선택적으로, 나머지 속성을 덮어쓰고 싶은지도 설정할$header-background 수 있습니다. 이 두 매개변수는 테마의 기초 역할을 하며, 호버, 선택, 활성화 등 모든 상호작용 상태에 맞는 적절한 배경 및 전경 색상을 자동으로 생성합니다.

    $my-calendar-theme: calendar-theme(
  $border-radius: 15px,
  $content-background: #57a5cd,
);

    다음 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.

    @include css-vars($my-calendar-theme);

    모든 작업이 완료되면 구성 요소는 다음과 같아야 합니다.

    Demo

    Styling with Tailwind

    저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일month picker 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

    전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다. 월 선택기는 달력 테마에 맞게 스타일링되므로 calendar 유틸리티 클래스를 사용해야 합니다

    • 라이트 테마에는 클래스를 사용light-* 하세요.
    • 어두운 테마에는 클래스를 사용dark-* 하세요.
    • 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-calendar​dark-calendar 예: .

    이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

    전체 부동산 목록은 캘린더 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

    <igx-month-picker
class="!light-calendar
![--header-background:#4F6A5A]
![--content-background:#A3C7B2]">
</igx-month-picker>
    Note

    느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

    마지막에 월 선택기는 다음과 같이 보여야 합니다:

    API References

    Theming Dependencies

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.