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.
147 lines
4.1 KiB
147 lines
4.1 KiB
Quick Start Guide |
|
================= |
|
|
|
This guide will get you up and running with BadGUI in minutes. |
|
|
|
Your First BadGUI App |
|
--------------------- |
|
|
|
Create a new Python file called ``hello_world.py``: |
|
|
|
.. code-block:: python |
|
|
|
import badgui as bg |
|
|
|
# Create a page using context manager |
|
with bg.page("/", "HomePage", "Hello World"): |
|
bg.label("Hello, World!").classes("text-h2 text-primary") |
|
bg.label("Welcome to BadGUI").classes("text-body1 text-grey-7") |
|
|
|
with bg.row().classes("q-gutter-md q-mt-md") as row: |
|
bg.button("Primary Button").classes("q-btn-primary") |
|
bg.button("Secondary Button").classes("q-btn-secondary") |
|
|
|
# 🚀 INSTANT DEVELOPMENT MODE - One command does it all! |
|
bg.dev(port=3000) # Creates temp build, installs deps, starts server! |
|
|
|
Run the script:: |
|
|
|
python hello_world.py |
|
|
|
**That's it!** The server automatically starts at ``http://localhost:3000`` - no manual setup needed! |
|
|
|
Development Modes |
|
----------------- |
|
|
|
**🚀 Instant Development (Recommended)** |
|
|
|
BadGUI's ``bg.dev()`` method provides the fastest development experience: |
|
|
|
.. code-block:: python |
|
|
|
# At the end of your script, use: |
|
bg.dev(port=3000) # Automatic build + install + server start |
|
|
|
**📦 Static Project Generation** |
|
|
|
For deployment or manual development, use ``bg.build()``: |
|
|
|
.. code-block:: python |
|
|
|
# Generate static project |
|
bg.build("hello-world-app") |
|
|
|
Then manually run:: |
|
|
|
cd hello-world-app |
|
npm install |
|
npm run dev |
|
|
|
Adding Components |
|
----------------- |
|
|
|
BadGUI provides several built-in components: |
|
|
|
.. code-block:: python |
|
|
|
import badgui as bg |
|
|
|
with bg.page("/", "ComponentsDemo", "Components Demo"): |
|
# Text components |
|
bg.label("Main Title").classes("text-h3") |
|
bg.label("Subtitle").classes("text-h6 text-grey-7") |
|
|
|
# Input components |
|
bg.input(placeholder="Enter your name").classes("q-mb-md") |
|
|
|
# Buttons |
|
bg.button("Click Me").props("push color=primary") |
|
|
|
# Navigation |
|
bg.link("Go to About", "/about").classes("q-btn q-btn-outline") |
|
|
|
bg.build("components-demo") |
|
|
|
Using Layouts |
|
------------- |
|
|
|
Create structured layouts with row and column containers: |
|
|
|
.. code-block:: python |
|
|
|
import badgui as bg |
|
|
|
with bg.page("/", "LayoutDemo", "Layout Demo"): |
|
bg.label("Layout Example").classes("text-h4 q-mb-lg") |
|
|
|
# Horizontal layout |
|
with bg.row().classes("q-gutter-md q-mb-lg"): |
|
bg.label("Left Column").classes("bg-blue-1 p-4 rounded") |
|
bg.label("Middle Column").classes("bg-green-1 p-4 rounded") |
|
bg.label("Right Column").classes("bg-red-1 p-4 rounded") |
|
|
|
# Vertical layout |
|
with bg.column().classes("q-gutter-sm"): |
|
bg.label("Row 1").classes("bg-grey-2 p-2") |
|
bg.label("Row 2").classes("bg-grey-2 p-2") |
|
bg.label("Row 3").classes("bg-grey-2 p-2") |
|
|
|
bg.build("layout-demo") |
|
|
|
Multi-Page Applications |
|
----------------------- |
|
|
|
Create multiple pages with routing: |
|
|
|
.. code-block:: python |
|
|
|
import badgui as bg |
|
|
|
# Home page |
|
with bg.page("/", "HomePage", "Home"): |
|
bg.label("Welcome to Home").classes("text-h3") |
|
bg.label("This is the home page content.") |
|
bg.link("Go to About", "/about").classes("q-btn q-btn-primary q-mt-md") |
|
|
|
# About page |
|
with bg.page("/about", "AboutPage", "About"): |
|
bg.label("About Us").classes("text-h3") |
|
bg.label("Learn more about our application.") |
|
bg.link("Back to Home", "/").classes("q-btn q-btn-secondary q-mt-md") |
|
|
|
# Contact page |
|
with bg.page("/contact", "ContactPage", "Contact"): |
|
bg.label("Contact Us").classes("text-h3") |
|
bg.input(placeholder="Your Name").classes("q-mb-md") |
|
bg.input(placeholder="Your Email").classes("q-mb-md") |
|
bg.button("Send Message").classes("q-btn q-btn-primary") |
|
|
|
bg.build("multi-page-app") |
|
|
|
Next Steps |
|
---------- |
|
|
|
- Learn about :doc:`components` for detailed component documentation |
|
- Explore :doc:`styling` for advanced styling techniques |
|
- Check out :doc:`examples` for complete application examples |
|
- Review the :doc:`api/modules` for full API reference |