modal-window v4.0.1

ModalWindow

This library was generated with Angular CLI version 7.2.0.

Code scaffolding

Run ng generate component component-name --project modal-window to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project modal-window.

Note: Don't forget to add --project modal-window or else it will be added to the default project in your angular.json file.

Usage

<modal-window [title]="'Title'" [visible]="visible" [numberPath]="'A5'"
    [calendarInfo]="calendarInfo" [showCalendar]="true" [littleModal]="false" [colorScheme]="colorScheme" 
    (close)="close(); visible = false" (emitCalendarInfo)="function($event)">
</modal-window>

Interfaces

Используйте интерфейсы для передачи данных на компонент

Первый интерфейс содержит дату начало и дату конца календаря

Второй интерфейс используется для цветовой гаммы модального окна

interface CalendarInfo {
  startDate: string;
  endDate: string;
}

interface ColorScheme {
  modalHeaderBackground: string;
  modalHeaderPiecesBackground: string;
  modalHeaderPiecesHover: string;
  modalBodyBackground: string;
  modalHeaderTextColor: string;
  modalIdColor: string;
  modalCalendarColor: string;
}

Library inputs

showCalendar - модальное окно содержит календарь или нет

calendarInfo - для отображения даты начало и конца календаря

littleModal - маленькое или большое модальное окно

visible - модальное окно активный или не активный

@Input() calendarInfo: CalendarInfo = null;
@Input() title: string = '';
@Input() numberPath: string = '';
@Input() colorScheme: ColorScheme = {
    modalHeaderBackground: '#2a2e39',
    modalHeaderPiecesBackground: '#000000',
    modalHeaderPiecesHover: '#1b1e25',
    modalBodyBackground: '#ffffff',
    modalHeaderTextColor: '#ffffff',
    modalIdColor: '#66BBFF',
    modalCalendarColor: '#f1cc31'
};
@Input() fontSize: string = '100';
@Input() visible: boolean = false;
@Input() littleModal: boolean = false;
@Input() showCalendar: boolean = false;

Screenshot

License

MIT