极客教程Angular PrimeNG Fieldset属性
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。在这篇文章中，我们将看到如何使用Angular PrimeNG中不同的可用字段属性。
Fieldset组件是一个分组组件，它接收一个标题以及与该标题相关的一些内容，具有切换功能。
Angular PrimeNG Fieldset属性：
- legend : 它是字段集的标题文本。它是字符串数据类型，默认值为空。
- toggleable : 它指定了是否可以通过点击图例来切换内容。它是布尔数据类型，默认值是false。
- collapsed：它定义了内容的默认可见性状态。它是布尔数据类型，默认值为false。
- style : 它是一个字段集的内联样式。它是字符串数据类型，默认值为空。
- styleClass。它是字段集的风格类。它是字符串数据类型，默认值为空。
- transitionOptions :这是动画的过渡选项。它是字符串数据类型，默认值是400ms cubic-bezier（0.86, 0, 0.07, 1）。
**创建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
项目结构：运行上述步骤中提到的命令后，它将看起来像如下。
Project Structure
- 运行应用程序的步骤。在项目的根目录下使用以下命令运行应用程序。
ng serve --open
例子1 。我们正在创建一个显示**Angular PrimeNG Fieldset Properties的UI。
- app.component.html
<div style="margin:100px;">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Fieldset Properties</h3>
<p-fieldset legend="DSA - Self Paced Course"
[toggleable]="true"
[collapsed]="true"
[style]="{'backgroundColor':'black',
'color':'green'}">
<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><br /><br />
<p-fieldset legend="Complete Interview Preparation Course"
[toggleable]="true"
[collapsed]="true"
[style]="{'backgroundColor':'black',
'color':'green'}">
<p>
An interview-centric course designed to prepare you for
the role of SDE for both product and service based
companies. A placement preparation pack built
with years of expertise. Prepare C++, Java, DSA,
CS Theory concepts and much more!
</p>
</p-fieldset>
</div>
- app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent { }
- 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 { }
输出:
示例2：我们正在创建一个用户界面，显示上述属性的字段集。
- app.component.html
<div style="margin:100px;">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Fieldset Properties</h3>
<br />
<p-fieldset legend="Hi Geek!"
[toggleable]="true"
transitionOptions="1000ms"
[style]="{'color':'green',
'text-align':'center'}">
<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.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent { }
- 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 { }
输出:
