极客教程Angular PrimeNG时间线组件
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。
在这篇文章中，我们将了解如何在Angular PrimeNG中使用TimeLine组件。我们还将学习属性、样式以及在代码中使用的语法。
时间线组件：它用于显示进程的时间线。
属性:
- value : 它是一个要显示的事件数组。它是数组的数据类型，默认值为空。
- align : 它是时间线条相对于内容的位置。它是字符串数据类型，默认值为左。
- layout:它是时间线的方向。它是字符串数据类型，默认值是垂直。
- style : 它是组件的内联风格。它的数据类型为字符串，默认值为空。
- styleClass : 它是组件的风格类。它的数据类型为字符串，默认值为空。
样式:
- p-timeline。它是容器元素。
- p-timeline-left。当对齐方式为左时，它是容器元素。
- p-timeline-right：当对齐方式为右时，它是容器元素。
- p-timeline-top：当对齐方式为顶部时，它是容器元素。
- p-timeline-bottom。当对齐方式为底部时，它是容器元素。
- p-timeline-alternate。当对齐方式为交替时，它是容器元素。
- p-timeline-vertical: 它是一个垂直时间线的容器元素。
- p-timeline-horizontal: 它是一个水平时间线的容器元素。
- p-timeline-event。它是事件元素。
- p-timeline-event-opposite。它是事件内容的反面。
- p-timeline-event-content。它是事件的内容。
- p-timeline-event-separator。它是一个事件的分离器元素。
- p-timeline-event-marker。它是一个事件的标记元素。
- p-timeline-event-connector。它是一个事件的连接器元素。
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：它将看起来像如下。
例子1：这是一个基本的例子，展示了如何使用时间线组件。
<div class="card">
<h5>Left Align</h5>
<p-timeline [value]="gfg">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
<div class="card">
<h5>Right Align</h5>
<p-timeline [value]="gfg" align="right">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
<div class="card">
<h5>Alternate Align</h5>
<p-timeline [value]="gfg" align="alternate">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {
gfg: any[];
ngOnInit() {
this.gfg = [
{
status: "Time 1",
},
{
status: "Time 2",
},
{
status: "Time 3",
},
{
status: "Time 4",
},
];
}
}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { FormsModule } from "@angular/forms";
import { TimelineModule } from "primeng/timeline";
import { CardModule } from "primeng/card";
import { AppComponent } from "./app.component";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
TimelineModule,
CardModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
例子2：在这个例子中，我们将知道如何在时间线组件中使用layout属性。
<h6>Top Align</h6>
<p-timeline [value]="arr" layout="horizontal" align="top">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
<h6>Bottom Align</h6>
<p-timeline [value]="arr" layout="horizontal" align="bottom">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
<h6>Alternate Align</h6>
<p-timeline [value]="arr" layout="horizontal" align="alternate">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
<ng-template pTemplate="opposite" let-event>
</ng-template>
</p-timeline>
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
arr: any[];
ngOnInit() {
this.arr = [
{
status: "Time1",
},
{
status: "Time2",
},
{
status: "Time3",
},
{
status: "Time4",
},
];
}
}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { FormsModule } from "@angular/forms";
import { TimelineModule } from "primeng/timeline";
import { CardModule } from "primeng/card";
import { AppComponent } from "./app.component";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
TimelineModule,
CardModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
