极客教程Angular PrimeNG分割器组件
Angular PrimeNG是一个开源框架，它拥有丰富的原生Angular UI组件，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用Divider组件。我们还将学习属性、造型以及在代码中使用的语法。
分割器组件：它用于制作一个使用分割器来分割内容的组件。
属性：
- align: 它用于设置内容的对齐方式。它是字符串数据类型，默认值为空。
- layout。它用于指定方向。它是字符串数据类型，默认值为水平。
- type。它是边界风格类型。它是字符串数据类型，默认值是纯色。
- style。它是组件的内联样式。它属于对象数据类型，默认值为空。
- styleClass。它是组件的风格类。它的数据类型为字符串，默认值为空。
Styling:
- p-divider :它是容器元素。
- p-divider-horizontal : 它是一个水平布局中的容器元素。
- p-divider-vertical :它是垂直布局中的容器元素。
- p-divider-solid : 它是具有实体边框的容器元素。
- p-divider-dashed : 它是具有虚线边界的容器元素。
- p-divider-dotted : 它是带有虚线边界的容器元素。
- p-divider-left : 它是内容向左对齐的容器元素。
- p-divider-right : 它是内容向右对齐的容器元素。
- p-divider-center : 它是内容居中对齐的容器元素。
- p-divider-bottom : 它是一个容器元素，其内容向底部对齐。
- p-divider-top : 它是内容向顶部对齐的容器元素。
创建Angular应用程序和模块安装。
- 第1步：使用以下命令创建一个Angular应用程序。
ng new appname
- 第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
- 第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构。它将看起来像以下。
例子1：这是一个基本的例子，说明了如何使用分割器组件。
<h2>GeeksforGeeks</h2>
<h5>PrimeNG Divider Component</h5>
<div>
<p>
Angular PrimeNG is a framework used with
angular to create components with great
styling and this framework is very easy
to use and is used to make responsive
websites.
</p>
<p-divider>
<b>Divider</b>
</p-divider>
<p>
Angular PrimeNG is a framework used with
angular to create components with great
styling and this framework is very easy
to use and is used to make responsive
websites.
</p>
<p-divider>
<b>Divider</b>
</p-divider>
<p>
Angular PrimeNG is a framework used with
angular to create components with great
styling and this framework is very easy
to use and is used to make responsive
websites.
</p>
<p-divider>
<b>Divider</b>
</p-divider>
<p>
Angular PrimeNG is a framework used with
angular to create components with great
styling and this framework is very easy
to use and is used to make responsive
websites.
</p>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DividerModule } from "primeng/divider";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
DividerModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
例子2：在这个例子中，我们将知道如何在分隔线组件中使用对齐属性。
<h2>GeeksforGeeks</h2>
<h5>PrimeNG Divider Component</h5>
<div>
<p>
Angular PrimeNG is a framework used with
angular to create components with great
styling and this framework is very easy
to use and is used to make responsive
websites.
</p>
<p-divider align="right" type="dashed">
<b>Divider</b>
</p-divider>
<p>
Angular PrimeNG is a framework used with
angular to create components with great
styling and this framework is very easy
to use and is used to make responsive
websites.
</p>
<p-divider align="center" type="dashed">
<b>Divider</b>
</p-divider>
<p>
Angular PrimeNG is a framework used with
angular to create components with great
styling and this framework is very easy
to use and is used to make responsive
websites.
</p>
<p-divider align="left" type="dashed">
<b>Divider</b>
</p-divider>
<p>
Angular PrimeNG is a framework used with
angular to create components with great
styling and this framework is very easy
to use and is used to make responsive
websites.
</p>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DividerModule } from "primeng/divider";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
DividerModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
