Пользовательская легенда Angular PrimeNG Fieldset
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Эта статья покажет нам различные пользовательские легенды Fieldset в Angular PrimeNG.
Компонент Fieldset — это компонент группировки, который принимает заголовок вместе с некоторым содержимым, связанным с этим заголовком, имеющим функцию переключения. Вы можете создать свой собственный заголовок, используя шаблон заголовка. Вместо использования свойства легенды вы можете использовать шаблон для создания настраиваемого содержимого заголовков.
Создание приложения 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 Fieldset.
- приложение.component.html:
HTML
<div style="margin:100px;"> <h1 style="color: green">GeeksforGeeks</h1> <h3>Angular PrimeNG Fieldset Custom Legend</h3> <br /> <p-fieldset> <ng-template pTemplate="header"> <span [style]="{"color":"green"}"> Hi Geek ! <i class="pi pi-sun pi-spin"></i> </span></ng-template> <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.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. Мы создаем пользовательский интерфейс, который показывает пользовательскую легенду Angular PrimeNG Fieldset.
- app.component.html
HTML
<div style="margin:100px;"> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Angular PrimeNG Fieldset Custom Legend</h3> <br /> <p-fieldset> <ng-template pTemplate="header"> <span style="color:green; border: 2px green dotted; padding:5px"> <i class="pi pi-star pi-spin"></i> DSA - Self Paced Course <i class="pi pi-star pi-spin"></i> </span> </ng-template> <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></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 { FieldsetModule } from "primeng/fieldset";@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FieldsetModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent]})export class AppModule { } |
Выход:
Ссылка: https://primefaces.org/primeng/fieldset