mirror of
https://github.com/zoriya/bubbles.git
synced 2026-08-16 01:43:21 +00:00
docs: additional bubbles (#583)
* docs: additional bubbles Signed-off-by: Carlos Alexandro Becker <caarlos0@users.noreply.github.com> * Update README.md Co-authored-by: bashbunni <15822994+bashbunni@users.noreply.github.com> * Update README.md Co-authored-by: Christian Rocha <christian@rocha.is> * Update README.md Co-authored-by: Christian Rocha <christian@rocha.is> --------- Signed-off-by: Carlos Alexandro Becker <caarlos0@users.noreply.github.com> Co-authored-by: bashbunni <15822994+bashbunni@users.noreply.github.com> Co-authored-by: Christian Rocha <christian@rocha.is>
This commit is contained in:
co-authored by
bashbunni
Christian Rocha
parent
2d53a618a9
commit
87a4e45a58
@@ -1,5 +1,4 @@
|
|||||||
Bubbles
|
# Bubbles
|
||||||
=======
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<img src="https://stuff.charm.sh/bubbles/bubbles-github.png" width="233" alt="The Bubbles Logo">
|
<img src="https://stuff.charm.sh/bubbles/bubbles-github.png" width="233" alt="The Bubbles Logo">
|
||||||
@@ -18,7 +17,6 @@ applications. These components are used in production in [Glow][glow],
|
|||||||
[charm]: https://github.com/charmbracelet/charm
|
[charm]: https://github.com/charmbracelet/charm
|
||||||
[otherstuff]: https://github.com/charmbracelet/bubbletea/#bubble-tea-in-the-wild
|
[otherstuff]: https://github.com/charmbracelet/bubbletea/#bubble-tea-in-the-wild
|
||||||
|
|
||||||
|
|
||||||
## Spinner
|
## Spinner
|
||||||
|
|
||||||
<img src="https://stuff.charm.sh/bubbles-examples/spinner.gif" width="400" alt="Spinner Example">
|
<img src="https://stuff.charm.sh/bubbles-examples/spinner.gif" width="400" alt="Spinner Example">
|
||||||
@@ -26,9 +24,8 @@ applications. These components are used in production in [Glow][glow],
|
|||||||
A spinner, useful for indicating that some kind an operation is happening.
|
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.”
|
There are a couple default ones, but you can also pass your own ”frames.”
|
||||||
|
|
||||||
* [Example code, basic spinner](https://github.com/charmbracelet/bubbletea/tree/master/examples/spinner/main.go)
|
- [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)
|
- [Example code, various spinners](https://github.com/charmbracelet/bubbletea/tree/master/examples/spinners/main.go)
|
||||||
|
|
||||||
|
|
||||||
## Text Input
|
## Text Input
|
||||||
|
|
||||||
@@ -38,8 +35,8 @@ 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
|
pasting, in-place scrolling when the value exceeds the width of the element and
|
||||||
the common, and many customization options.
|
the common, and many customization options.
|
||||||
|
|
||||||
* [Example code, one field](https://github.com/charmbracelet/bubbletea/tree/master/examples/textinput/main.go)
|
- [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)
|
- [Example code, many fields](https://github.com/charmbracelet/bubbletea/tree/master/examples/textinputs/main.go)
|
||||||
|
|
||||||
## Text Area
|
## Text Area
|
||||||
|
|
||||||
@@ -47,11 +44,11 @@ the common, and many customization options.
|
|||||||
|
|
||||||
A text area field, akin to an `<textarea />` in HTML. Allows for input that
|
A text area field, akin to an `<textarea />` in HTML. Allows for input that
|
||||||
spans multiple lines. Supports unicode, pasting, vertical scrolling when the
|
spans multiple lines. Supports unicode, pasting, vertical scrolling when the
|
||||||
value exceeds the width and height of the element, and many customization
|
value exceeds the width and height of the element, and many customization
|
||||||
options.
|
options.
|
||||||
|
|
||||||
* [Example code, chat input](https://github.com/charmbracelet/bubbletea/tree/master/examples/chat/main.go)
|
- [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)
|
- [Example code, story time input](https://github.com/charmbracelet/bubbletea/tree/master/examples/textarea/main.go)
|
||||||
|
|
||||||
## Table
|
## Table
|
||||||
|
|
||||||
@@ -60,7 +57,7 @@ options.
|
|||||||
A component for displaying and navigating tabular data (columns and rows).
|
A component for displaying and navigating tabular data (columns and rows).
|
||||||
Supports vertical scrolling and many customization options.
|
Supports vertical scrolling and many customization options.
|
||||||
|
|
||||||
* [Example code, countries and populations](https://github.com/charmbracelet/bubbletea/tree/master/examples/table/main.go)
|
- [Example code, countries and populations](https://github.com/charmbracelet/bubbletea/tree/master/examples/table/main.go)
|
||||||
|
|
||||||
## Progress
|
## Progress
|
||||||
|
|
||||||
@@ -71,12 +68,11 @@ A simple, customizable progress meter, with optional animation via
|
|||||||
runes can be set to whatever you'd like. The percentage readout is customizable
|
runes can be set to whatever you'd like. The percentage readout is customizable
|
||||||
and can also be omitted entirely.
|
and can also be omitted entirely.
|
||||||
|
|
||||||
* [Animated example](https://github.com/charmbracelet/bubbletea/blob/master/examples/progress-animated/main.go)
|
- [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)
|
- [Static example](https://github.com/charmbracelet/bubbletea/blob/master/examples/progress-static/main.go)
|
||||||
|
|
||||||
[harmonica]: https://github.com/charmbracelet/harmonica
|
[harmonica]: https://github.com/charmbracelet/harmonica
|
||||||
|
|
||||||
|
|
||||||
## Paginator
|
## Paginator
|
||||||
|
|
||||||
<img src="https://stuff.charm.sh/bubbles-examples/pagination.gif" width="200" alt="Paginator Example">
|
<img src="https://stuff.charm.sh/bubbles-examples/pagination.gif" width="200" alt="Paginator Example">
|
||||||
@@ -86,8 +82,7 @@ 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
|
numeric page numbering, but you could also just use this component for the
|
||||||
logic and visualize pagination however you like.
|
logic and visualize pagination however you like.
|
||||||
|
|
||||||
* [Example code](https://github.com/charmbracelet/bubbletea/blob/master/examples/paginator/main.go)
|
- [Example code](https://github.com/charmbracelet/bubbletea/blob/master/examples/paginator/main.go)
|
||||||
|
|
||||||
|
|
||||||
## Viewport
|
## Viewport
|
||||||
|
|
||||||
@@ -97,14 +92,13 @@ A viewport for vertically scrolling content. Optionally includes standard
|
|||||||
pager keybindings and mouse wheel support. A high performance mode is available
|
pager keybindings and mouse wheel support. A high performance mode is available
|
||||||
for applications which make use of the alternate screen buffer.
|
for applications which make use of the alternate screen buffer.
|
||||||
|
|
||||||
* [Example code](https://github.com/charmbracelet/bubbletea/tree/master/examples/pager/main.go)
|
- [Example code](https://github.com/charmbracelet/bubbletea/tree/master/examples/pager/main.go)
|
||||||
|
|
||||||
This component is well complemented with [Reflow][reflow] for ANSI-aware
|
This component is well complemented with [Reflow][reflow] for ANSI-aware
|
||||||
indenting and text wrapping.
|
indenting and text wrapping.
|
||||||
|
|
||||||
[reflow]: https://github.com/muesli/reflow
|
[reflow]: https://github.com/muesli/reflow
|
||||||
|
|
||||||
|
|
||||||
## List
|
## List
|
||||||
|
|
||||||
<img src="https://stuff.charm.sh/bubbles-examples/list.gif" width="600" alt="List Example">
|
<img src="https://stuff.charm.sh/bubbles-examples/list.gif" width="600" alt="List Example">
|
||||||
@@ -114,9 +108,9 @@ Features pagination, fuzzy filtering, auto-generated help, an activity spinner,
|
|||||||
and status messages, all of which can be enabled and disabled as needed.
|
and status messages, all of which can be enabled and disabled as needed.
|
||||||
Extrapolated from [Glow][glow].
|
Extrapolated from [Glow][glow].
|
||||||
|
|
||||||
* [Example code, default list](https://github.com/charmbracelet/bubbletea/tree/master/examples/list-default/main.go)
|
- [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, 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)
|
- [Example code, all features](https://github.com/charmbracelet/bubbletea/tree/master/examples/list-fancy/main.go)
|
||||||
|
|
||||||
## File Picker
|
## File Picker
|
||||||
|
|
||||||
@@ -126,7 +120,7 @@ A customizable component for picking a file from the file system. Navigate
|
|||||||
through directories and select files, optionally limit to certain file
|
through directories and select files, optionally limit to certain file
|
||||||
extensions.
|
extensions.
|
||||||
|
|
||||||
* [Example code](https://github.com/charmbracelet/bubbletea/tree/master/examples/file-picker/main.go)
|
- [Example code](https://github.com/charmbracelet/bubbletea/tree/master/examples/file-picker/main.go)
|
||||||
|
|
||||||
## Timer
|
## Timer
|
||||||
|
|
||||||
@@ -135,8 +129,7 @@ can be customized as you like.
|
|||||||
|
|
||||||
<img src="https://stuff.charm.sh/bubbles-examples/timer.gif" width="400" alt="Timer example">
|
<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)
|
- [Example code](https://github.com/charmbracelet/bubbletea/blob/master/examples/timer/main.go)
|
||||||
|
|
||||||
|
|
||||||
## Stopwatch
|
## Stopwatch
|
||||||
|
|
||||||
@@ -145,8 +138,7 @@ can be customized as you like.
|
|||||||
A simple, flexible component for counting up. The update frequency and output
|
A simple, flexible component for counting up. The update frequency and output
|
||||||
can be customized as you see fit.
|
can be customized as you see fit.
|
||||||
|
|
||||||
* [Example code](https://github.com/charmbracelet/bubbletea/blob/master/examples/stopwatch/main.go)
|
- [Example code](https://github.com/charmbracelet/bubbletea/blob/master/examples/stopwatch/main.go)
|
||||||
|
|
||||||
|
|
||||||
## Help
|
## Help
|
||||||
|
|
||||||
@@ -157,8 +149,7 @@ 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
|
can optionally toggle between. It will truncate gracefully if the terminal is
|
||||||
too wide for the content.
|
too wide for the content.
|
||||||
|
|
||||||
* [Example code](https://github.com/charmbracelet/bubbletea/blob/master/examples/help/main.go)
|
- [Example code](https://github.com/charmbracelet/bubbletea/blob/master/examples/help/main.go)
|
||||||
|
|
||||||
|
|
||||||
## Key
|
## Key
|
||||||
|
|
||||||
@@ -197,42 +188,11 @@ func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## There’s more where that came from
|
||||||
|
|
||||||
## Additional Bubbles
|
There are also
|
||||||
|
[community-owned bubbles.](https://github.com/charm-community/additional-bubbles)
|
||||||
<!-- in alphabetical order by author -->
|
Check out the project’s README for instructions on how to get your Bubble added to the list!
|
||||||
|
|
||||||
* [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.
|
|
||||||
* [kevm/bubbleo](https://github.com/KevM/bubbleo): A set of bubbles with a
|
|
||||||
focus on navigation: navigation stacks, breakcrumbs, menus 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.
|
|
||||||
|
|
||||||
If you’ve built a Bubble you think should be listed here, please create a Pull
|
|
||||||
Request. Please note that for a project to be included, it must meet the
|
|
||||||
following requirements:
|
|
||||||
- The README has a demo GIF.
|
|
||||||
- The README clearly states the purpose of the bubble along with an example on how to use it.
|
|
||||||
- The bubble must *always* be in a working state on its `main` branch.
|
|
||||||
|
|
||||||
Thank you!
|
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
@@ -244,15 +204,15 @@ See [contributing][contribute].
|
|||||||
|
|
||||||
We’d love to hear your thoughts on this project. Feel free to drop us a note!
|
We’d love to hear your thoughts on this project. Feel free to drop us a note!
|
||||||
|
|
||||||
* [Twitter](https://twitter.com/charmcli)
|
- [Twitter](https://twitter.com/charmcli)
|
||||||
* [The Fediverse](https://mastodon.social/@charmcli)
|
- [The Fediverse](https://mastodon.social/@charmcli)
|
||||||
* [Discord](https://charm.sh/chat)
|
- [Discord](https://charm.sh/chat)
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
[MIT](https://github.com/charmbracelet/bubbletea/raw/master/LICENSE)
|
[MIT](https://github.com/charmbracelet/bubbletea/raw/master/LICENSE)
|
||||||
|
|
||||||
***
|
---
|
||||||
|
|
||||||
Part of [Charm](https://charm.sh).
|
Part of [Charm](https://charm.sh).
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user