Update folder structure

2021-12-28 13:29:25 +03:00
parent e0762fdeb0
commit ab8f627bb3
71 changed files with 189 additions and 193 deletions
@@ -0,0 +1,34 @@
+<div class="grid">
+    <div class="col-12">
+        <div class="card">
+            <h4>Timeline</h4>
+
+            <h5>Custom Timeline</h5>
+            <p-timeline [value]="customEvents" align="alternate" styleClass="customized-timeline">
+                <ng-template pTemplate="marker" let-event>
+                <span class="custom-marker 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>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-text"></button>
+                    </p-card>
+                </ng-template>
+            </p-timeline>
+
+            <h5 style="margin-top: 5em">Horizontal - Alternate Align</h5>
+            <p-timeline [value]="horizontalEvents" 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>
+    </div>
+</div>
@@ -0,0 +1,72 @@
+import {Component, OnInit} from '@angular/core';
+import {PrimeIcons} from 'primeng/api';
+
+@Component({
+    templateUrl: './timeline.component.html',
+    styles: [`
+        .custom-marker {
+            display: flex;
+            width: 2rem;
+            height: 2rem;
+            align-items: center;
+            justify-content: center;
+            color: #ffffff;
+            border-radius: 50%;
+            z-index: 1;
+        }
+        
+        ::ng-deep {
+            .p-timeline-event-content,
+            .p-timeline-event-opposite {
+                line-height: 1;
+            }
+        }
+        
+        @media screen and (max-width: 960px) {
+            ::ng-deep {
+                .customized-timeline {
+                    .p-timeline-event:nth-child(even) {
+                        flex-direction: row !important;
+        
+                        .p-timeline-event-content {
+                            text-align: left !important;
+                        }
+                    }
+        
+                    .p-timeline-event-opposite {
+                        flex: 0;
+                    }
+        
+                    .p-card {
+                        margin-top: 1rem;
+                    }
+                }
+            }
+        }    
+    `]
+})
+export class TimelineComponent implements OnInit{
+
+    customEvents: any[];
+
+    horizontalEvents: any[];
+
+    ngOnInit() {
+        this.customEvents = [
+            {
+                status: 'Ordered',
+                date: '15/10/2020 10:30',
+                icon: PrimeIcons.SHOPPING_CART,
+                color: '#9C27B0',
+                image: 'game-controller.jpg'
+            },
+            {status: 'Processing', date: '15/10/2020 14:00', icon: PrimeIcons.COG, color: '#673AB7'},
+            {status: 'Shipped', date: '15/10/2020 16:15', icon: PrimeIcons.ENVELOPE, color: '#FF9800'},
+            {status: 'Delivered', date: '16/10/2020 10:00', icon: PrimeIcons.CHECK, color: '#607D8B'}
+        ];
+
+        this.horizontalEvents = [
+            '2020', '2021', '2022', '2023'
+        ];
+    }
+}