1
- Bubbles
2
- =======
1
+ # Bubbles
3
2
4
3
<p >
5
4
<img src =" https://stuff.charm.sh/bubbles/bubbles-github.png " width =" 233 " alt =" The Bubbles Logo " >
@@ -18,17 +17,15 @@ applications. These components are used in production in [Glow][glow],
18
17
[ charm ] : https://github.com/charmbracelet/charm
19
18
[ otherstuff ] : https://github.com/charmbracelet/bubbletea/#bubble-tea-in-the-wild
20
19
21
-
22
20
## Spinner
23
21
24
22
<img src =" https://stuff.charm.sh/bubbles-examples/spinner.gif " width =" 400 " alt =" Spinner Example " >
25
23
26
24
A spinner, useful for indicating that some kind an operation is happening.
27
25
There are a couple default ones, but you can also pass your own ”frames.”
28
26
29
- * [ Example code, basic spinner] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/spinner/main.go )
30
- * [ Example code, various spinners] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/spinners/main.go )
31
-
27
+ - [ Example code, basic spinner] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/spinner/main.go )
28
+ - [ Example code, various spinners] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/spinners/main.go )
32
29
33
30
## Text Input
34
31
@@ -38,20 +35,20 @@ A text input field, akin to an `<input type="text">` in HTML. Supports unicode,
38
35
pasting, in-place scrolling when the value exceeds the width of the element and
39
36
the common, and many customization options.
40
37
41
- * [ Example code, one field] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/textinput/main.go )
42
- * [ Example code, many fields] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/textinputs/main.go )
38
+ - [ Example code, one field] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/textinput/main.go )
39
+ - [ Example code, many fields] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/textinputs/main.go )
43
40
44
41
## Text Area
45
42
46
43
<img src =" https://stuff.charm.sh/bubbles-examples/textarea.gif " width =" 400 " alt =" Text Area Example " >
47
44
48
45
A text area field, akin to an ` <textarea /> ` in HTML. Allows for input that
49
46
spans multiple lines. Supports unicode, pasting, vertical scrolling when the
50
- value exceeds the width and height of the element, and many customization
47
+ value exceeds the width and height of the element, and many customization
51
48
options.
52
49
53
- * [ Example code, chat input] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/chat/main.go )
54
- * [ Example code, story time input] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/textarea/main.go )
50
+ - [ Example code, chat input] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/chat/main.go )
51
+ - [ Example code, story time input] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/textarea/main.go )
55
52
56
53
## Table
57
54
@@ -60,7 +57,7 @@ options.
60
57
A component for displaying and navigating tabular data (columns and rows).
61
58
Supports vertical scrolling and many customization options.
62
59
63
- * [ Example code, countries and populations] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/table/main.go )
60
+ - [ Example code, countries and populations] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/table/main.go )
64
61
65
62
## Progress
66
63
@@ -71,12 +68,11 @@ A simple, customizable progress meter, with optional animation via
71
68
runes can be set to whatever you'd like. The percentage readout is customizable
72
69
and can also be omitted entirely.
73
70
74
- * [ Animated example] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/progress-animated/main.go )
75
- * [ Static example] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/progress-static/main.go )
71
+ - [ Animated example] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/progress-animated/main.go )
72
+ - [ Static example] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/progress-static/main.go )
76
73
77
74
[ harmonica ] : https://github.com/charmbracelet/harmonica
78
75
79
-
80
76
## Paginator
81
77
82
78
<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
86
82
numeric page numbering, but you could also just use this component for the
87
83
logic and visualize pagination however you like.
88
84
89
- * [ Example code] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/paginator/main.go )
90
-
85
+ - [ Example code] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/paginator/main.go )
91
86
92
87
## Viewport
93
88
@@ -97,14 +92,13 @@ A viewport for vertically scrolling content. Optionally includes standard
97
92
pager keybindings and mouse wheel support. A high performance mode is available
98
93
for applications which make use of the alternate screen buffer.
99
94
100
- * [ Example code] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/pager/main.go )
95
+ - [ Example code] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/pager/main.go )
101
96
102
97
This component is well complemented with [ Reflow] [ reflow ] for ANSI-aware
103
98
indenting and text wrapping.
104
99
105
100
[ reflow ] : https://github.com/muesli/reflow
106
101
107
-
108
102
## List
109
103
110
104
<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,
114
108
and status messages, all of which can be enabled and disabled as needed.
115
109
Extrapolated from [ Glow] [ glow ] .
116
110
117
- * [ Example code, default list] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/list-default/main.go )
118
- * [ Example code, simple list] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/list-simple/main.go )
119
- * [ Example code, all features] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/list-fancy/main.go )
111
+ - [ Example code, default list] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/list-default/main.go )
112
+ - [ Example code, simple list] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/list-simple/main.go )
113
+ - [ Example code, all features] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/list-fancy/main.go )
120
114
121
115
## File Picker
122
116
@@ -126,7 +120,7 @@ A customizable component for picking a file from the file system. Navigate
126
120
through directories and select files, optionally limit to certain file
127
121
extensions.
128
122
129
- * [ Example code] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/file-picker/main.go )
123
+ - [ Example code] ( https://github.com/charmbracelet/bubbletea/tree/master/examples/file-picker/main.go )
130
124
131
125
## Timer
132
126
@@ -135,8 +129,7 @@ can be customized as you like.
135
129
136
130
<img src =" https://stuff.charm.sh/bubbles-examples/timer.gif " width =" 400 " alt =" Timer example " >
137
131
138
- * [ Example code] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/timer/main.go )
139
-
132
+ - [ Example code] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/timer/main.go )
140
133
141
134
## Stopwatch
142
135
@@ -145,8 +138,7 @@ can be customized as you like.
145
138
A simple, flexible component for counting up. The update frequency and output
146
139
can be customized as you see fit.
147
140
148
- * [ Example code] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/stopwatch/main.go )
149
-
141
+ - [ Example code] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/stopwatch/main.go )
150
142
151
143
## Help
152
144
@@ -157,8 +149,7 @@ from your keybindings. It features single and multi-line modes, which the user
157
149
can optionally toggle between. It will truncate gracefully if the terminal is
158
150
too wide for the content.
159
151
160
- * [ Example code] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/help/main.go )
161
-
152
+ - [ Example code] ( https://github.com/charmbracelet/bubbletea/blob/master/examples/help/main.go )
162
153
163
154
## Key
164
155
@@ -197,42 +188,13 @@ func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
197
188
}
198
189
```
199
190
191
+ ## There’s more where that came from
200
192
201
- ## Additional Bubbles
202
-
203
- <!-- in alphabetical order by author -->
204
-
205
- * [ 76creates/stickers] ( https://github.com/76creates/stickers ) : Responsive
206
- flexbox and table components.
207
- * [ calyptia/go-bubble-table] ( https://github.com/calyptia/go-bubble-table ) : An
208
- interactive, customizable, scrollable table component.
209
- * [ erikgeiser/promptkit] ( https://github.com/erikgeiser/promptkit ) : A collection
210
- of common prompts for cases like selection, text input, and confirmation.
211
- Each prompt comes with sensible defaults, remappable keybindings, any many
212
- customization options.
213
- * [ evertras/bubble-table] ( https://github.com/Evertras/bubble-table ) : Interactive,
214
- customizable, paginated tables.
215
- * [ knipferrc/teacup] ( https://github.com/knipferrc/teacup ) : Various handy
216
- bubbles and utilities for building Bubble Tea applications.
217
- * [ mritd/bubbles] ( https://github.com/mritd/bubbles ) : Some general-purpose
218
- bubbles. Inputs with validation, menu selection, a modified progressbar, and
219
- so on.
220
- * [ kevm/bubbleo] ( https://github.com/KevM/bubbleo ) : A set of bubbles with a
221
- focus on navigation: navigation stacks, breakcrumbs, menus and so on.
222
- * [ treilik/bubbleboxer] ( https://github.com/treilik/bubbleboxer ) : Layout
223
- multiple bubbles side-by-side in a layout-tree.
224
- * [ treilik/bubblelister] ( https://github.com/treilik/bubblelister ) : An alternate
225
- list that is scrollable without pagination and has the ability to contain
226
- other bubbles as list items.
227
-
228
- If you’ve built a Bubble you think should be listed here, please create a Pull
229
- Request. Please note that for a project to be included, it must meet the
230
- following requirements:
231
- - The README has a demo GIF.
232
- - The README clearly states the purpose of the bubble along with an example on how to use it.
233
- - The bubble must * always* be in a working state on its ` main ` branch.
234
-
235
- Thank you!
193
+ To check out community-maintained Bubbles see [ Charm &
194
+ Friends] ( https://github.com/charm-and-friends/additional-bubbles ) . Made a cool Bubble
195
+ that you want to share?
196
+ [ PRs] ( https://github.com/charm-and-friends/additional-bubbles?tab=readme-ov-file#what-is-a-complete-project )
197
+ are welcome!
236
198
237
199
## Contributing
238
200
@@ -244,15 +206,15 @@ See [contributing][contribute].
244
206
245
207
We’d love to hear your thoughts on this project. Feel free to drop us a note!
246
208
247
- * [ Twitter] ( https://twitter.com/charmcli )
248
- * [ The Fediverse] ( https://mastodon.social/@charmcli )
249
- * [ Discord] ( https://charm.sh/chat )
209
+ - [ Twitter] ( https://twitter.com/charmcli )
210
+ - [ The Fediverse] ( https://mastodon.social/@charmcli )
211
+ - [ Discord] ( https://charm.sh/chat )
250
212
251
213
## License
252
214
253
215
[ MIT] ( https://github.com/charmbracelet/bubbletea/raw/master/LICENSE )
254
216
255
- ***
217
+ ---
256
218
257
219
Part of [ Charm] ( https://charm.sh ) .
258
220
0 commit comments