102 lines
2.5 KiB
Markdown
102 lines
2.5 KiB
Markdown
# BadGUI
|
|
|
|
BadGUI is a Python framework that generates Vue.js/Quasar projects using syntax similar to NiceGUI. Instead of running a live server, BadGUI creates a complete, editable Vue.js project that you can further customize and deploy.
|
|
|
|
## Features
|
|
|
|
- **NiceGUI-like syntax**: Write familiar Python code to define your UI
|
|
- **Vue.js/Quasar output**: Generates modern, responsive web applications
|
|
- **Static project generation**: Creates editable Vue projects, not live servers
|
|
- **Component-based**: Modular component system for reusable UI elements
|
|
- **Layout system**: Built-in row/column layouts for easy arrangement
|
|
|
|
## Quick Start
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
pip install badgui
|
|
```
|
|
|
|
### Basic Usage
|
|
|
|
Create a Python file with your UI definition:
|
|
|
|
```python
|
|
# main.py
|
|
import badgui as bg
|
|
|
|
# Create some UI components
|
|
bg.label("Hello BadGUI!")
|
|
|
|
with bg.row():
|
|
bg.button("Click me!")
|
|
bg.input(placeholder="Enter text...")
|
|
|
|
with bg.column():
|
|
bg.label("Column item 1")
|
|
bg.label("Column item 2")
|
|
|
|
# Build the Vue.js project
|
|
bg.build(output_dir="./my-vue-app")
|
|
```
|
|
|
|
### Build and Run
|
|
|
|
```bash
|
|
# Generate the Vue project
|
|
python main.py
|
|
|
|
# Navigate to the generated project
|
|
cd my-vue-app
|
|
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Run the development server
|
|
npm run dev
|
|
```
|
|
|
|
## Components
|
|
|
|
BadGUI currently supports these basic components:
|
|
|
|
- `label(text)` - Text labels
|
|
- `button(text, on_click=None)` - Interactive buttons
|
|
- `input(placeholder="")` - Text input fields
|
|
- `row()` - Horizontal layout container
|
|
- `column()` - Vertical layout container
|
|
|
|
## Project Structure
|
|
|
|
When you run `bg.build()`, BadGUI generates a complete Vue.js/Quasar project with:
|
|
|
|
- `/src/pages/IndexPage.vue` - Main page with your components
|
|
- `/src/layouts/MainLayout.vue` - App layout structure
|
|
- `/src/router/` - Vue Router configuration
|
|
- `/package.json` - Project dependencies
|
|
- `/quasar.config.js` - Quasar framework configuration
|
|
|
|
## Development Status
|
|
|
|
BadGUI is in early development. Current version (0.1.0) includes:
|
|
|
|
✅ Basic component system (label, button, input)
|
|
✅ Layout containers (row, column)
|
|
✅ Vue.js/Quasar project generation
|
|
✅ Development server setup
|
|
|
|
Planned features:
|
|
- More UI components (cards, dialogs, tables, etc.)
|
|
- Event handling and interactivity
|
|
- Data binding capabilities
|
|
- Styling and theming system
|
|
- Advanced layouts and responsive design
|
|
|
|
## Contributing
|
|
|
|
BadGUI is open source and contributions are welcome! Please feel free to submit issues and pull requests.
|
|
|
|
## License
|
|
|
|
MIT License |