Свойства набора полей Angular PrimeNG

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

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

Technical Scripter Picked AngularJS

Свойства набора полей Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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