Components
Paginator
this is progress snippet using bubbletea and lipgloss
Dot Paginator
A component for handling pagination logic and optionally drawing pagination UI. Supports "dot-style" pagination (similar to what you might see on iOS) and numeric page numbering, but you could also just use this component for the logic and visualize pagination however you like.
package main
// A simple program demonstrating the paginator component from the Bubbles
// component library.
import (
"fmt"
"log"
"strings"
"github.com/charmbracelet/bubbles/paginator"
"github.com/charmbracelet/lipgloss"
tea "github.com/charmbracelet/bubbletea"
)
func newModel() model {
var items []string
for i := 1; i < 101; i++ {
text := fmt.Sprintf("Item %d", i)
items = append(items, text)
}
p := paginator.New()
p.Type = paginator.Dots
p.PerPage = 10
p.ActiveDot = lipgloss.NewStyle().Foreground(lipgloss.AdaptiveColor{Light: "235", Dark: "252"}).Render("•") // you can change the "•" with any other symbol
p.InactiveDot = lipgloss.NewStyle().Foreground(lipgloss.AdaptiveColor{Light: "250", Dark: "238"}).Render("•") // you can change the "•" with any other symbol
p.SetTotalPages(len(items))
return model{
paginator: p,
items: items,
}
}
type model struct {
items []string
paginator paginator.Model
}
func (m model) Init() tea.Cmd {
return nil
}
func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
var cmd tea.Cmd
switch msg := msg.(type) {
case tea.KeyMsg:
switch msg.String() {
case "q", "esc", "ctrl+c":
return m, tea.Quit
}
}
m.paginator, cmd = m.paginator.Update(msg)
return m, cmd
}
func (m model) View() string {
var b strings.Builder
b.WriteString("\n Paginator Example\n\n")
start, end := m.paginator.GetSliceBounds(len(m.items))
for _, item := range m.items[start:end] {
b.WriteString(" • " + item + "\n\n")
}
b.WriteString(" " + m.paginator.View())
b.WriteString("\n\n h/l ←/→ page • q: quit\n")
return b.String()
}
func main() {
p := tea.NewProgram(newModel())
if _, err := p.Run(); err != nil {
log.Fatal(err)
}
}How is this guide?