Свойства набора полей Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим, как использовать различные доступные свойства набора полей в Angular PrimeNG.
Компонент Fieldset — это компонент группировки, который принимает заголовок вместе с некоторым содержимым, связанным с этим заголовком, имеющим функцию переключения.
Свойства набора полей Angular PrimeNG:
- легенда : это текст заголовка набора полей. Это строковый тип данных, значение по умолчанию равно null.
- toggleable : указывает, можно ли переключать содержимое, щелкая легенду. Имеет логический тип данных, значение по умолчанию — false.
- свернутый: определяет состояние видимости содержимого по умолчанию. Имеет логический тип данных, значение по умолчанию — false.
- style : это встроенный стиль набора полей. Это строковый тип данных, значение по умолчанию равно null.
- styleClass: это класс стиля набора полей. Это строковый тип данных, значение по умолчанию равно null.
- transitionOptions : это вариант перехода анимации. Это строковый тип данных, значение по умолчанию — 400 мс кубического Безье (0,86, 0, 0,07, 1).
Создание приложения и модуля 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 .
- app.component.html
HTML
< div style = "margin:100px;" > < h1 style = "color: green" >GeeksforGeeks</ h1 > < h3 >Angular PrimeNG Fieldset Properties</ h3 > < p-fieldset legend = "DSA - Self Paced Course" [toggleable]="true" [collapsed]="true" [style]="{"backgroundColor":"black", "color":"green"}"> < 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-fieldset >< br />< br /> < p-fieldset legend = "Complete Interview Preparation Course" [toggleable]="true" [collapsed]="true" [style]="{"backgroundColor":"black", "color":"green"}"> < p > An interview-centric course designed to prepare you for the role of SDE for both product and service based companies. A placement preparation pack built with years of expertise. Prepare C++, Java, DSA, CS Theory concepts and much more! </ p > </ p-fieldset > </ div > |
- app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "my-app" , templateUrl: "./app.component.html" , }) export class AppComponent { } |
- 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 { FieldsetModule } from "primeng/fieldset" ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FieldsetModule, 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 Fieldset Properties</ h3 > < br /> < p-fieldset legend = "Hi Geek!" [toggleable]="true" transitionOptions = "1000ms" [style]="{"color":"green", "text-align":"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-fieldset > </ div > |
- app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "my-app" , templateUrl: "./app.component.html" , }) export class AppComponent { } |
- 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 { FieldsetModule } from "primeng/fieldset" ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FieldsetModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Ссылка: https://primefaces.org/primeng/fieldset