bubbles/README.md

242 lines
9.5 KiB
Markdown
Raw Normal View History

2020-07-30 02:24:09 +03:00
Bubbles
=======
2020-01-28 05:29:52 +03:00
2020-11-20 03:11:24 +03:00
<p>
<img src="https://stuff.charm.sh/bubbles/bubbles-github.png" width="233" alt="The Bubbles Logo">
</p>
2020-10-24 09:39:00 +03:00
[![Latest Release](https://img.shields.io/github/release/charmbracelet/bubbles.svg)](https://github.com/charmbracelet/bubbles/releases)
[![GoDoc](https://godoc.org/github.com/golang/gddo?status.svg)](https://pkg.go.dev/github.com/charmbracelet/bubbles)
2020-10-19 07:08:19 +03:00
[![Build Status](https://github.com/charmbracelet/bubbles/workflows/build/badge.svg)](https://github.com/charmbracelet/bubbles/actions)
2021-05-18 21:56:22 +03:00
[![Go ReportCard](https://goreportcard.com/badge/charmbracelet/bubbles)](https://goreportcard.com/report/charmbracelet/bubbles)
2020-01-28 05:29:52 +03:00
2021-03-02 15:44:53 +03:00
Some components for [Bubble Tea](https://github.com/charmbracelet/bubbletea)
applications. These components are used in production in [Glow][glow],
[Charm][charm] and [many other applications][otherstuff].
2020-07-17 21:01:48 +03:00
2020-10-06 20:25:46 +03:00
[glow]: https://github.com/charmbracelet/glow
[charm]: https://github.com/charmbracelet/charm
2021-03-02 15:44:53 +03:00
[otherstuff]: https://github.com/charmbracelet/bubbletea/#bubble-tea-in-the-wild
2020-07-29 23:34:01 +03:00
2020-07-17 21:01:48 +03:00
## Spinner
2020-07-30 02:20:41 +03:00
<img src="https://stuff.charm.sh/bubbles-examples/spinner.gif" width="400" alt="Spinner Example">
2020-07-29 23:34:01 +03:00
A spinner, useful for indicating that some kind an operation is happening.
There are a couple default ones, but you can also pass your own ”frames.”
2022-09-06 20:19:34 +03:00
* [Example code, basic spinner](https://github.com/charmbracelet/bubbletea/tree/master/examples/spinner/main.go)
* [Example code, various spinners](https://github.com/charmbracelet/bubbletea/tree/master/examples/spinners/main.go)
2020-07-29 23:34:01 +03:00
2020-07-17 21:01:48 +03:00
## Text Input
2020-07-30 02:20:41 +03:00
<img src="https://stuff.charm.sh/bubbles-examples/textinput.gif" width="400" alt="Text Input Example">
2020-07-29 23:34:01 +03:00
A text input field, akin to an `<input type="text">` in HTML. Supports unicode,
pasting, in-place scrolling when the value exceeds the width of the element and
the common, and many customization options.
2022-09-06 20:19:34 +03:00
* [Example code, one field](https://github.com/charmbracelet/bubbletea/tree/master/examples/textinput/main.go)
* [Example code, many fields](https://github.com/charmbracelet/bubbletea/tree/master/examples/textinputs/main.go)
2020-07-29 23:34:01 +03:00
## Text Area
<img src="https://stuff.charm.sh/bubbles-examples/textarea.gif" width="400" alt="Text Area Example">
A text area field, akin to an `<textarea />` in HTML. Allows for input that
spans multiple lines. Supports unicode, pasting, vertical scrolling when the
value exceeds the width and height of the element, and many customization
options.
2022-09-06 20:19:34 +03:00
* [Example code, chat input](https://github.com/charmbracelet/bubbletea/tree/master/examples/chat/main.go)
* [Example code, story time input](https://github.com/charmbracelet/bubbletea/tree/master/examples/textarea/main.go)
2020-07-17 21:01:48 +03:00
2021-01-13 01:27:14 +03:00
## Progress
2022-08-09 00:29:25 +03:00
<picture>
<source media="(max-width: 800px)" srcset="https://stuff.charm.sh/bubbles-examples/progress.gif">
<source media="(min-width: 800px)" width="800" srcset="https://stuff.charm.sh/bubbles-examples/progress.gif">
<img src="https://stuff.charm.sh/bubbles-examples/progress.gif" alt="Progressbar Example">
</picture>
2021-01-13 01:27:14 +03:00
A simple, customizable progress meter, with optional animation via
[Harmonica][harmonica]. Supports solid and gradient fills. The empty and filled
runes can be set to whatever you'd like. The percentage readout is customizable
and can also be omitted entirely.
2021-01-13 01:27:14 +03:00
* [Animated example](https://github.com/charmbracelet/bubbletea/blob/master/examples/progress-animated/main.go)
* [Static example](https://github.com/charmbracelet/bubbletea/blob/master/examples/progress-static/main.go)
[harmonica]: https://github.com/charmbracelet/harmonica
2020-07-17 21:01:48 +03:00
## Paginator
2020-07-30 02:20:41 +03:00
<img src="https://stuff.charm.sh/bubbles-examples/pagination.gif" width="200" alt="Paginator Example">
2020-07-17 21:01:48 +03:00
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.
2020-07-17 21:01:48 +03:00
* [Example code](https://github.com/charmbracelet/bubbletea/blob/master/examples/paginator/main.go)
2020-07-29 23:34:01 +03:00
2020-07-17 21:01:48 +03:00
## Viewport
2022-08-09 00:29:25 +03:00
<picture>
<source media="(max-width: 600px)" srcset="https://stuff.charm.sh/bubbles-examples/viewport.gif?0">
<source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/bubbles-examples/viewport.gif?0">
<img src="https://stuff.charm.sh/bubbles-examples/viewport.gif?0" alt="Viewport Example">
</picture>
2020-07-30 02:20:41 +03:00
2020-07-29 23:34:01 +03:00
A viewport for vertically scrolling content. Optionally includes standard
2020-07-17 21:01:48 +03:00
pager keybindings and mouse wheel support. A high performance mode is available
2021-01-13 02:19:20 +03:00
for applications which make use of the alternate screen buffer.
2020-07-29 23:34:01 +03:00
2022-09-06 20:19:34 +03:00
* [Example code](https://github.com/charmbracelet/bubbletea/tree/master/examples/pager/main.go)
2020-07-29 23:34:01 +03:00
This component is well complemented with [Reflow][reflow] for ANSI-aware
2020-07-29 23:34:01 +03:00
indenting and text wrapping.
[reflow]: https://github.com/muesli/reflow
2020-01-28 05:29:52 +03:00
2021-03-02 15:44:53 +03:00
## List
2022-08-09 00:29:25 +03:00
<picture>
<source media="(max-width: 600px)" srcset="https://stuff.charm.sh/bubbles-examples/list.gif">
<source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/bubbles-examples/list.gif">
<img src="https://stuff.charm.sh/bubbles-examples/list.gif" alt="List Example">
</picture>
2021-03-02 15:44:53 +03:00
A customizable, batteries-included component for browsing a set of items.
Features pagination, fuzzy filtering, auto-generated help, an activity spinner,
2021-08-24 00:30:54 +03:00
and status messages, all of which can be enabled and disabled as needed.
2021-03-02 15:44:53 +03:00
Extrapolated from [Glow][glow].
2022-09-06 20:19:34 +03:00
* [Example code, default list](https://github.com/charmbracelet/bubbletea/tree/master/examples/list-default/main.go)
* [Example code, simple list](https://github.com/charmbracelet/bubbletea/tree/master/examples/list-simple/main.go)
* [Example code, all features](https://github.com/charmbracelet/bubbletea/tree/master/examples/list-fancy/main.go)
2021-03-02 15:44:53 +03:00
2022-01-13 19:30:10 +03:00
## Timer
A simple, flexible component for counting down. The update frequency and output
can be customized as you like.
<img src="https://stuff.charm.sh/bubbles-examples/timer.gif" width="400" alt="Timer example">
* [Example code](https://github.com/charmbracelet/bubbletea/blob/master/examples/timer/main.go)
## Stopwatch
<img src="https://stuff.charm.sh/bubbles-examples/stopwatch.gif" width="400" alt="Stopwatch example">
A simple, flexible component for counting up. The update frequency and output
can be customized as you see fit.
* [Example code](https://github.com/charmbracelet/bubbletea/blob/master/examples/stopwatch/main.go)
## Help
2022-08-09 00:29:25 +03:00
<picture>
<source media="(max-width: 500px)" srcset="https://stuff.charm.sh/bubbles-examples/help.gif">
<source media="(min-width: 500px)" width="500" srcset="https://stuff.charm.sh/bubbles-examples/help.gif">
<img src="https://stuff.charm.sh/bubbles-examples/help.gif" alt="Help Example">
</picture>
A customizable horizontal mini help view that automatically generates itself
from your keybindings. It features single and multi-line modes, which the user
can optionally toggle between. It will truncate gracefully if the terminal is
too wide for the content.
* [Example code](https://github.com/charmbracelet/bubbletea/blob/master/examples/help/main.go)
## Key
A non-visual component for managing keybindings. Its useful for allowing users
to remap keybindings as well as generating help views corresponding to your
keybindings.
```go
type KeyMap struct {
Up key.Binding
Down key.Binding
}
var DefaultKeyMap = KeyMap{
Up: key.NewBinding(
2021-09-01 18:31:14 +03:00
key.WithKeys("k", "up"), // actual keybindings
key.WithHelp("↑/k", "move up"), // corresponding help text
),
2021-09-01 18:31:14 +03:00
Down: key.NewBinding(
key.WithKeys("j", "down"),
key.WithHelp("↓/j", "move down"),
2021-09-01 18:31:14 +03:00
),
}
func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
switch msg := msg.(type) {
case tea.KeyMsg:
switch {
case key.Matches(msg, DefaultKeyMap.Up):
// The user pressed up
case key.Matches(msg, DefaultKeyMap.Down):
// The user pressed down
}
}
return m, nil
}
```
2021-08-02 19:18:10 +03:00
## Additional Bubbles
<!-- in alphabetical order by author -->
* [76creates/stickers](https://github.com/76creates/stickers): Responsive
flexbox and table components.
* [calyptia/go-bubble-table](https://github.com/calyptia/go-bubble-table): An
interactive, customizable, scrollable table component.
* [erikgeiser/promptkit](https://github.com/erikgeiser/promptkit): A collection
of common prompts for cases like selection, text input, and confirmation.
Each prompt comes with sensible defaults, remappable keybindings, any many
customization options.
* [evertras/bubble-table](https://github.com/Evertras/bubble-table): Interactive,
customizable, paginated tables.
* [knipferrc/teacup](https://github.com/knipferrc/teacup): Various handy
bubbles and utilities for building Bubble Tea applications.
* [mritd/bubbles](https://github.com/mritd/bubbles): Some general-purpose
bubbles. Inputs with validation, menu selection, a modified progressbar, and
so on.
* [treilik/bubbleboxer](https://github.com/treilik/bubbleboxer): Layout
multiple bubbles side-by-side in a layout-tree.
* [treilik/bubblelister](https://github.com/treilik/bubblelister): An alternate
list that is scrollable without pagination and has the ability to contain
other bubbles as list items.
2021-08-02 19:18:10 +03:00
If youve built a Bubble you think should be listed here,
[let us know](mailto:vt100@charm.sh).
2020-01-28 05:29:52 +03:00
## License
2022-09-06 20:19:34 +03:00
[MIT](https://github.com/charmbracelet/bubbletea/raw/master/LICENSE)
2020-07-29 23:34:01 +03:00
***
2020-10-20 17:17:26 +03:00
Part of [Charm](https://charm.sh).
2020-07-29 23:34:01 +03:00
2022-01-10 22:57:12 +03:00
<a href="https://charm.sh/"><img alt="The Charm logo" src="https://stuff.charm.sh/charm-badge.jpg" width="400"></a>
2020-10-20 17:17:26 +03:00
Charm热爱开源 • Charm loves open source
2022-01-10 22:57:12 +03:00
[charm]: https://charm.sh/