Стиль Angular PrimeNG Fieldset
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Эта статья покажет нам стилизацию Fieldset в Angular PrimeNG.
Компонент Fieldset — это компонент группировки, который принимает заголовок вместе с некоторым содержимым, связанным с этим заголовком, имеющим функцию переключения. Элементы стиля используются для добавления стилей в набор полей.
Стиль набора полей:
- p-fieldset: это элемент fieldset.
- p-fieldset-toggleable: это переключаемый элемент набора полей.
- p-fieldset-legend: это элемент легенды.
- p-fieldset-content: это элемент содержимого.
Создание приложения 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: мы создаем пользовательский интерфейс, который показывает стиль набора полей .
- приложение.component.html:
HTML
< div style = "margin: 100px;" > < h1 style = "color: green;" >GeeksforGeeks</ h1 > < h3 >Angular PrimeNG Fieldset Styling</ h3 > < br /> < p-fieldset legend = "DSA - Self Paced Course" > < 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 { } |
- стили.css
CSS
/* Write CSS Here */ .p-fieldset-legend { font-size : 20px ; } .p-fieldset-content { color : green ; border : 2px green solid ; } |
Выход:
Пример 2: мы создаем пользовательский интерфейс, который показывает стили Fieldset.
- app.component.html
HTML
< div style = "margin:100px;" > < h1 style = "color: green;" >GeeksforGeeks</ h1 > < h3 >Angular PrimeNG Fieldset Styling</ h3 > < p-fieldset legend = "Hi Geek!" [toggleable]="true"> < 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 { } |
- стили.css
CSS
/* Write CSS Here */ .p-fieldset-content { color : green ; background-color : aliceblue; } .p-fieldset-toggleable{ rotate: 10 deg; margin-top : 100px ; } |
Выход:
Ссылка: https://primefaces.org/primeng/fieldset