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

update timelinedoc

Browse Source
This commit is contained in:
Mehmet Çetin
2025-01-06 12:41:18 +03:00
parent 1e85c1bbea
commit f28fdbe423
1 changed files with 28 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/uikit/timelinedoc.ts
View File

@@ -6,12 +6,7 @@ import { ButtonModule } from 'primeng/button';
@Component({ @Component({
standalone: true, standalone: true,
imports: [ imports: [CommonModule, TimelineModule, ButtonModule, CardModule],
CommonModule,
TimelineModule,
ButtonModule,
CardModule
],
template: ` <div class="grid grid-cols-12 gap-8"> template: ` <div class="grid grid-cols-12 gap-8">
<div class="col-span-6"> <div class="col-span-6">
<div class="card"> <div class="card">
@@ -60,17 +55,19 @@ import { ButtonModule } from 'primeng/button';
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Templating</div> <div class="font-semibold text-xl mb-4">Templating</div>
<p-timeline [value]="events1" align="alternate" styleClass="customized-timeline"> <p-timeline [value]="events1" align="alternate" styleClass="customized-timeline">
<ng-template pTemplate="marker" let-event> <ng-template #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"> <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" [style]="{ 'background-color': event.color }">
<i [ngClass]="event.icon"></i> <i [class]="event.icon"></i>
</span> </span>
</ng-template> </ng-template>
<ng-template pTemplate="content" let-event> <ng-template #content let-event>
<p-card [header]="event.status" [subheader]="event.date"> <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" /> <img *ngIf="event.image" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + event.image" [alt]="event.name" width="200" class="shadow" />
<p class="line-height-3 my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt <p>
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p> 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,
<button pButton label="Read more" class="p-button-outlined mb-5"></button> cupiditate neque quas!
</p>
<p-button label="Read more" [text]="true" />
</p-card> </p-card>
</ng-template> </ng-template>
</p-timeline> </p-timeline>
@@ -81,33 +78,30 @@ import { ButtonModule } from 'primeng/button';
<div class="font-semibold text-xl mb-4">Horizontal</div> <div class="font-semibold text-xl mb-4">Horizontal</div>
<div class="font-semibold mb-2">Top Align</div> <div class="font-semibold mb-2">Top Align</div>
<p-timeline [value]="events2" layout="horizontal" align="top"> <p-timeline [value]="events2" layout="horizontal" align="top">
<ng-template pTemplate="content" let-event> <ng-template #content let-event>
{{ event }} {{ event }}
</ng-template> </ng-template>
</p-timeline> </p-timeline>
<div class="font-semibold mt-4 mb-2">Bottom Align</div> <div class="font-semibold mt-4 mb-2">Bottom Align</div>
<p-timeline [value]="events2" layout="horizontal" align="bottom"> <p-timeline [value]="events2" layout="horizontal" align="bottom">
<ng-template pTemplate="content" let-event> <ng-template #content let-event>
{{ event }} {{ event }}
</ng-template> </ng-template>
</p-timeline> </p-timeline>
<div class="font-semibold mt-4 mb-2">Alternate Align</div> <div class="font-semibold mt-4 mb-2">Alternate Align</div>
<p-timeline [value]="events2" layout="horizontal" align="alternate"> <p-timeline [value]="events2" layout="horizontal" align="alternate">
<ng-template pTemplate="content" let-event> <ng-template #content let-event>
{{ event }} {{ event }}
</ng-template> </ng-template>
<ng-template pTemplate="opposite" let-event> <ng-template #opposite let-event> &nbsp; </ng-template>
&nbsp;
</ng-template>
</p-timeline> </p-timeline>
</div> </div>
</div> </div>
</div>`, </div>`
}) })
export class TimelineDoc { export class TimelineDoc {
events1: any[] = []; events1: any[] = [];
events2: any[] = []; events2: any[] = [];
@@ -141,9 +135,6 @@ export class TimelineDoc {
} }
]; ];
this.events2 = [ this.events2 = ['2020', '2021', '2022', '2023'];
"2020", "2021", "2022", "2023"
];
} }
} }