Angular PrimeNG字段集的样式

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架可用于制作响应式网站，非常容易。这篇文章将向我们展示Angular PrimeNG中的字段集样式。

Fieldset组件是一个分组组件，它接收一个标题以及与该标题相关的一些内容，该标题具有切换功能。样式元素被用来在字段集上添加样式。

Fieldset Styling:

p-fieldset。它是fieldet元素。
p-fieldset-toggleable。它是可切换的字段集元素。
p-fieldset-legend。它是图例元素。
p-fieldset-content。它是内容元素。

创建Angular应用程序和模块安装:

第1步：要创建一个angular应用程序，你需要通过npm命令安装angular命令行接口。

npm install -g angular-cli

第2步：现在我们将创建一个angular项目。

ng new project_name

第3步：在创建你的angular项目后，进入文件夹执行不同的操作。

cd project_name

第4步：创建Angular应用程序后，使用以下命令安装所需的模块。

npm install primeng --save
npm install primeicons --save

项目结构：运行上述步骤中提到的命令后，它将看起来像如下。

Angular PrimeNG字段集的样式

Project Structure

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序。

ng serve --open

例子1：我们正在创建一个显示字段集样式的用户界面。

app.component.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:

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 { }

styles.css

/* Write CSS Here */
.p-fieldset-legend {
    font-size: 20px;
}
  
.p-fieldset-content {
    color: green;
    border: 2px green solid;
}

输出:

Angular PrimeNG字段集的样式

有边框的内容字段集

示例2：我们正在创建一个显示字段集样式的用户界面。

app.component.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:

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 { }

styles.css

/* Write CSS Here */
.p-fieldset-content {
    color: green;
    background-color: aliceblue;
} 
.p-fieldset-toggleable{ 
      rotate: 10deg;
      margin-top: 100px;
}

输出:

Angular PrimeNG字段集的样式