Свойства диалога Angular PrimeNG

Опубликовано: 22 Февраля, 2023

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

Technical Scripter Picked AngularJS

Свойства диалога Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ