Стиль 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: 10deg; margin-top: 100px;} |
Выход:
Ссылка: https://primefaces.org/primeng/fieldset