diff --git a/src/views/uikit/miscdoc.ts b/src/views/uikit/miscdoc.ts new file mode 100644 index 0000000..9e995ea --- /dev/null +++ b/src/views/uikit/miscdoc.ts @@ -0,0 +1,229 @@ +import { Component } from '@angular/core'; +import { ProgressBar, ProgressBarModule } from 'primeng/progressbar'; +import { AvatarGroupModule } from 'primeng/avatargroup'; +import { CommonModule } from '@angular/common'; +import { ScrollTopModule } from 'primeng/scrolltop'; +import { SkeletonModule } from 'primeng/skeleton'; +import { BadgeModule } from 'primeng/badge'; +import { AvatarModule } from 'primeng/avatar'; +import { ScrollPanelModule } from 'primeng/scrollpanel'; +import { TagModule } from 'primeng/tag'; +import { ChipModule } from 'primeng/chip'; +import { ButtonModule } from 'primeng/button'; +import { OverlayBadgeModule } from 'primeng/overlaybadge'; + +@Component({ + standalone:true, + imports: [ + CommonModule, + ProgressBarModule, + BadgeModule, + AvatarModule, + ScrollPanelModule, + TagModule, + ChipModule, + ButtonModule, + SkeletonModule, + AvatarGroupModule, + ScrollTopModule, + OverlayBadgeModule + ], + template: `
+
+
+
ProgressBar
+
+
+ +
+
+ +
+
+
+
+
+
+

Badge

+
Numbers
+
+ + + + + +
+ +
Positioned Badge
+
+ + + +
+ + +
Inline Button Badge
+
+ + +
+ + +
Sizes
+
+ + + +
+
+ +
+

Avatar

+
Avatar Group
+ + + + + + + + + +
Label - Circle
+
+ + + +
+ +
Icon - Badge
+ +
+ +
+

ScrollTop

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Vitae et leo duis ut diam. + Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. + Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. + Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. + Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. + Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. + Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. + Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. + Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. + Mattis aliquam faucibus purus in massa tempor nec. +

+ + +
+
+
+
+

Tag

+
Tags
+
+ + + + + +
+ +
Pills
+
+ + + + + +
+ +
Icons
+
+ + + + + +
+
+ +
+

Chip

+
Basic
+
+ + + + +
+ +
Icon
+
+ + + + +
+ +
Image
+
+ + + + +
+ +
Styling
+
+ + + + +
+
+ +
+

Skeleton

+
+
+ +
+ + + +
+
+ +
+ + +
+
+
+
+
+ `, +}) +export class MiscDoc { + value = 0; + + interval: any; + + ngOnInit() { + this.interval = setInterval(() => { + this.value = this.value + Math.floor(Math.random() * 10) + 1; + if (this.value >= 100) { + this.value = 100; + clearInterval(this.interval); + } + }, 2000); + } + + ngOnDestroy() { + clearInterval(this.interval); + } +}