Свойства диалога Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем, как использовать свойства диалога в Angular PrimeNG.
Компонент Dialog используется для создания компонента, содержащего некоторое содержимое, для отображения в окне наложения.
Свойства диалога Angular PrimeNG:
- заголовок: Это текст заголовка диалога. Это строковый тип данных, значение по умолчанию равно null.
- draggable: позволяет перетаскивать, чтобы изменить положение с помощью заголовка. Это логический тип данных, и значение по умолчанию — true.
- keepInViewport: используется для сохранения диалога в области просмотра. Это логический тип данных, и значение по умолчанию — true.
- resizable: позволяет изменять размер содержимого. Это логический тип данных, и значение по умолчанию — true.
- contentStyle: используется для установки стиля раздела содержимого. Это объектный тип данных, значение по умолчанию равно null.
- visible: определяет видимость диалогового окна. Это логический тип данных, значение по умолчанию — false.
- modal: используется для определения того, должен ли фон блокироваться при отображении диалогового окна. Это логический тип данных, значение по умолчанию — false.
- position: используется для установки позиции диалога. Это строковый тип данных, значение по умолчанию — центр.
- blockScroll: используется для указания, следует ли блокировать фоновую прокрутку, когда диалоговое окно видимо. Это логический тип данных, значение по умолчанию — false.
- closeOnEscape: используется для указания, должно ли нажатие клавиши escape скрыть диалоговое окно. Это логический тип данных, и значение по умолчанию — true.
- rejectableMask: используется, чтобы указать, должен ли щелчок по модальному фону скрывать диалоговое окно. Имеет логический тип данных, значение по умолчанию — false.
- rtl: когда включенный диалог отображается в направлении RTL. Имеет логический тип данных, значение по умолчанию — false.
- closable: используется для установки значка закрытия в заголовок, чтобы скрыть диалоговое окно. Это логический тип данных, и значение по умолчанию — true.
- appendTo: используется для установки элемента Target для присоединения диалога, допустимые значения — «body» или локальная переменная ng-template другого элемента. Он принимает любой тип данных, значение по умолчанию равно null.
- стиль: используется для установки встроенного стиля компонента. Это объектный тип данных, значение по умолчанию равно null.
- styleClass: используется для установки класса стиля компонента. Это строковый тип данных, значение по умолчанию равно null.
- maskStyleClass: используется для установки класса стиля маски. Это строковый тип данных, значение по умолчанию равно null.
- contentStyle: используется для установки встроенного стиля содержимого. Это объектный тип данных, значение по умолчанию равно null.
- contentStyleClass: используется для установки класса стиля содержимого. Это строковый тип данных, значение по умолчанию равно null.
- showHeader: используется для указания, показывать заголовок или нет. Это логический тип данных, и значение по умолчанию — true.
- baseZIndex: используется для установки базового значения zIndex для использования в слоях. Это числовой тип данных, значение по умолчанию равно 0.
- autoZIndex: используется для указания, следует ли автоматически управлять слоем. Это логический тип данных, и значение по умолчанию — true.
- minX: используется для установки минимального значения левой координаты диалога при перетаскивании. Это числовой тип данных, значение по умолчанию равно 0.
- minY: используется для установки минимального значения верхней координаты диалогового окна при перетаскивании. Это числовой тип данных, значение по умолчанию равно 0.
- focusOnShow: используется для указания, что первая кнопка получает фокус на шоу. Это логический тип данных, и значение по умолчанию — true.
- focusTrap: используется, чтобы указать, могут ли элементы фокусироваться только на элементах внутри диалогового окна. Это логический тип данных, и значение по умолчанию — true.
- maximizable: используется, чтобы указать, может ли диалоговое окно отображаться на весь экран. Это логический тип данных, значение по умолчанию — false.
- точки останова: это литерал объекта для определения ширины на размер экрана. Это объектный тип данных, значение по умолчанию равно null.
- transitionOptions: используется для установки параметров перехода анимации. Это строковый тип данных, значение по умолчанию — 150 мс кубического Безье (0, 0, 0,2, 1).
- closeIcon: используется для установки имени значка закрытия. Это строковый тип данных, значение по умолчанию равно null.
- MinimIcon: используется для установки имени значка минимизации. Это строковый тип данных, значение по умолчанию — pi pi-window-minimize.
- maximiseIcon: используется для установки имени значка максимизации. Это строковый тип данных, значение по умолчанию — pi pi-window-maximize.
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Это будет выглядеть следующим образом:
Чтобы запустить указанный выше файл, выполните следующую команду:
ng serve --save
Пример 1. Ниже приведен пример кода, который иллюстрирует использование свойств диалога Angular PrimeNG с использованием свойств перетаскивания и изменения размера .
- приложение.component.html:
HTML
< h1 style = "color: green" >GeeksforGeeks</ h1 > < h5 >Angular PrimeNG Dialog Properties</ h5 > < p-button (click)="GFG()" icon = "pi pi-check" label = "Click here Geek!" > </ p-button > < p-dialog header = "GeeksforGeeks" [(visible)]="gfg" [modal]="true" [draggable]="true" [resizable]="true" [style]="{width: "75vw"}" [baseZIndex]="10000"> < p > Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. </ p > < ng-template pTemplate = "footer" > < p-button icon = "pi pi-check" (click)=" gfg = false " label = "Confirm" styleClass = "p-button-text" > </ p-button > < p-button icon = "pi pi-times" (click)=" gfg = false " label = "Reject" > </ p-button > </ ng-template > </ p-dialog > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; import { PrimeNGConfig } from "primeng/api" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , }) export class AppComponent { constructor(private primengConfig: PrimeNGConfig) {} gfg: boolean; ngOnInit() { this .primengConfig.ripple = true ; } GFG() { this .gfg = true ; } } |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { DialogModule } from "primeng/dialog" ; import { ButtonModule } from "primeng/button" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, DialogModule, ButtonModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
Выход:
Пример 2. Ниже приведен еще один пример кода, иллюстрирующий использование свойств диалога Angular PrimeNG с использованием свойства position .
- приложение.component.html:
HTML
< h1 style = "color: green" >GeeksforGeeks</ h1 > < h5 >Angular PrimeNG Dialog Position Properties</ h5 > < p-button (click)="GFG()" label = "Click Here Geek!" > </ p-button > < p-dialog position = "top" header = "GeeksforGeeks" [(visible)]="gfg"> < p >I am Top!</ p > </ p-dialog > < p-dialog position = "bottom" header = "GeeksforGeeks" [(visible)]="gfg"> < p >I am Bottom!</ p > </ p-dialog > < p-dialog position = "left" header = "GeeksforGeeks" [(visible)]="gfg"> < p >I am Left!</ p > </ p-dialog > < p-dialog position = "right" header = "GeeksforGeeks" [(visible)]="gfg"> < p >I am Right!</ p > </ p-dialog > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; import { PrimeNGConfig } from "primeng/api" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , }) export class AppComponent { constructor(private primengConfig: PrimeNGConfig) {} gfg: boolean; ngOnInit() { this .primengConfig.ripple = true ; } GFG() { this .gfg = true ; } } |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { DialogModule } from "primeng/dialog" ; import { ButtonModule } from "primeng/button" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, DialogModule, ButtonModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
Выход:
Ссылка: https://primefaces.org/primeng/dialog