Expand description
Visual styling and theming for list components.
This module provides comprehensive styling options for customizing the appearance of list components:
ListStyles: Complete styling configuration for all visual elements- Color schemes that adapt to light/dark terminal themes
- Typography and border styling options
- Default styles following terminal UI conventions
The styling system supports both built-in themes and complete customization for applications with specific branding requirements.
§Examples
use bubbletea_widgets::list::{Model, DefaultDelegate, DefaultItem, ListStyles};
let items = vec![DefaultItem::new("Item", "Description")];
let list = Model::new(items, DefaultDelegate::new(), 80, 24);
// Get the default styling - customization is done by modifying the struct fields
let default_styles = ListStyles::default();
// Styling can be customized by creating a new ListStyles instanceStyling system for list components.
This module provides comprehensive styling options for list components, including styles for different UI elements and visual states. The styling system is built on top of lipgloss and provides sensible defaults for terminal applications.
§Style Categories
- Title and Header: Styles for list titles and column headers
- Status and Filter: Styles for status bar and filter prompt
- Pagination: Styles for pagination indicators and navigation
- Visual Elements: Styles for spinners, dots, and separators
§Constants
BULLET: Unicode bullet character (•) used in paginationELLIPSIS: Unicode ellipsis character (…) for truncated content
§Color Scheme
The default styles use a dark theme with:
- Bright colors for active/selected elements
- Subdued colors for secondary information
- High contrast for readability
§Adaptive Colors
All default styles use AdaptiveColor which automatically adjusts to the
terminal’s light or dark theme, ensuring optimal readability and visual
consistency across different environments.
§Example
use bubbletea_widgets::list::style::{ListStyles, BULLET, ELLIPSIS};
use lipgloss_extras::prelude::*;
// Use default adaptive styles
let mut styles = ListStyles::default();
// Customize specific elements with adaptive colors
styles.title = Style::new()
.foreground(AdaptiveColor { Light: "#1a1a1a", Dark: "#ffffff" })
.bold(true);
// Use the constants for consistent symbols
println!("Pagination: {}", BULLET);
println!("Truncated: item1, item2{}", ELLIPSIS);Structs§
- List
Styles - Comprehensive styling configuration for all list component UI elements.