Angular PrimeNG分割器属性

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将了解如何在Angular PrimeNG中使用Divider组件的属性。

分界线组件是用来做一个使用分界线来划分内容的组件。

Angular PrimeNG Divider属性：

align: 它用于设置内容的对齐方式。它是字符串数据类型，默认值为空。
layout。它用于指定方向。它是字符串数据类型，默认值为水平。
type。它是边界风格类型。它是字符串数据类型，默认值是纯色。
style。它是组件的内联样式。它是对象数据类型，默认值为空。
styleClass。它是组件的风格类。它的数据类型为字符串，默认值为空。

方法：让我们创建一个Angular项目并安装PrimeNG UI模块。然后我们将创建一个UI，展示Angular PrimeNG Divider属性。

创建React项目：

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

npm install -g angular-cli

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

ng new project_name

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

cd project_name

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

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

项目结构：在运行上述步骤中提到的命令后，如果你在编辑器中打开项目，你可以看到一个类似于下图的项目结构。用户所做的新组件或代码修改，我们将在源文件夹中完成。

Angular PrimeNG分割器属性

Project Structure

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

ng serve --open

例子1：我们正在创建一个显示PrimeNG分割器属性的用户界面。

app.component.html

<div style="margin:100px">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h3>
        Angular PrimeNG PrimeNG Divider Properties
    </h3>
    <p-divider type="dotted">
        Dotted Type Divider
    </p-divider>
    <h2>
        DSA Self Paced Course
    </h2>
    <p-divider type="dashed">
        Dashed Type Divider
    </p-divider>
    <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.<br />
        Start Today !
    </p>
    <p-divider type="solid">
        Solid Type Divider
    </p-divider>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DividerModule } from "primeng/divider";
import { AppComponent } from './app.component';
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DividerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出：现在打开你的浏览器，进入http://localhost:3000/_ ，你会看到以下输出。

Angular PrimeNG分割器属性

例子2：我们正在创建一个显示PrimeNG分割器属性的用户界面。

app.component.html

<div style="margin:100px">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG PrimeNG Divider Properties</h3>
    <p>Geeks For Geeks - Billions of Users, 
        Millions of Articles Published, Thousands Got Hired by
        Top Companies and the numbers are still growing.
    </p>
    <p-divider align="right">Right Aligned Divider</p-divider>
    <p>Geeks For Geeks - Billions of Users, 
        Millions of Articles Published, Thousands Got Hired by
        Top Companies and the numbers are still growing.
    </p>
    <p-divider align="center">Center Aligned Divider</p-divider>
    <p>Geeks For Geeks - Billions of Users, 
        Millions of Articles Published, Thousands Got Hired by
        Top Companies and the numbers are still growing.
    </p>
    <p-divider align="left">Left Aligned Divider</p-divider>
</div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DividerModule } from "primeng/divider";
import { AppComponent } from './app.component';
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DividerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出：现在打开你的浏览器，进入http://localhost:3000/_ ，你会看到以下输出。

Angular PrimeNG分割器属性