Стиль Angular PrimeNG Fieldset

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

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