package showcase
import "github.com/axzilla/templui/internal/components/pagination"
templ PaginationDefault() {
@pagination.Pagination(pagination.Props{
Class: "mt-8",
}) {
@pagination.Content() {
@pagination.Item() {
@pagination.Previous(pagination.PreviousProps{
Href: "?page=1",
Disabled: false,
Label: "Previous",
})
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=1",
}) {
1
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=2",
IsActive: true,
}) {
2
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=3",
}) {
3
}
}
@pagination.Item() {
@pagination.Ellipsis()
}
@pagination.Item() {
@pagination.Next(pagination.NextProps{
Href: "?page=3",
Label: "Next",
})
}
}
}
}
Installation
templui add paginationExamples
With Helper
package showcase
import (
"fmt"
"github.com/axzilla/templui/internal/components/pagination"
)
templ PaginationWithHelper() {
{{ p := pagination.CreatePagination(5, 20, 3) }}
@pagination.Pagination() {
@pagination.Content() {
@pagination.Item() {
@pagination.Previous(pagination.PreviousProps{
Href: fmt.Sprintf("?page=%d", p.CurrentPage-1),
Disabled: !p.HasPrevious,
Label: "Previous",
})
}
// First page with ellipsis if needed
if p.Pages[0] > 1 {
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=1",
}) {
1
}
}
if p.Pages[0] > 2 {
@pagination.Item() {
@pagination.Ellipsis()
}
}
}
// Visible pages
for _, page := range p.Pages {
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: fmt.Sprintf("?page=%d", page),
IsActive: page == p.CurrentPage,
}) {
{ fmt.Sprint(page) }
}
}
}
// Last page with ellipsis if needed
if p.Pages[len(p.Pages)-1] < p.TotalPages {
if p.Pages[len(p.Pages)-1] < p.TotalPages-1 {
@pagination.Item() {
@pagination.Ellipsis()
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: fmt.Sprintf("?page=%d", p.TotalPages),
}) {
{ fmt.Sprint(p.TotalPages) }
}
}
}
@pagination.Item() {
@pagination.Next(pagination.NextProps{
Href: fmt.Sprintf("?page=%d", p.CurrentPage+1),
Disabled: !p.HasNext,
Label: "Next",
})
}
}
}
}