carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add TimelineDoc

Browse Source
This commit is contained in:
Çetin
2025-01-03 00:55:40 +03:00
parent 3a5d90d308
commit ae1184f3e5
1 changed files with 147 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/views/uikit/timelinedoc.ts Normal file
View File

@@ -0,0 +1,147 @@
import { Component } from '@angular/core';
import { TimelineModule } from 'primeng/timeline';
import { CardModule } from 'primeng/card';
import { CommonModule } from '@angular/common';
import { ButtonModule } from 'primeng/button';
@Component({
standalone:true,
imports: [
CommonModule,
TimelineModule,
ButtonModule,
CardModule
],
template: `<div class="grid">
<div class="col-12 md:col-6">
<div class="card">
<h5>Left Align</h5>
<p-timeline [value]="events1">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>Right Align</h5>
<p-timeline [value]="events1" align="right">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>Alternate Align</h5>
<p-timeline [value]="events1" align="alternate">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">
<h5>Opposite Content</h5>
<p-timeline [value]="events1">
<ng-template pTemplate="content" let-event>
<small class="p-text-secondary">{{event.date}}</small>
</ng-template>
<ng-template pTemplate="opposite" let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
</div>
</div>
<div class="card">
<h5>Customized</h5>
<p-timeline [value]="events1" align="alternate" styleClass="customized-timeline">
<ng-template pTemplate="marker" let-event>
<span class="flex z-1 w-2rem h-2rem align-items-center justify-content-center text-white border-circle shadow-2" [style.backgroundColor]="event.color">
<i [ngClass]="event.icon"></i>
</span>
</ng-template>
<ng-template pTemplate="content" let-event>
<p-card [header]="event.status" [subheader]="event.date">
<img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
<p class="line-height-3 my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
<button pButton label="Read more" class="p-button-outlined mb-5"></button>
</p-card>
</ng-template>
</p-timeline>
</div>
<div class="card">
<h5>Horizontal</h5>
<h6>Top Align</h6>
<p-timeline [value]="events2" layout="horizontal" align="top">
<ng-template pTemplate="content" let-event>
{{event}}
</ng-template>
</p-timeline>
<h6>Bottom Align</h6>
<p-timeline [value]="events2" layout="horizontal" align="bottom">
<ng-template pTemplate="content" let-event>
{{event}}
</ng-template>
</p-timeline>
<h6>Alternate Align</h6>
<p-timeline [value]="events2" layout="horizontal" align="alternate">
<ng-template pTemplate="content" let-event>
{{event}}
</ng-template>
<ng-template pTemplate="opposite" let-event>
&nbsp;
</ng-template>
</p-timeline>
</div>`,
})
export class TimelineDoc {
events1: any[] = [];
events2: any[] = [];
ngOnInit() {
this.events1 = [
{
status: 'Ordered',
date: '15/10/2020 10:30',
icon: 'pi pi-shopping-cart',
color: '#9C27B0',
image: 'game-controller.jpg'
},
{
status: 'Processing',
date: '15/10/2020 14:00',
icon: 'pi pi-cog',
color: '#673AB7'
},
{
status: 'Shipped',
date: '15/10/2020 16:15',
icon: 'pi pi-envelope',
color: '#FF9800'
},
{
status: 'Delivered',
date: '16/10/2020 10:00',
icon: 'pi pi-check',
color: '#607D8B'
}
];
this.events2 = [
"2020", "2021", "2022", "2023"
];
}
}