charmbracelet
feat: introduce vertical scrollbar
Well, here is a pull request on a component i really found missing in the bubbletea ecosystem: a scrollbar \o/
Only a vertical one, available as a model, is provided:
sb := scrollbar.NewVertical()
It is easily customizable with styles
sb.Style = sb.Style.Border(lipgloss.RoundedBorder(), true) // Beautiful rounded borders around the bar
sb.ThumbStyle = sb.ThumbStyle.SetString("≡") // Change thumb apperance
It can updated by dedicated messages...
m.scrollbar, cmd = m.scrollbar.Update(scrollbar.HeightMsg(12))
m.scrollbar, cmd = m.scrollbar.Update(scrollbar.Msg{
Total: test.total,
Visible: test.visible,
Offset: test.offset,
})
...or directly linked to a viewport:
m.scrollbar, cmd = m.scrollbar.Update(viewport.Height)
m.scrollbar, cmd = m.scrollbar.Update(viewport) // Get the total, visible and offset parameters from viewport
If you're interested, feel free to review, comment, etc... ❤️
That being said, there are several points on which I would like advice:
- Do i have to make the scrollbar struct a real model (Update method returns a tea.Model) or an hybrid one (Update method returns the struct itself) ?
- Is it better to provide some options to the constructor ? something like:
sb := scrollbar.NewVertical(scrollbar.WithStyle(...), scrollbar.WithThumbStyle(...), ...)
- Are you ok with the scrollbar/track/thumb wording ? It's actually inspired by browsers wording (see: https://developer.chrome.com/docs/css-ui/scrollbar-styling)
- I really think mouse integration could be a killer feature, but i'm not sure how to (properly) handle it in a portable manner...
- I'm experiencing screen blinkings with vhs (see
example.gif). Is there something i can do ?
huh, and I almost forgot the demo :)
This is so nice. It may take us a moment to get to this one, but it's on our radar. In the meantime do you mind fixing the lint stuff?
Hey again, @nervo and thanks (again) for waiting on this. This is SO awesome. We're really grateful for the PR!
My first thought was whether this should just be part of viewport but I do think it's more flexible having it separated. We'll look at the API a little closer but generally I think this one is pretty close.
Per your questions:
- Do i have to make the scrollbar struct a real model (Update method returns a tea.Model) or an hybrid one (Update method returns the struct itself) ?
No, you're doing the right thing here. These are really UI fragments and not full models, and these things get fussier to work with when they're true models.
- Is it better to provide some options to the constructor ? something like:
sb := scrollbar.NewVertical(scrollbar.WithStyle(...), scrollbar.WithThumbStyle(...), ...)
It doesn't matter too much, but it's a nice detail. Up to you.
- Are you ok with the scrollbar/track/thumb wording ? It's actually inspired by browsers wording (see: https://developer.chrome.com/docs/css-ui/scrollbar-styling)
Yes, totally. The naming here is spot on.
- I really think mouse integration could be a killer feature, but i'm not sure how to (properly) handle it in a portable manner...
There are scroll wheel events available you can take advantage of if the mouse is enabled.
- I'm experiencing screen blinkings with vhs (see
example.gif). Is there something i can do ?
There are a few internal factors contributing to this, most of which should be solved for soon. But in the meantime, since you included the tape file, we can clean this up for you when this is merged.
I think it's nice having this separate from viewport in case people want to use this with a table or their own bubbles.
