Свойства панели Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем о различных свойствах компонента Panel в Angular PrimeNG.
Компонент панели позволяет нам создать элемент, содержащий заголовок и некоторый контент, связанный с этим заголовком.
Свойства панели:
- заголовок: Это текст заголовка панели. Это строковый тип данных, значение по умолчанию равно null.
- toggleable: определяет, может ли содержимое панели быть развернуто и свернуто или нет. Имеет логический тип данных, значение по умолчанию — false.
- свернутый: определяет начальное состояние содержимого панели. Имеет логический тип данных, значение по умолчанию — false.
- стиль: это встроенный стиль компонента. Это строковый тип данных, значение по умолчанию равно null.
- styleClass: это класс стиля компонента. Это строковый тип данных, значение по умолчанию равно null.
- expandIcon: это значок расширения кнопки-переключателя. Это строковый тип данных, значение по умолчанию — pi pi-plus.
- коллапсИкон: это свернутый значок кнопки-переключателя. Это строковый тип данных, значение по умолчанию — пи пи минус.
- showHeader: указывает, нельзя ли отобразить заголовок панели. Это логический тип данных, и значение по умолчанию — true.
- transitionOptions: это вариант перехода анимации. Это строковый тип данных, значение по умолчанию — 400 мс кубического Безье (0,86, 0, 0,07, 1).
- toggler: указывает, должен ли элемент toggler переключать содержимое панели. Это строковый тип данных, значением по умолчанию является значок.
- iconPos: используется для определения положения значков.
Создание приложения Angular и установка модуля:
Шаг 1: Чтобы создать приложение angular, вам необходимо установить интерфейс командной строки angular с помощью команды npm.
npm install -g angular-cli
Шаг 2: Теперь мы создадим угловой проект.
ng new project_name
Шаг 3: После создания углового проекта перейдите в папку для выполнения различных операций.
cd project_name
Шаг 4: После создания приложения Angular установите необходимый модуль с помощью следующей команды:
npm install primeng --save npm install primeicons --save
Структура проекта: после выполнения команд, упомянутых в предыдущих шагах, он будет выглядеть следующим образом:
Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
ng serve --open
Пример 1: мы создаем пользовательский интерфейс, который показывает свойства панели Angular PrimeNG.
- приложение.component.html:
HTML
< div style = "margin:100px;" > < h1 style = "color: green;" >GeeksforGeeks</ h1 > < h3 >Angular PrimeNG Panel Properties</ h3 > < p-panel header = "DSA Self Paced Course" [toggleable]="true" [collapsed]="true" collapseIcon = "pi pi-angle-double-up" expandIcon = "pi pi-angle-double-down" > < p > Most popular course on DSA trusted by over 75,000 students! Built with years of experience by industry experts and gives you a complete package of video lectures, practice problems, quizzes, discussion forums and contests. Start Today! </ p > </ p-panel > </ div > |
- 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 { PanelModule } from "primeng/panel" ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, PanelModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Пример 2: Мы создаем пользовательский интерфейс, который показывает вышеупомянутые свойства панели.
- app.component.html
HTML
< div style = "margin:100px;" > < h1 style = "color: green;" >GeeksforGeeks</ h1 > < h3 >Angular PrimeNG Panel Properties</ h3 > < p-panel header = "Hi Geek!" [toggleable]="true" [collapsed]="true" collapseIcon = "pi pi-angle-double-up" expandIcon = "pi pi-angle-double-down" iconPos = "center" > < p > Welcome to Geeks For Geeks!< br />Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing. </ p > </ p-panel > </ div > |
- 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 { PanelModule } from "primeng/panel" ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, PanelModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Ссылка: https://primefaces.org/primeng/panel