You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Matteo Benedetto
577df5c95e
## 🚀 Major New Features ### Complete Component Ecosystem - **Card Components**: `bg.card()`, `bg.card_section()`, `bg.card_actions()` with NiceGUI-style API - **Tab Navigation**: `bg.tabs()`, `bg.tab()`, `bg.tab_panels()`, `bg.tab_panel()` for interactive content - **Layout Components**: `bg.header()`, `bg.footer()` with context manager support - **Media Components**: `bg.image()`, `bg.icon()` with Material Design icon integration ### Enhanced Responsive Design - **Flex Utilities**: Added Quasar flex classes (`wrap`, `col-12 col-md-4`) to prevent overflow - **Context Manager Excellence**: Fixed AttributeError issues with proper component access patterns - **Material Design**: Full icon library support with color, size, and styling options ### Developer Experience Revolution - **Comprehensive Examples**: 7+ new example files demonstrating all components and patterns - **Context Manager Guide**: Detailed documentation for proper usage patterns - **Overflow Prevention**: Responsive layout patterns that prevent UI overflow issues ## 🔧 Technical Improvements ### Core Framework - Enhanced `Component` class with proper Vue.js component mapping - Added Quasar component mapping (`q-card`, `q-tabs`, `q-img`, `q-icon`, etc.) - Fixed context manager attribute access for all container components ### API Consistency - All components support NiceGUI-style method chaining - Consistent `.classes()`, `.props()`, `.style()` method support - Proper context manager patterns: `with bg.component() as name:` → `name.classes()` ## 📁 Files Added/Modified ### New Example Files - `simple_card_test.py` - Card component demonstrations - `simple_image_icon_test.py` - Image and icon usage examples - `tabs_examples.py` - Tab navigation and content management - `simple_header_footer_test.py` - Layout component examples - `flex_layout_test.py` - Responsive layout and overflow prevention - `enhanced_navigation_example.py` - Complete website showcase - `context_manager_guide.py` - Comprehensive usage guide ### Documentation Updates - Updated `README.md` with new component showcase and responsive examples - Enhanced `docs/source/components.rst` with all new components - Expanded `docs/source/examples.rst` with comprehensive usage patterns - Added `CHANGELOG.md` with detailed release notes ### Core Framework - `badgui/core.py` - Added all new components with proper Quasar mapping - `badgui/__init__.py` - Added convenience functions for all new components - `badgui/generator.py` - Removed blue header bar from default layout - Version bump to 0.2.0 ## 🎯 Key Usage Patterns Established ### Context Manager Excellence ```python # ✅ Correct pattern (now documented and examples provided) with bg.card() as my_card: my_card.classes("q-ma-md") with bg.card_section(): bg.label("Content") ``` ### Responsive Design ```python # Overflow prevention with proper flex utilities with bg.row() as grid: grid.classes("q-gutter-md wrap") # Prevents overflow with bg.card() as card: card.classes("col-12 col-sm-6 col-md-4") # Responsive breakpoints ``` ### Material Design Integration ```python # Full Material Design icon support bg.icon("home", size="2rem", color="primary") bg.image("https://example.com/image.jpg").classes("rounded-lg full-width") ``` ## 🚀 Impact & Value ### For Developers - **Zero Breaking Changes**: All existing code continues to work - **Enhanced Productivity**: Complete UI component suite reduces development time - **Better Documentation**: Comprehensive examples and usage guides - **Responsive by Default**: Built-in overflow prevention and mobile-first design ### For Applications - **Professional UI**: Material Design components with Quasar integration - **Mobile Responsive**: Proper breakpoints and flex utilities - **Modern Architecture**: Vue.js 3 + Quasar Framework output - **Instant Development**: `bg.dev()` workflow unchanged and enhanced ## 🎨 Component Coverage **Now Complete:** - ✅ Basic: `label`, `button`, `input`, `link` - ✅ Cards: `card`, `card_section`, `card_actions` - ✅ Tabs: `tabs`, `tab`, `tab_panels`, `tab_panel` - ✅ Layout: `header`, `footer`, `row`, `column` - ✅ Media: `image`, `icon` - ✅ Navigation: Router links with Vue Router **Foundation for Future:** - 🚧 Forms, Dialogs, Tables, Menus - 🚧 Advanced interactions and data binding - 🚧 Theming and customization system This release establishes BadGUI as a complete UI framework for building modern, responsive web applications with Python syntax. The comprehensive example suite and documentation ensure developers can immediately leverage all new capabilities. --- **Migration**: No changes required - all new features are additive **Compatibility**: Full backward compatibility maintained **Testing**: All examples tested with `bg.dev()` instant development |
3 months ago | |
|---|---|---|
| .. | ||
| source | 🎉 BadGUI v0.2.0 - Complete UI Component Suite & Enhanced Developer Experience | 3 months ago |
| Makefile | 🎉 BadGUI v0.2.0 - Complete UI Component Suite & Enhanced Developer Experience | 3 months ago |
| make.bat | 🎉 BadGUI v0.2.0 - Complete UI Component Suite & Enhanced Developer Experience | 3 months ago |
