Repository files navigation

Some components forBubble Teaapplications. These components are used in production inGlow, andmany other applications.

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.”

• Example code, basic spinner
• Example code, various spinners

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 andthe common, and many customization options.

• Example code, one field
• Example code, many fields

A text area field, akin to an<textarea /> in HTML. Allows for input thatspans multiple lines. Supports unicode, pasting, vertical scrolling when thevalue exceeds the width and height of the element, and many customizationoptions.

• Example code, chat input
• Example code, story time input

A component for displaying and navigating tabular data (columns and rows).Supports vertical scrolling and many customization options.

• Example code, countries and populations

A simple, customizable progress meter, with optional animation viaHarmonica. Supports solid and gradient fills. The empty and filledrunes can be set to whatever you'd like. The percentage readout is customizableand can also be omitted entirely.

• Animated example
• Static example

A component for handling pagination logic and optionally drawing pagination UI.Supports "dot-style" pagination (similar to what you might see on iOS) andnumeric page numbering, but you could also just use this component for thelogic and visualize pagination however you like.

• Example code

A viewport for vertically scrolling content. Optionally includes standardpager keybindings and mouse wheel support. A high performance mode is availablefor applications which make use of the alternate screen buffer.

• Example code

This component is well complemented withReflow for ANSI-awareindenting and text wrapping.

A customizable, batteries-included component for browsing a set of items.Features pagination, fuzzy filtering, auto-generated help, an activity spinner,and status messages, all of which can be enabled and disabled as needed.Extrapolated fromGlow.

• Example code, default list
• Example code, simple list
• Example code, all features

A customizable component for picking a file from the file system. Navigatethrough directories and select files, optionally limit to certain fileextensions.

• Example code

A simple, flexible component for counting down. The update frequency and outputcan be customized as you like.

• Example code

A simple, flexible component for counting up. The update frequency and outputcan be customized as you see fit.

• Example code

A customizable horizontal mini help view that automatically generates itselffrom your keybindings. It features single and multi-line modes, which the usercan optionally toggle between. It will truncate gracefully if the terminal istoo wide for the content.

• Example code

A non-visual component for managing keybindings. It’s useful for allowing usersto remap keybindings as well as generating help views corresponding to yourkeybindings.

typeKeyMapstruct {Up key.BindingDown key.Binding}varDefaultKeyMap=KeyMap{Up:key.NewBinding(key.WithKeys("k","up"),// actual keybindingskey.WithHelp("↑/k","move up"),// corresponding help text    ),Down:key.NewBinding(key.WithKeys("j","down"),key.WithHelp("↓/j","move down"),    ),}func (mModel)Update(msg tea.Msg) (tea.Model, tea.Cmd) {switchmsg:=msg.(type) {case tea.KeyMsg:switch {casekey.Matches(msg,DefaultKeyMap.Up):// The user pressed upcasekey.Matches(msg,DefaultKeyMap.Down):// The user pressed down        }    }returnm,nil}

To check out community-maintained Bubbles seeCharm &Friends. Made a cool Bubblethat you want to share?PRsare welcome!

Seecontributing.

We’d love to hear your thoughts on this project. Feel free to drop us a note!

• Twitter
• The Fediverse
• Discord

MIT

Part ofCharm.

Charm热爱开源 • Charm loves open source