Docs
Pagination
Pagination
Pagination with page navigation, next and previous links.
Loading...
Loading...
import {
UbPaginationContentDirective,
UbPaginationDirective,
UbPaginationEllipsisComponent,
UbPaginationItemDirective,
UbPaginationLinkDirective,
UbPaginationNextDirective,
UbPaginationPreviousDirective,
} from '@/components/ui/pagination'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'pagination-demo-new-york',
imports: [
UbPaginationContentDirective,
UbPaginationDirective,
UbPaginationEllipsisComponent,
UbPaginationItemDirective,
UbPaginationLinkDirective,
UbPaginationNextDirective,
UbPaginationPreviousDirective,
],
template: `
<nav ubPagination>
<ul ubPaginationContent>
<li ubPaginationItem>
<a href="#" ubPaginationPrevious></a>
</li>
<li ubPaginationItem>
<a ubPaginationLink href="#">1</a>
</li>
<li ubPaginationItem>
<a ubPaginationLink href="#" isActive>2</a>
</li>
<li ubPaginationItem>
<a ubPaginationLink href="#">3</a>
</li>
<li ubPaginationItem>
<ub-pagination-ellipsis />
</li>
<li ubPaginationItem>
<a href="#" ubPaginationNext></a>
</li>
</ul>
</nav>
`,
})
export class PaginationDemoNewYork { }import {
UbPaginationContentDirective,
UbPaginationDirective,
UbPaginationEllipsisComponent,
UbPaginationItemDirective,
UbPaginationLinkDirective,
UbPaginationNextDirective,
UbPaginationPreviousDirective,
} from '@/components/ui/pagination'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'pagination-demo-default',
imports: [
UbPaginationContentDirective,
UbPaginationDirective,
UbPaginationEllipsisComponent,
UbPaginationItemDirective,
UbPaginationLinkDirective,
UbPaginationNextDirective,
UbPaginationPreviousDirective,
],
template: `
<nav ubPagination>
<ul ubPaginationContent>
<li ubPaginationItem>
<a href="#" ubPaginationPrevious></a>
</li>
<li ubPaginationItem>
<a ubPaginationLink href="#">1</a>
</li>
<li ubPaginationItem>
<a ubPaginationLink href="#" isActive>2</a>
</li>
<li ubPaginationItem>
<a ubPaginationLink href="#">3</a>
</li>
<li ubPaginationItem>
<ub-pagination-ellipsis />
</li>
<li ubPaginationItem>
<a href="#" ubPaginationNext></a>
</li>
</ul>
</nav>
`,
})
export class PaginationDemoDefault { }Installation
npx shadcn-ng@latest add pagination
npm
yarn
pnpm
bun
Copy and paste the following code into your project.
import type { UbButtonSize } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'
import { booleanAttribute, Component, computed, Directive, effect, inject, input } from '@angular/core'
import { NgIcon, provideIcons } from '@ng-icons/core'
import { lucideChevronLeft, lucideChevronRight, lucideEllipsis } from '@ng-icons/lucide'
@Directive({
standalone: true,
selector: 'nav[ubPagination]',
host: {
'role': 'navigation',
'aria-label': 'pagination',
'[class]': 'computedClass()',
},
})
export class UbPaginationDirective {
class = input<string>()
computedClass = computed(() => cn('mx-auto flex w-full justify-center', this.class()))
}
@Directive({
standalone: true,
selector: 'ul[ubPaginationContent]',
host: {
'[class]': 'computedClass()',
},
})
export class UbPaginationContentDirective {
class = input<string>()
computedClass = computed(() => cn('flex flex-row items-center gap-1', this.class()))
}
@Directive({
standalone: true,
selector: 'li[ubPaginationItem]',
host: {
'[class]': 'computedClass()',
},
})
export class UbPaginationItemDirective {
class = input<string>()
computedClass = computed(() => cn('', this.class()))
}
@Directive({
standalone: true,
selector: 'ubPaginationLink',
host: {
'[aria-current]': 'isActive() ? "page" : undefined',
'[class]': 'computedClass()',
},
})
export class UbPaginationLinkDirective {
class = input<string>()
isActive = input(false, { transform: booleanAttribute })
size = input<UbButtonSize>('icon')
computedClass = computed(() => cn(
buttonVariants({
variant: this.isActive() ? 'outline' : 'ghost',
size: this.size(),
}),
this.class(),
))
}
@Component({
standalone: true,
selector: '[ubPaginationPrevious]',
imports: [NgIcon],
hostDirectives: [UbPaginationLinkDirective],
host: {
'[class]': 'computedClass()',
'aria-label': 'Go to previous page',
},
providers: [provideIcons({ lucideChevronLeft })],
template: `
<ng-icon name="lucideChevronLeft" class="w-4 h-4"></ng-icon>
<span>Previous</span>
`,
})
export class UbPaginationPreviousDirective {
class = input<string>()
computedClass = computed(() => cn('gap-1 pl-2.5', this.class()))
protected size = input<UbButtonSize>('default')
private ubPaginationLinkDirective = inject(UbPaginationLinkDirective, { host: true })
setConfig = effect(() => {
this.ubPaginationLinkDirective.size = this.size
})
}
@Component({
standalone: true,
selector: '[ubPaginationNext]',
imports: [NgIcon],
providers: [provideIcons({ lucideChevronRight })],
hostDirectives: [UbPaginationLinkDirective],
host: {
'[class]': 'computedClass()',
'aria-label': 'Go to next page',
},
template: `
<span>Next</span>
<ng-icon name="lucideChevronRight" class="w-4 h-4"></ng-icon>
`,
})
export class UbPaginationNextDirective {
class = input<string>()
computedClass = computed(() => cn('gap-1 pr-2.5', this.class()))
protected size = input<UbButtonSize>('default')
private ubPaginationLinkDirective = inject(UbPaginationLinkDirective, { host: true })
setConfig = effect(() => {
this.ubPaginationLinkDirective.size = this.size
})
}
@Component({
standalone: true,
imports: [NgIcon],
providers: [provideIcons({ lucideEllipsis })],
selector: 'ub-pagination-ellipsis',
template: `
<span
aria-hidden="true"
[class]="computedClass()"
>
<ng-icon name="lucideEllipsis" class="w-4 h-4"></ng-icon>
<span class="sr-only">More pages</span>
</span>
`,
})
export class UbPaginationEllipsisComponent {
class = input<string>()
computedClass = computed(() => cn('flex h-9 w-9 items-center justify-center', this.class()))
}import type { UbButtonSize } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'
import { booleanAttribute, Component, computed, Directive, effect, inject, input } from '@angular/core'
import { NgIcon, provideIcons } from '@ng-icons/core'
import { lucideChevronLeft, lucideChevronRight, lucideEllipsis } from '@ng-icons/lucide'
@Directive({
standalone: true,
selector: 'nav[ubPagination]',
host: {
'role': 'navigation',
'aria-label': 'pagination',
'[class]': 'computedClass()',
},
})
export class UbPaginationDirective {
class = input<string>()
computedClass = computed(() => cn('mx-auto flex w-full justify-center', this.class()))
}
@Directive({
standalone: true,
selector: 'ul[ubPaginationContent]',
host: {
'[class]': 'computedClass()',
},
})
export class UbPaginationContentDirective {
class = input<string>()
computedClass = computed(() => cn('flex flex-row items-center gap-1', this.class()))
}
@Directive({
standalone: true,
selector: 'li[ubPaginationItem]',
host: {
'[class]': 'computedClass()',
},
})
export class UbPaginationItemDirective {
class = input<string>()
computedClass = computed(() => cn('', this.class()))
}
@Directive({
standalone: true,
selector: 'ubPaginationLink',
host: {
'[aria-current]': 'isActive() ? "page" : undefined',
'[class]': 'computedClass()',
},
})
export class UbPaginationLinkDirective {
class = input<string>()
isActive = input(false, { transform: booleanAttribute })
size = input<UbButtonSize>('icon')
computedClass = computed(() => cn(
buttonVariants({
variant: this.isActive() ? 'outline' : 'ghost',
size: this.size(),
}),
this.class(),
))
}
@Component({
standalone: true,
selector: '[ubPaginationPrevious]',
imports: [NgIcon],
hostDirectives: [UbPaginationLinkDirective],
host: {
'[class]': 'computedClass()',
'aria-label': 'Go to previous page',
},
providers: [provideIcons({ lucideChevronLeft })],
template: `
<ng-icon name="lucideChevronLeft" class="w-4 h-4"></ng-icon>
<span>Previous</span>
`,
})
export class UbPaginationPreviousDirective {
class = input<string>()
computedClass = computed(() => cn('gap-1 pl-2.5', this.class()))
protected size = input<UbButtonSize>('default')
private ubPaginationLinkDirective = inject(UbPaginationLinkDirective, { host: true })
setConfig = effect(() => {
this.ubPaginationLinkDirective.size = this.size
})
}
@Component({
standalone: true,
selector: '[ubPaginationNext]',
imports: [NgIcon],
providers: [provideIcons({ lucideChevronRight })],
hostDirectives: [UbPaginationLinkDirective],
host: {
'[class]': 'computedClass()',
'aria-label': 'Go to next page',
},
template: `
<span>Next</span>
<ng-icon name="lucideChevronRight" class="w-4 h-4"></ng-icon>
`,
})
export class UbPaginationNextDirective {
class = input<string>()
computedClass = computed(() => cn('gap-1 pr-2.5', this.class()))
protected size = input<UbButtonSize>('default')
private ubPaginationLinkDirective = inject(UbPaginationLinkDirective, { host: true })
setConfig = effect(() => {
this.ubPaginationLinkDirective.size = this.size
})
}
@Component({
standalone: true,
imports: [NgIcon],
providers: [provideIcons({ lucideEllipsis })],
selector: 'ub-pagination-ellipsis',
template: `
<span
aria-hidden="true"
[class]="computedClass()"
>
<ng-icon name="lucideEllipsis" class="w-4 h-4"></ng-icon>
<span class="sr-only">More pages</span>
</span>
`,
})
export class UbPaginationEllipsisComponent {
class = input<string>()
computedClass = computed(() => cn('flex h-9 w-9 items-center justify-center', this.class()))
}Update the import paths to match your project setup.
Usage
import {
UbPaginationContentDirective,
UbPaginationDirective,
UbPaginationEllipsisComponent,
UbPaginationItemDirective,
UbPaginationLinkDirective,
UbPaginationNextDirective,
UbPaginationPreviousDirective,
} from "@/components/ui/pagination"<nav ubPagination>
<ul ubPaginationContent>
<li ubPaginationItem>
<a href="#" ubPaginationPrevious></a>
</li>
<li ubPaginationItem>
<a ubPaginationLink href="#">1</a>
</li>
<li ubPaginationItem>
<a ubPaginationLink href="#" isActive>2</a>
</li>
<li ubPaginationItem>
<a ubPaginationLink href="#">3</a>
</li>
<li ubPaginationItem>
<ub-pagination-ellipsis />
</li>
<li ubPaginationItem>
<a href="#" ubPaginationNext></a>
</li>
</ul>
</nav>