Docs
Skeleton
Skeleton
Use to show a placeholder while content is loading.
Loading...
Loading...
import { UbSkeletonDirective } from '@/components/ui/skeleton'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'skeleton-demo-new-york',
imports: [UbSkeletonDirective],
template: `
<div class="flex items-center space-x-4">
<div ubSkeleton class="h-12 w-12 rounded-full"></div>
<div class="space-y-2">
<div ubSkeleton class="h-4 w-[250px]"></div>
<div ubSkeleton class="h-4 w-[200px]"></div>
</div>
</div>
`,
})
export class SekeletonDemoNewYork { }import { UbSkeletonDirective } from '@/components/ui/skeleton'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'skeleton-demo-default',
imports: [UbSkeletonDirective],
template: `
<div class="flex items-center space-x-4">
<div ubSkeleton class="h-12 w-12 rounded-full"></div>
<div class="space-y-2">
<div ubSkeleton class="h-4 w-[250px]"></div>
<div ubSkeleton class="h-4 w-[200px]"></div>
</div>
</div>
`,
})
export class SekeletonDemoDefault { }Installation
npx shadcn-ng@latest add skeleton
npm
yarn
pnpm
bun
Copy and paste the following code into your project.
import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'
@Directive({
selector: 'ubSkeleton',
standalone: true,
host: {
'[class]': 'computedClass()',
},
})
export class UbSkeletonDirective {
readonly class = input<string>()
protected computedClass = computed(() =>
cn('animate-pulse rounded-md bg-primary/10', this.class()),
)
}import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'
@Directive({
selector: 'ubSkeleton',
standalone: true,
host: {
'[class]': 'computedClass()',
},
})
export class UbSkeletonDirective {
readonly class = input<string>()
protected computedClass = computed(() =>
cn('animate-pulse rounded-md bg-muted', this.class()),
)
}Update the import paths to match your project setup.
Usage
import { UbSkeletonDirective } from "@/components/ui/sekeleton.directive";<div ubSkeleton class="w-[100px] h-[20px] rounded-full"></div>Examples
Card
Loading...
Loading...
import { UbSkeletonDirective } from '@/components/ui/skeleton'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'sekeleton-card-new-york',
imports: [UbSkeletonDirective],
template: `
<div class="flex flex-col space-y-3">
<div ubSkeleton class="h-[125px] w-[250px] rounded-xl"></div>
<div class="space-y-2">
<div ubSkeleton class="h-4 w-[250px]"></div>
<div ubSkeleton class="h-4 w-[200px]"></div>
</div>
</div>
`,
})
export class SekeletonCardNewYork { }import { UbSkeletonDirective } from '@/components/ui/skeleton'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'skeleton-card-default',
imports: [UbSkeletonDirective],
template: `
<div class="flex flex-col space-y-3">
<div ubSkeleton class="h-[125px] w-[250px] rounded-xl"></div>
<div class="space-y-2">
<div ubSkeleton class="h-4 w-[250px]"></div>
<div ubSkeleton class="h-4 w-[200px]"></div>
</div>
</div>
`,
})
export class SekeletonCardDefault { }