forked from Mirrors/bubbletea
examples/README.md GIFs (#470)
* docs(examples): Add `examples/README.md` Adds `examples/README.md` with GIFs of examples * docs(examples): Individual READMEs * docs(examples): add short description to each example
This commit is contained in:
Maas Lalani
GitHub
parent
cd3f486ab5
commit
70576bc9e0
|
|
@ -0,0 +1,328 @@
|
|||
# Examples
|
||||
|
||||
### Alt Screen Toggle
|
||||
|
||||
The `altscreen-toggle` example shows how to transition between the alternative
|
||||
screen buffer and the normal screen buffer using Bubble Tea.
|
||||
|
||||
<a href="./altscreen-toggle/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/altscreen-toggle.gif" />
|
||||
</a>
|
||||
|
||||
### Chat
|
||||
|
||||
The `chat` examples shows a basic chat application with a multi-line `textarea`
|
||||
input.
|
||||
|
||||
<a href="./chat/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/chat.gif" />
|
||||
</a>
|
||||
|
||||
### Composable Views
|
||||
|
||||
The `composable-views` example shows how to compose two bubble models (spinner
|
||||
and timer) together in a single application and switch between them.
|
||||
|
||||
<a href="./composable-views/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/composable-views.gif" />
|
||||
</a>
|
||||
|
||||
### Credit Card Form
|
||||
|
||||
The `credit-card-form` example demonstrates how to build a multi-step form with
|
||||
`textinput`s bubbles and validation on the inputs.
|
||||
|
||||
<a href="./credit-card-form/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/credit-card-form.gif" />
|
||||
</a>
|
||||
|
||||
### Debounce
|
||||
|
||||
The `debounce` example shows how to throttle key presses to avoid overloading
|
||||
your Bubble Tea application.
|
||||
|
||||
<a href="./debounce/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/debounce.gif" />
|
||||
</a>
|
||||
|
||||
### Exec
|
||||
|
||||
The `exec` example shows how to execute a running command during the execution
|
||||
of a Bubble Tea application such as launching an `EDITOR`.
|
||||
|
||||
<a href="./exec/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/exec.gif" />
|
||||
</a>
|
||||
|
||||
### Full Screen
|
||||
|
||||
The `fullscreen` example shows how to make a Bubble Tea application fullscreen.
|
||||
|
||||
<a href="./fullscreen/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/fullscreen.gif" />
|
||||
</a>
|
||||
|
||||
### Glamour
|
||||
|
||||
The `glamour` example shows how to use [Glamour](https://github.com/charmbracelet/glamour) inside a viewport bubble.
|
||||
|
||||
<a href="./glamour/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/glamour.gif" />
|
||||
</a>
|
||||
|
||||
### Help
|
||||
|
||||
The `help` example shows how to use the `help` bubble to display help to the
|
||||
user of your application.
|
||||
|
||||
<a href="./help/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/help.gif" />
|
||||
</a>
|
||||
|
||||
### Http
|
||||
|
||||
The `http` example shows how to make an `http` call within your Bubble Tea
|
||||
application.
|
||||
|
||||
<a href="./http/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/http.gif" />
|
||||
</a>
|
||||
|
||||
### Default List
|
||||
|
||||
The `list-default` example shows how to use the list bubble.
|
||||
|
||||
<a href="./list-default/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/list-default.gif" />
|
||||
</a>
|
||||
|
||||
### Fancy List
|
||||
|
||||
The `list-fancy` example shows how to use the list bubble with extra customizations.
|
||||
|
||||
<a href="./list-fancy/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/list-fancy.gif" />
|
||||
</a>
|
||||
|
||||
### Simple List
|
||||
|
||||
The `list-simple` example shows how to use the list and customize it to have a simpler, more compact, appearance.
|
||||
|
||||
<a href="./list-simple/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/list-simple.gif" />
|
||||
</a>
|
||||
|
||||
### Mouse
|
||||
|
||||
The `mouse` example shows how to receive mouse events in a Bubble Tea
|
||||
application.
|
||||
|
||||
<a href="./mouse/main.go">
|
||||
Code
|
||||
</a>
|
||||
|
||||
### Package Manager
|
||||
|
||||
The `package-manager` example shows how to build an interface for a package
|
||||
manager using the `tea.Println` feature.
|
||||
|
||||
<a href="./package-manager/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/package-manager.gif" />
|
||||
</a>
|
||||
|
||||
### Pager
|
||||
|
||||
The `pager` example shows how to build a simple pager application similar to
|
||||
`less`.
|
||||
|
||||
<a href="./pager/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/pager.gif" />
|
||||
</a>
|
||||
|
||||
### Paginator
|
||||
|
||||
The `paginator` example shows how to build a simple paginated list.
|
||||
|
||||
<a href="./paginator/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/paginator.gif" />
|
||||
</a>
|
||||
|
||||
### Pipe
|
||||
|
||||
The `pipe` example demonstrates using shell pipes to communicate with Bubble
|
||||
Tea applications.
|
||||
|
||||
<a href="./pipe/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/pipe.gif" />
|
||||
</a>
|
||||
|
||||
### Animated Progress
|
||||
|
||||
The `progress-animated` example shows how to build a progress bar with an
|
||||
animated progression.
|
||||
|
||||
<a href="./progress-animated/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/progress-animated.gif" />
|
||||
</a>
|
||||
|
||||
### Download Progress
|
||||
|
||||
The `progress-download` example demonstrates how to download a file while
|
||||
indicating download progress through Bubble Tea.
|
||||
|
||||
<a href="./progress-download/main.go">
|
||||
Code
|
||||
</a>
|
||||
|
||||
### Static Progress
|
||||
|
||||
The `progress-static` example shows a progress bar with static incrementation
|
||||
of progress.
|
||||
|
||||
<a href="./progress-static/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/progress-static.gif" />
|
||||
</a>
|
||||
|
||||
### Real Time
|
||||
|
||||
The `realtime` example demonstrates the use of go channels to perform realtime
|
||||
communication with a Bubble Tea application.
|
||||
|
||||
<a href="./realtime/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/realtime.gif" />
|
||||
</a>
|
||||
|
||||
### Result
|
||||
|
||||
The `result` example shows a choice menu with the ability to select an option.
|
||||
|
||||
<a href="./result/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/result.gif" />
|
||||
</a>
|
||||
|
||||
### Send Msg
|
||||
|
||||
The `send-msg` example demonstrates the usage of custom `tea.Msg`s.
|
||||
|
||||
<a href="./send-msg/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/send-msg.gif" />
|
||||
</a>
|
||||
|
||||
### Sequence
|
||||
|
||||
The `sequence` example demonstrates the `tea.Sequence` command.
|
||||
|
||||
<a href="./sequence/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/sequence.gif" />
|
||||
</a>
|
||||
|
||||
### Simple
|
||||
|
||||
The `simple` example shows a very simple Bubble Tea application.
|
||||
|
||||
<a href="./simple/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/simple.gif" />
|
||||
</a>
|
||||
|
||||
### Spinner
|
||||
|
||||
The `spinner` example demonstrates a spinner bubble being used to indicate loading.
|
||||
|
||||
<a href="./spinner/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/spinner.gif" />
|
||||
</a>
|
||||
|
||||
### Spinners
|
||||
|
||||
The `spinner` example shows various spinner types that are available.
|
||||
|
||||
<a href="./spinners/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/spinners.gif" />
|
||||
</a>
|
||||
|
||||
### Split Editors
|
||||
|
||||
The `split-editors` example shows multiple `textarea`s being used in a single
|
||||
application and being able to switch focus between them.
|
||||
|
||||
<a href="./split-editors/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/split-editors.gif" />
|
||||
</a>
|
||||
|
||||
### Stop Watch
|
||||
|
||||
The `stopwatch` example shows a sample stop watch built with Bubble Tea.
|
||||
|
||||
<a href="./stopwatch/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/stopwatch.gif" />
|
||||
</a>
|
||||
|
||||
### Table
|
||||
|
||||
The `table` example demonstrates the table bubble being used to display tabular
|
||||
data.
|
||||
|
||||
<a href="./table/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/table.gif" />
|
||||
</a>
|
||||
|
||||
### Tabs
|
||||
|
||||
The `tabs` example demonstrates tabbed navigation styled with [Lip Gloss](https://github.com/charmbracelet/lipgloss).
|
||||
|
||||
<a href="./tabs/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/tabs.gif" />
|
||||
</a>
|
||||
|
||||
### Text Area
|
||||
|
||||
The `textarea` example demonstrates a simple Bubble Tea application using a
|
||||
`textarea` bubble.
|
||||
|
||||
<a href="./textarea/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/textarea.gif" />
|
||||
</a>
|
||||
|
||||
### Text Input
|
||||
|
||||
The `textinput` example demonstrates a simple Bubble Tea application using a `textinput` bubble.
|
||||
|
||||
<a href="./textinput/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/textinput.gif" />
|
||||
</a>
|
||||
|
||||
### Multiple Text Inputs
|
||||
|
||||
The `textinputs` example shows multiple `textinputs` and being able to switch
|
||||
focus between them as well as changing the cursor mode.
|
||||
|
||||
<a href="./textinputs/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/textinputs.gif" />
|
||||
</a>
|
||||
|
||||
### Timer
|
||||
|
||||
The `timer` example shows a simple timer built with Bubble Tea.
|
||||
|
||||
<a href="./timer/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/timer.gif" />
|
||||
</a>
|
||||
|
||||
### TUI Daemon
|
||||
|
||||
The `tui-daemon-combo` demonstrates building a text-user interface along with a
|
||||
daemon mode using Bubble Tea.
|
||||
|
||||
<a href="./tui-daemon-combo/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/tui-daemon-combo.gif" />
|
||||
</a>
|
||||
|
||||
### Views
|
||||
|
||||
The `views` example demonstrates how to build a Bubble Tea application with
|
||||
multiple views and switch between them.
|
||||
|
||||
<a href="./views/main.go">
|
||||
<img width="750" src="https://stuff.charm.sh/bubbletea-examples/views.gif" />
|
||||
</a>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Alt Screen Toggle
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/altscreen-toggle.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Chat
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/chat.gif" />
|
||||
|
|
@ -51,11 +51,9 @@ func initialModel() model {
|
|||
|
||||
ta.ShowLineNumbers = false
|
||||
|
||||
vp := viewport.New(30, 10)
|
||||
vp.SetContent(`Welcome to the Bubbles multi-line text input!
|
||||
Try typing any message and pressing ENTER.
|
||||
If you write a long message, it will automatically wrap :D
|
||||
`)
|
||||
vp := viewport.New(30, 5)
|
||||
vp.SetContent(`Welcome to the chat room!
|
||||
Type a message and press Enter to send.`)
|
||||
|
||||
ta.KeyMap.InsertNewline.SetEnabled(false)
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
# Composable Views
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/composable-views.gif" />
|
||||
|
|
@ -44,10 +44,14 @@ var (
|
|||
spinner.Monkey,
|
||||
}
|
||||
modelStyle = lipgloss.NewStyle().
|
||||
Padding(1, 2).
|
||||
Width(15).
|
||||
Height(5).
|
||||
Align(lipgloss.Center, lipgloss.Center).
|
||||
BorderStyle(lipgloss.HiddenBorder())
|
||||
focusedModelStyle = lipgloss.NewStyle().
|
||||
Padding(1, 2).
|
||||
Width(15).
|
||||
Height(5).
|
||||
Align(lipgloss.Center, lipgloss.Center).
|
||||
BorderStyle(lipgloss.NormalBorder()).
|
||||
BorderForeground(lipgloss.Color("69"))
|
||||
spinnerStyle = lipgloss.NewStyle().Foreground(lipgloss.Color("69"))
|
||||
|
|
@ -124,7 +128,7 @@ func (m mainModel) View() string {
|
|||
} else {
|
||||
s += lipgloss.JoinHorizontal(lipgloss.Top, modelStyle.Render(fmt.Sprintf("%4s", m.timer.View())), focusedModelStyle.Render(m.spinner.View()))
|
||||
}
|
||||
s += helpStyle.Render(fmt.Sprintf("\ntab: change focused model • n: new %s • q: exit\n", model))
|
||||
s += helpStyle.Render(fmt.Sprintf("\ntab: focus next • n: new %s • q: exit\n", model))
|
||||
return s
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
# Credit Card Form
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/credit-card-form.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Debounce
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/debounce.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Exec
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/exec.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Full Screen
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/fullscreen.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Glamour
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/glamour.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Help
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/help.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# HTTP
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/http.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Default List
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/list-default.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Fancy List
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/list-fancy.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Simple List
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/list-simple.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Mouse
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/mouse.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Package Manager
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/package-manager.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Pager
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/pager.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Paginator
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/paginator.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Pipe
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/pipe.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Animated Progress
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/progress-animated.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Static Progress
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/progress-static.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Real Time
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/realtime.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Result
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/result.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Send Msg
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/send-msg.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Sequence
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/sequence.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Simple
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/simple.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Spinner
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/spinner.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Spinners
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/spinners.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Split Editors
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/split-editors.gif" />
|
||||
|
|
@ -28,6 +28,9 @@ var (
|
|||
placeholderStyle = lipgloss.NewStyle().
|
||||
Foreground(lipgloss.Color("238"))
|
||||
|
||||
endOfBufferStyle = lipgloss.NewStyle().
|
||||
Foreground(lipgloss.Color("235"))
|
||||
|
||||
focusedPlaceholderStyle = lipgloss.NewStyle().
|
||||
Foreground(lipgloss.Color("99"))
|
||||
|
||||
|
|
@ -54,6 +57,8 @@ func newTextarea() textarea.Model {
|
|||
t.FocusedStyle.CursorLine = cursorLineStyle
|
||||
t.FocusedStyle.Base = focusedBorderStyle
|
||||
t.BlurredStyle.Base = blurredBorderStyle
|
||||
t.FocusedStyle.EndOfBuffer = endOfBufferStyle
|
||||
t.BlurredStyle.EndOfBuffer = endOfBufferStyle
|
||||
t.KeyMap.DeleteWordBackward.SetEnabled(false)
|
||||
t.KeyMap.LineNext = key.NewBinding(key.WithKeys("down"))
|
||||
t.KeyMap.LinePrevious = key.NewBinding(key.WithKeys("up"))
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
# Stopwatch
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/stopwatch.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Table
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/table.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Tabs
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/tabs.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Text Area
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/textarea.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Text Input
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/textinput.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Text Inputs
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/textinputs.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Timer
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/timer.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# TUI Daemon
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/tui-daemon-combo.gif" />
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# Views
|
||||
|
||||
<img width="800" src="https://stuff.charm.sh/bubbletea-examples/views.gif" />
|
||||
Loading…
Reference in New Issue