|
|
Examples |
|
|
======== |
|
|
|
|
|
This section contains practical examples demonstrating BadGUI features, including new components like cards, tabs, headers, footers, images, and icons, with emphasis on the **🚀 Instant Development** workflow using ``bg.dev()``. |
|
|
|
|
|
🚀 Quick Start with bg.dev() |
|
|
----------------------------- |
|
|
|
|
|
The fastest way to get started - one command does it all: |
|
|
|
|
|
.. code-block:: python |
|
|
|
|
|
import badgui as bg |
|
|
|
|
|
with bg.page("/", "HomePage", "Quick Start"): |
|
|
bg.label("Hello BadGUI!").classes("text-h2 text-primary text-center") |
|
|
bg.button("Click Me").classes("q-btn-primary q-btn-lg") |
|
|
|
|
|
# 🚀 INSTANT DEVELOPMENT - Creates temp build, installs deps, starts server! |
|
|
bg.dev() |
|
|
|
|
|
Save as ``quick_start.py`` and run:: |
|
|
|
|
|
python quick_start.py |
|
|
|
|
|
Your app opens automatically at ``http://localhost:9000`` ✨ |
|
|
|
|
|
Modern Website with New Components |
|
|
---------------------------------- |
|
|
|
|
|
A complete website demonstrating all the new components: |
|
|
|
|
|
.. code-block:: python |
|
|
|
|
|
import badgui as bg |
|
|
|
|
|
# Home page with full component showcase |
|
|
with bg.page("/", "HomePage", "Modern Website"): |
|
|
|
|
|
# Header with navigation |
|
|
with bg.header() as nav_header: |
|
|
nav_header.classes("bg-primary text-white q-pa-md") |
|
|
with bg.row() as nav_row: |
|
|
nav_row.classes("items-center justify-between") |
|
|
|
|
|
# Logo with icon |
|
|
with bg.row() as logo: |
|
|
logo.classes("items-center q-gutter-sm") |
|
|
bg.icon("home", size="2rem", color="white") |
|
|
bg.label("My Website").classes("text-h4") |
|
|
|
|
|
# Navigation links |
|
|
with bg.row() as nav_links: |
|
|
nav_links.classes("q-gutter-md") |
|
|
bg.link("Home", "/").classes("text-white") |
|
|
bg.link("About", "/about").classes("text-white") |
|
|
|
|
|
# Main content |
|
|
with bg.column() as main_content: |
|
|
main_content.classes("q-pa-lg") |
|
|
|
|
|
# Hero card |
|
|
with bg.card() as hero: |
|
|
hero.classes("bg-blue-1 q-pa-xl q-mb-lg") |
|
|
with bg.card_section(): |
|
|
bg.label("Welcome to BadGUI").classes("text-h3 text-primary q-mb-md") |
|
|
bg.label("Build modern web applications with Python syntax") |
|
|
with bg.card_actions(): |
|
|
bg.button("Get Started").classes("q-btn-primary") |
|
|
bg.button("Learn More").classes("q-btn-secondary") |
|
|
|
|
|
# Feature cards with responsive layout |
|
|
with bg.row() as features: |
|
|
features.classes("q-gutter-md wrap") |
|
|
|
|
|
# Feature 1 |
|
|
with bg.card() as feature1: |
|
|
feature1.classes("col-12 col-md-4") |
|
|
with bg.card_section(): |
|
|
bg.icon("speed", size="3rem", color="primary").classes("q-mb-md") |
|
|
bg.label("Fast Development").classes("text-h5 q-mb-md") |
|
|
bg.label("Rapid prototyping with Python syntax") |
|
|
|
|
|
# Feature 2 |
|
|
with bg.card() as feature2: |
|
|
feature2.classes("col-12 col-md-4") |
|
|
with bg.card_section(): |
|
|
bg.icon("build", size="3rem", color="secondary").classes("q-mb-md") |
|
|
bg.label("Modern Stack").classes("text-h5 q-mb-md") |
|
|
bg.label("Vue.js 3 + Quasar Framework") |
|
|
|
|
|
# Feature 3 |
|
|
with bg.card() as feature3: |
|
|
feature3.classes("col-12 col-md-4") |
|
|
with bg.card_section(): |
|
|
bg.icon("code", size="3rem", color="accent").classes("q-mb-md") |
|
|
bg.label("NiceGUI Compatible").classes("text-h5 q-mb-md") |
|
|
bg.label("Familiar syntax and patterns") |
|
|
|
|
|
# Image gallery |
|
|
with bg.card() as gallery: |
|
|
gallery.classes("q-mt-lg") |
|
|
with bg.card_section(): |
|
|
with bg.row() as gallery_header: |
|
|
gallery_header.classes("items-center q-gutter-sm q-mb-lg") |
|
|
bg.icon("photo_library", size="2rem", color="primary") |
|
|
bg.label("Project Gallery").classes("text-h4") |
|
|
|
|
|
with bg.row() as gallery_row: |
|
|
gallery_row.classes("q-gutter-md wrap") |
|
|
|
|
|
# Gallery items |
|
|
projects = [ |
|
|
("E-commerce Platform", "Modern shopping experience"), |
|
|
("Dashboard App", "Data visualization tool"), |
|
|
("Mobile App", "Cross-platform solution") |
|
|
] |
|
|
|
|
|
for i, (title, desc) in enumerate(projects, 1): |
|
|
with bg.column() as gallery_item: |
|
|
gallery_item.classes("col-12 col-sm-6 col-md-4 text-center") |
|
|
bg.image(f"https://picsum.photos/300/200?random={i}").classes("rounded-lg shadow-md q-mb-sm full-width") |
|
|
bg.label(title).classes("text-h6") |
|
|
bg.label(desc) |
|
|
|
|
|
# Tabs example |
|
|
with bg.tabs() as main_tabs: |
|
|
main_tabs.classes("text-primary q-mt-lg") |
|
|
with bg.tab("features", "Features"): |
|
|
pass |
|
|
with bg.tab("pricing", "Pricing"): |
|
|
pass |
|
|
with bg.tab("support", "Support"): |
|
|
pass |
|
|
|
|
|
with bg.tab_panels() as panels: |
|
|
panels.classes("q-pa-md") |
|
|
|
|
|
with bg.tab_panel("features"): |
|
|
with bg.column() as features_content: |
|
|
features_content.classes("q-gutter-md") |
|
|
bg.label("Comprehensive Feature Set").classes("text-h5 q-mb-md") |
|
|
|
|
|
features_list = [ |
|
|
("Context Managers", "Proper component nesting with 'with' statements"), |
|
|
("Responsive Design", "Built-in flex utilities and breakpoints"), |
|
|
("Material Icons", "Full Material Design icon library"), |
|
|
("NiceGUI API", "Familiar method chaining and styling") |
|
|
] |
|
|
|
|
|
for title, desc in features_list: |
|
|
with bg.card() as feature_card: |
|
|
feature_card.classes("q-pa-md") |
|
|
with bg.card_section(): |
|
|
with bg.row() as feature_row: |
|
|
feature_row.classes("items-center q-gutter-md") |
|
|
bg.icon("check_circle", color="positive") |
|
|
with bg.column(): |
|
|
bg.label(title).classes("text-h6") |
|
|
bg.label(desc) |
|
|
|
|
|
with bg.tab_panel("pricing"): |
|
|
bg.label("Pricing information goes here").classes("text-h5") |
|
|
bg.label("BadGUI is open source and free to use!") |
|
|
|
|
|
with bg.tab_panel("support"): |
|
|
bg.label("Support & Documentation").classes("text-h5 q-mb-md") |
|
|
bg.label("Visit our GitHub repository for documentation and support") |
|
|
|
|
|
# Footer |
|
|
with bg.footer() as page_footer: |
|
|
page_footer.classes("bg-dark text-white q-pa-lg") |
|
|
with bg.column(): |
|
|
with bg.row() as footer_content: |
|
|
footer_content.classes("justify-between items-center") |
|
|
|
|
|
# Company info |
|
|
with bg.column(): |
|
|
with bg.row() as footer_logo: |
|
|
footer_logo.classes("items-center q-gutter-sm q-mb-md") |
|
|
bg.icon("home", size="1.5rem", color="white") |
|
|
bg.label("My Website").classes("text-h6") |
|
|
bg.label("Building the future of web development") |
|
|
|
|
|
# Social icons |
|
|
with bg.row() as social_icons: |
|
|
social_icons.classes("q-gutter-md") |
|
|
bg.icon("facebook", size="1.5rem", color="blue") |
|
|
bg.icon("twitter", size="1.5rem", color="light-blue") |
|
|
bg.icon("github", size="1.5rem", color="white") |
|
|
|
|
|
# Copyright |
|
|
with bg.row() as copyright: |
|
|
copyright.classes("justify-center q-pt-lg border-t border-gray-600") |
|
|
bg.label("© 2024 My Website. Built with BadGUI.").classes("opacity-75") |
|
|
|
|
|
# 🚀 Start instant development |
|
|
bg.dev(port=3000) |
|
|
|
|
|
Context Manager Usage Guide |
|
|
--------------------------- |
|
|
|
|
|
Proper usage of BadGUI's context managers: |
|
|
|
|
|
.. code-block:: python |
|
|
|
|
|
import badgui as bg |
|
|
|
|
|
# ✅ CORRECT: Use 'as' to capture the component |
|
|
with bg.column() as main_col: |
|
|
main_col.classes("q-pa-lg") |
|
|
|
|
|
with bg.row() as header_row: |
|
|
header_row.classes("items-center justify-between") |
|
|
bg.label("Title") |
|
|
|
|
|
# ❌ WRONG: Cannot call .classes() on context manager directly |
|
|
# with bg.column().classes("q-pa-lg"): # This will cause AttributeError |
|
|
|
|
|
# ✅ CORRECT: Cards with proper nesting |
|
|
with bg.card() as my_card: |
|
|
my_card.classes("q-ma-md shadow-5") |
|
|
|
|
|
with bg.card_section(): |
|
|
bg.label("Card Title").classes("text-h5") |
|
|
bg.label("Card content") |
|
|
|
|
|
with bg.card_actions(): |
|
|
bg.button("Action 1") |
|
|
bg.button("Action 2") |
|
|
|
|
|
Responsive Layout Examples |
|
|
-------------------------- |
|
|
|
|
|
Preventing card overflow with proper flex utilities: |
|
|
|
|
|
.. code-block:: python |
|
|
|
|
|
import badgui as bg |
|
|
|
|
|
with bg.page("/responsive", "ResponsivePage", "Responsive Layouts"): |
|
|
|
|
|
with bg.column() as main: |
|
|
main.classes("q-pa-lg") |
|
|
|
|
|
# Card grid that wraps properly |
|
|
with bg.row() as card_grid: |
|
|
card_grid.classes("q-gutter-md wrap") # 'wrap' prevents overflow |
|
|
|
|
|
# Cards with responsive column classes |
|
|
for i in range(6): |
|
|
with bg.card() as grid_card: |
|
|
grid_card.classes("col-12 col-sm-6 col-md-4 col-lg-2") # Responsive breakpoints |
|
|
with bg.card_section(): |
|
|
bg.label(f"Card {i+1}").classes("text-h6") |
|
|
bg.label("Responsive card content") |
|
|
|
|
|
# Mixed responsive layout |
|
|
with bg.row() as mixed_layout: |
|
|
mixed_layout.classes("q-gutter-md wrap") |
|
|
|
|
|
# Main content area |
|
|
with bg.column() as main_content: |
|
|
main_content.classes("col-12 col-md-8") # Full width on mobile, 2/3 on desktop |
|
|
|
|
|
with bg.card() as main_card: |
|
|
main_card.classes("q-pa-lg") |
|
|
bg.label("Main Content").classes("text-h4 q-mb-md") |
|
|
bg.label("This content area is responsive and adapts to screen size") |
|
|
|
|
|
# Sidebar |
|
|
with bg.column() as sidebar: |
|
|
sidebar.classes("col-12 col-md-4") # Full width on mobile, 1/3 on desktop |
|
|
|
|
|
with bg.card() as sidebar_card: |
|
|
sidebar_card.classes("q-pa-md bg-grey-1") |
|
|
bg.label("Sidebar").classes("text-h5 q-mb-md") |
|
|
bg.label("Sidebar content stacks below main content on mobile") |
|
|
|
|
|
bg.dev(port=3001) |
|
|
|
|
|
Dashboard Application |
|
|
--------------------- |
|
|
|
|
|
A complete dashboard with multiple sections: |
|
|
|
|
|
.. code-block:: python |
|
|
|
|
|
import badgui as bg |
|
|
|
|
|
def create_sidebar(): |
|
|
\"\"\"Create sidebar navigation.\"\"\" |
|
|
with bg.column().classes("bg-grey-2 q-pa-md") as sidebar: |
|
|
sidebar.style("min-height: 100vh; width: 250px") |
|
|
|
|
|
bg.label("Dashboard").classes("text-h5 q-mb-lg text-center") |
|
|
|
|
|
# Navigation items |
|
|
nav_items = [ |
|
|
("Overview", "/"), |
|
|
("Analytics", "/analytics"), |
|
|
("Users", "/users"), |
|
|
("Settings", "/settings") |
|
|
] |
|
|
|
|
|
for label, path in nav_items: |
|
|
bg.link(label, path).classes("q-btn q-btn-flat full-width justify-start q-mb-sm") |
|
|
|
|
|
def create_header(title): |
|
|
\"\"\"Create page header.\"\"\" |
|
|
with bg.row().classes("bg-primary text-white q-pa-md items-center justify-between"): |
|
|
bg.label(title).classes("text-h4") |
|
|
bg.label("Welcome, User").classes("text-body1") |
|
|
|
|
|
def create_stat_card(title, value, icon, color): |
|
|
\"\"\"Create a statistics card.\"\"\" |
|
|
with bg.column().classes(f"bg-{color}-1 q-pa-lg rounded text-center") as card: |
|
|
bg.label(icon).classes(f"text-{color} text-h3 q-mb-md") |
|
|
bg.label(value).classes("text-h4 text-weight-bold q-mb-sm") |
|
|
bg.label(title).classes("text-body2 text-grey-7") |
|
|
|
|
|
# Overview Page |
|
|
with bg.page("/", "OverviewPage", "Dashboard - Overview"): |
|
|
with bg.row().classes("no-wrap") as main_layout: |
|
|
create_sidebar() |
|
|
|
|
|
with bg.column().classes("col"): |
|
|
create_header("Overview") |
|
|
|
|
|
with bg.column().classes("q-pa-lg"): |
|
|
# Statistics row |
|
|
with bg.row().classes("q-col-gutter-lg q-mb-lg"): |
|
|
with bg.column().classes("col-12 col-md-3"): |
|
|
create_stat_card("Total Users", "1,234", "👥", "blue") |
|
|
with bg.column().classes("col-12 col-md-3"): |
|
|
create_stat_card("Revenue", "$12,345", "💰", "green") |
|
|
with bg.column().classes("col-12 col-md-3"): |
|
|
create_stat_card("Orders", "567", "📦", "orange") |
|
|
with bg.column().classes("col-12 col-md-3"): |
|
|
create_stat_card("Growth", "+23%", "📈", "purple") |
|
|
|
|
|
# Recent activity |
|
|
bg.label("Recent Activity").classes("text-h5 q-mb-md") |
|
|
with bg.column().classes("bg-white rounded q-pa-lg shadow-1"): |
|
|
activities = [ |
|
|
"New user registered", |
|
|
"Order #1234 completed", |
|
|
"Payment received", |
|
|
"Product updated" |
|
|
] |
|
|
for activity in activities: |
|
|
bg.label(f"• {activity}").classes("q-mb-sm") |
|
|
|
|
|
# Analytics Page |
|
|
with bg.page("/analytics", "AnalyticsPage", "Dashboard - Analytics"): |
|
|
with bg.row().classes("no-wrap"): |
|
|
create_sidebar() |
|
|
|
|
|
with bg.column().classes("col"): |
|
|
create_header("Analytics") |
|
|
|
|
|
with bg.column().classes("q-pa-lg"): |
|
|
bg.label("Analytics Dashboard").classes("text-h4 q-mb-lg") |
|
|
|
|
|
# Placeholder for charts |
|
|
with bg.row().classes("q-col-gutter-lg"): |
|
|
with bg.column().classes("col-12 col-md-6"): |
|
|
with bg.column().classes("bg-white q-pa-lg rounded shadow-1"): |
|
|
bg.label("Revenue Chart").classes("text-h6 q-mb-md") |
|
|
bg.label("Chart placeholder - integrate with Chart.js").classes("text-center q-pa-xl bg-grey-1") |
|
|
|
|
|
with bg.column().classes("col-12 col-md-6"): |
|
|
with bg.column().classes("bg-white q-pa-lg rounded shadow-1"): |
|
|
bg.label("User Growth").classes("text-h6 q-mb-md") |
|
|
bg.label("Chart placeholder - integrate with Chart.js").classes("text-center q-pa-xl bg-grey-1") |
|
|
|
|
|
# Users Page |
|
|
with bg.page("/users", "UsersPage", "Dashboard - Users"): |
|
|
with bg.row().classes("no-wrap"): |
|
|
create_sidebar() |
|
|
|
|
|
with bg.column().classes("col"): |
|
|
create_header("Users") |
|
|
|
|
|
with bg.column().classes("q-pa-lg"): |
|
|
bg.label("User Management").classes("text-h4 q-mb-lg") |
|
|
|
|
|
# User table header |
|
|
with bg.row().classes("bg-grey-3 q-pa-md rounded-top"): |
|
|
bg.label("Name").classes("col-3 text-weight-bold") |
|
|
bg.label("Email").classes("col-4 text-weight-bold") |
|
|
bg.label("Role").classes("col-2 text-weight-bold") |
|
|
bg.label("Actions").classes("col-3 text-weight-bold") |
|
|
|
|
|
# User rows |
|
|
users = [ |
|
|
("John Doe", "john@example.com", "Admin"), |
|
|
("Jane Smith", "jane@example.com", "User"), |
|
|
("Bob Johnson", "bob@example.com", "Editor") |
|
|
] |
|
|
|
|
|
for name, email, role in users: |
|
|
with bg.row().classes("bg-white q-pa-md border-bottom"): |
|
|
bg.label(name).classes("col-3") |
|
|
bg.label(email).classes("col-4") |
|
|
bg.label(role).classes("col-2") |
|
|
with bg.row().classes("col-3 q-gutter-sm"): |
|
|
bg.button("Edit").classes("q-btn-sm q-btn-primary") |
|
|
bg.button("Delete").classes("q-btn-sm q-btn-negative") |
|
|
|
|
|
bg.build("dashboard-app") |
|
|
|
|
|
E-commerce Store |
|
|
---------------- |
|
|
|
|
|
A complete e-commerce store example: |
|
|
|
|
|
.. code-block:: python |
|
|
|
|
|
import badgui as bg |
|
|
|
|
|
def create_navbar(): |
|
|
\"\"\"Create store navigation bar.\"\"\" |
|
|
with bg.row().classes("bg-white shadow-1 q-pa-md items-center justify-between"): |
|
|
bg.label("🛍️ MyStore").classes("text-h5 text-primary text-weight-bold") |
|
|
|
|
|
with bg.row().classes("q-gutter-md items-center"): |
|
|
bg.input(placeholder="Search products...").classes("").props("outlined dense") |
|
|
bg.link("Products", "/products").classes("text-grey-8 no-underline") |
|
|
bg.link("Cart (0)", "/cart").classes("text-grey-8 no-underline") |
|
|
bg.button("Login").classes("q-btn-primary q-btn-sm") |
|
|
|
|
|
def create_product_card(name, price, image_placeholder): |
|
|
\"\"\"Create a product card.\"\"\" |
|
|
with bg.column().classes("bg-white rounded shadow-2 q-pa-md"): |
|
|
# Product image placeholder |
|
|
with bg.column().classes("bg-grey-3 rounded q-mb-md text-center q-pa-xl"): |
|
|
bg.label("📷").classes("text-h3") |
|
|
bg.label(image_placeholder).classes("text-caption") |
|
|
|
|
|
bg.label(name).classes("text-h6 q-mb-sm") |
|
|
bg.label(f"${price}").classes("text-h5 text-green-6 text-weight-bold q-mb-md") |
|
|
|
|
|
with bg.row().classes("q-gutter-sm"): |
|
|
bg.button("Add to Cart").classes("q-btn-primary col") |
|
|
bg.button("♡").classes("q-btn-outline col-auto") |
|
|
|
|
|
# Home Page |
|
|
with bg.page("/", "HomePage", "MyStore - Home"): |
|
|
create_navbar() |
|
|
|
|
|
# Hero section |
|
|
with bg.column().classes("bg-gradient-to-r from-purple-400 to-pink-400 text-white text-center q-pa-xl"): |
|
|
bg.label("Welcome to MyStore").classes("text-h2 q-mb-md") |
|
|
bg.label("Discover amazing products at great prices").classes("text-h6 q-mb-lg") |
|
|
bg.link("Shop Now", "/products").classes("q-btn q-btn-lg q-btn-white text-primary") |
|
|
|
|
|
# Featured products |
|
|
with bg.column().classes("q-pa-xl"): |
|
|
bg.label("Featured Products").classes("text-h4 text-center q-mb-lg") |
|
|
|
|
|
with bg.row().classes("q-col-gutter-lg"): |
|
|
products = [ |
|
|
("Wireless Headphones", "99.99", "Headphones Image"), |
|
|
("Smart Watch", "199.99", "Watch Image"), |
|
|
("Laptop Stand", "49.99", "Stand Image"), |
|
|
("USB-C Cable", "19.99", "Cable Image") |
|
|
] |
|
|
|
|
|
for name, price, image in products: |
|
|
with bg.column().classes("col-12 col-sm-6 col-md-3"): |
|
|
create_product_card(name, price, image) |
|
|
|
|
|
# Products Page |
|
|
with bg.page("/products", "ProductsPage", "Products"): |
|
|
create_navbar() |
|
|
|
|
|
with bg.row().classes("q-pa-lg"): |
|
|
# Sidebar filters |
|
|
with bg.column().classes("col-12 col-md-3 q-pr-lg"): |
|
|
bg.label("Filters").classes("text-h6 q-mb-md") |
|
|
|
|
|
with bg.column().classes("bg-white rounded q-pa-md shadow-1"): |
|
|
bg.label("Category").classes("text-weight-bold q-mb-sm") |
|
|
categories = ["Electronics", "Clothing", "Home", "Sports"] |
|
|
for category in categories: |
|
|
with bg.row().classes("items-center q-mb-sm"): |
|
|
bg.label(f"☐ {category}").classes("text-body2") |
|
|
|
|
|
bg.label("Price Range").classes("text-weight-bold q-mb-sm q-mt-md") |
|
|
bg.input(placeholder="Min").classes("q-mb-sm").props("outlined dense type=number") |
|
|
bg.input(placeholder="Max").classes("q-mb-md").props("outlined dense type=number") |
|
|
|
|
|
bg.button("Apply Filters").classes("q-btn-primary full-width") |
|
|
|
|
|
# Products grid |
|
|
with bg.column().classes("col-12 col-md-9"): |
|
|
bg.label("All Products").classes("text-h5 q-mb-lg") |
|
|
|
|
|
with bg.row().classes("q-col-gutter-lg"): |
|
|
# Generate more products |
|
|
all_products = [ |
|
|
("Gaming Mouse", "79.99", "Mouse Image"), |
|
|
("Mechanical Keyboard", "129.99", "Keyboard Image"), |
|
|
("4K Monitor", "299.99", "Monitor Image"), |
|
|
("Webcam", "89.99", "Camera Image"), |
|
|
("Phone Case", "24.99", "Case Image"), |
|
|
("Power Bank", "39.99", "Battery Image") |
|
|
] |
|
|
|
|
|
for name, price, image in all_products: |
|
|
with bg.column().classes("col-12 col-sm-6 col-lg-4"): |
|
|
create_product_card(name, price, image) |
|
|
|
|
|
# Cart Page |
|
|
with bg.page("/cart", "CartPage", "Shopping Cart"): |
|
|
create_navbar() |
|
|
|
|
|
with bg.column().classes("q-pa-xl max-width-md mx-auto"): |
|
|
bg.label("Shopping Cart").classes("text-h4 q-mb-lg") |
|
|
|
|
|
# Cart items |
|
|
cart_items = [ |
|
|
("Wireless Headphones", "99.99", "1"), |
|
|
("Smart Watch", "199.99", "1") |
|
|
] |
|
|
|
|
|
for name, price, qty in cart_items: |
|
|
with bg.row().classes("bg-white rounded q-pa-md q-mb-md shadow-1 items-center"): |
|
|
with bg.column().classes("col"): |
|
|
bg.label(name).classes("text-h6") |
|
|
bg.label(f"${price}").classes("text-green-6") |
|
|
|
|
|
with bg.column().classes("col-auto"): |
|
|
bg.input(value=qty).classes("text-center").props("outlined dense type=number style=width:60px") |
|
|
|
|
|
with bg.column().classes("col-auto"): |
|
|
bg.button("Remove").classes("q-btn-sm q-btn-negative") |
|
|
|
|
|
# Cart total |
|
|
with bg.row().classes("bg-grey-1 q-pa-md rounded justify-between items-center q-mt-lg"): |
|
|
bg.label("Total: $299.98").classes("text-h5 text-weight-bold") |
|
|
bg.button("Checkout").classes("q-btn-lg q-btn-primary") |
|
|
|
|
|
bg.build("ecommerce-store") |
|
|
|
|
|
Portfolio Website |
|
|
----------------- |
|
|
|
|
|
A personal portfolio website: |
|
|
|
|
|
.. code-block:: python |
|
|
|
|
|
import badgui as bg |
|
|
|
|
|
def create_nav(): |
|
|
\"\"\"Create navigation menu.\"\"\" |
|
|
with bg.row().classes("bg-white shadow-1 q-pa-md justify-between items-center sticky-top"): |
|
|
bg.label("John Developer").classes("text-h6 text-primary text-weight-bold") |
|
|
|
|
|
with bg.row().classes("q-gutter-lg"): |
|
|
bg.link("Home", "/").classes("text-grey-8 no-underline hover-primary") |
|
|
bg.link("About", "/about").classes("text-grey-8 no-underline hover-primary") |
|
|
bg.link("Projects", "/projects").classes("text-grey-8 no-underline hover-primary") |
|
|
bg.link("Contact", "/contact").classes("text-grey-8 no-underline hover-primary") |
|
|
|
|
|
# Home Page |
|
|
with bg.page("/", "HomePage", "John Developer - Portfolio"): |
|
|
create_nav() |
|
|
|
|
|
# Hero section |
|
|
with bg.column().classes("text-center q-pa-xl bg-gradient-to-br from-blue-50 to-indigo-100"): |
|
|
bg.label("Hi, I'm John").classes("text-h2 q-mb-md") |
|
|
bg.label("Full Stack Developer").classes("text-h4 text-grey-7 q-mb-lg") |
|
|
bg.label("I create beautiful, functional web applications").classes("text-h6 text-grey-6 q-mb-xl") |
|
|
|
|
|
with bg.row().classes("justify-center q-gutter-md"): |
|
|
bg.link("View My Work", "/projects").classes("q-btn q-btn-lg q-btn-primary") |
|
|
bg.link("Get In Touch", "/contact").classes("q-btn q-btn-lg q-btn-outline") |
|
|
|
|
|
# Skills section |
|
|
with bg.column().classes("q-pa-xl"): |
|
|
bg.label("Technologies I Work With").classes("text-h4 text-center q-mb-lg") |
|
|
|
|
|
with bg.row().classes("justify-center q-col-gutter-lg"): |
|
|
skills = [ |
|
|
("Python", "🐍"), |
|
|
("JavaScript", "⚡"), |
|
|
("Vue.js", "💚"), |
|
|
("React", "⚛️"), |
|
|
("Node.js", "🟢"), |
|
|
("Database", "🗄️") |
|
|
] |
|
|
|
|
|
for skill, icon in skills: |
|
|
with bg.column().classes("col-6 col-sm-4 col-md-2 text-center"): |
|
|
with bg.column().classes("bg-white rounded shadow-2 q-pa-lg"): |
|
|
bg.label(icon).classes("text-h2 q-mb-md") |
|
|
bg.label(skill).classes("text-weight-bold") |
|
|
|
|
|
# Projects Page |
|
|
with bg.page("/projects", "ProjectsPage", "Projects"): |
|
|
create_nav() |
|
|
|
|
|
with bg.column().classes("q-pa-xl"): |
|
|
bg.label("My Projects").classes("text-h3 text-center q-mb-xl") |
|
|
|
|
|
projects = [ |
|
|
("E-commerce Platform", "Full-stack online store with payment integration", "🛒"), |
|
|
("Task Management App", "Collaborative project management tool", "✅"), |
|
|
("Weather Dashboard", "Real-time weather data visualization", "🌤️"), |
|
|
("Blog Platform", "Content management system with admin panel", "📝") |
|
|
] |
|
|
|
|
|
with bg.row().classes("q-col-gutter-xl"): |
|
|
for title, desc, icon in projects: |
|
|
with bg.column().classes("col-12 col-md-6"): |
|
|
with bg.column().classes("bg-white rounded shadow-4 q-pa-lg"): |
|
|
bg.label(icon).classes("text-h1 text-center q-mb-md") |
|
|
bg.label(title).classes("text-h5 text-center q-mb-md") |
|
|
bg.label(desc).classes("text-body1 text-grey-7 text-center q-mb-lg") |
|
|
|
|
|
with bg.row().classes("justify-center q-gutter-sm"): |
|
|
bg.button("Live Demo").classes("q-btn-primary") |
|
|
bg.button("Source Code").classes("q-btn-outline") |
|
|
|
|
|
bg.build("portfolio-website") |
|
|
|
|
|
Blog Platform |
|
|
------------- |
|
|
|
|
|
A complete blog with admin features: |
|
|
|
|
|
.. code-block:: python |
|
|
|
|
|
import badgui as bg |
|
|
|
|
|
def create_header(): |
|
|
\"\"\"Create blog header.\"\"\" |
|
|
with bg.row().classes("bg-white shadow-1 q-pa-md justify-between items-center"): |
|
|
bg.link("Tech Blog", "/").classes("text-h5 text-primary text-weight-bold no-underline") |
|
|
|
|
|
with bg.row().classes("q-gutter-md"): |
|
|
bg.link("Home", "/").classes("text-grey-8 no-underline") |
|
|
bg.link("Categories", "/categories").classes("text-grey-8 no-underline") |
|
|
bg.link("About", "/about").classes("text-grey-8 no-underline") |
|
|
bg.input(placeholder="Search...").classes("").props("outlined dense") |
|
|
|
|
|
def create_post_card(title, excerpt, date, category): |
|
|
\"\"\"Create blog post card.\"\"\" |
|
|
with bg.column().classes("bg-white rounded shadow-2 q-pa-lg"): |
|
|
bg.label(category).classes("text-caption text-primary text-weight-bold q-mb-sm") |
|
|
bg.label(title).classes("text-h6 q-mb-md") |
|
|
bg.label(excerpt).classes("text-body2 text-grey-7 q-mb-md") |
|
|
|
|
|
with bg.row().classes("justify-between items-center"): |
|
|
bg.label(date).classes("text-caption text-grey-6") |
|
|
bg.button("Read More").classes("q-btn-sm q-btn-primary") |
|
|
|
|
|
# Home Page |
|
|
with bg.page("/", "HomePage", "Tech Blog"): |
|
|
create_header() |
|
|
|
|
|
# Featured post |
|
|
with bg.column().classes("bg-gradient-to-r from-purple-600 to-blue-600 text-white q-pa-xl text-center"): |
|
|
bg.label("Featured Article").classes("text-caption q-mb-md opacity-80") |
|
|
bg.label("The Future of Web Development").classes("text-h3 q-mb-md") |
|
|
bg.label("Exploring emerging technologies and trends shaping the web").classes("text-h6 q-mb-lg opacity-90") |
|
|
bg.button("Read Article").classes("q-btn q-btn-lg q-btn-white text-primary") |
|
|
|
|
|
# Recent posts |
|
|
with bg.column().classes("q-pa-xl"): |
|
|
bg.label("Recent Posts").classes("text-h4 q-mb-lg") |
|
|
|
|
|
with bg.row().classes("q-col-gutter-lg"): |
|
|
posts = [ |
|
|
("Getting Started with Vue.js 3", "Learn the basics of Vue.js 3 and its composition API...", "March 15, 2025", "Vue.js"), |
|
|
("Python Best Practices", "Write cleaner, more maintainable Python code...", "March 12, 2025", "Python"), |
|
|
("CSS Grid vs Flexbox", "When to use Grid and when to use Flexbox...", "March 10, 2025", "CSS"), |
|
|
("API Design Principles", "Building RESTful APIs that developers love...", "March 8, 2025", "Backend") |
|
|
] |
|
|
|
|
|
for title, excerpt, date, category in posts: |
|
|
with bg.column().classes("col-12 col-md-6 col-lg-3"): |
|
|
create_post_card(title, excerpt, date, category) |
|
|
|
|
|
# Single Post Page |
|
|
with bg.page("/post/:slug", "PostPage", "Blog Post"): |
|
|
create_header() |
|
|
|
|
|
with bg.column().classes("q-pa-xl max-width-md mx-auto"): |
|
|
# Post header |
|
|
bg.label("Vue.js").classes("text-caption text-primary text-weight-bold q-mb-sm") |
|
|
bg.label("Getting Started with Vue.js 3").classes("text-h3 q-mb-md") |
|
|
|
|
|
with bg.row().classes("text-grey-6 q-mb-xl"): |
|
|
bg.label("Published on March 15, 2025") |
|
|
bg.label(" • ") |
|
|
bg.label("5 min read") |
|
|
|
|
|
# Post content |
|
|
bg.label("Introduction").classes("text-h5 q-mb-md q-mt-lg") |
|
|
bg.label("Vue.js 3 brings many exciting features...").classes("text-body1 q-mb-lg") |
|
|
|
|
|
bg.label("Key Features").classes("text-h5 q-mb-md q-mt-lg") |
|
|
bg.label("The Composition API is one of the biggest additions...").classes("text-body1 q-mb-lg") |
|
|
|
|
|
# Related posts |
|
|
bg.label("Related Posts").classes("text-h5 q-mb-md q-mt-xl") |
|
|
with bg.row().classes("q-col-gutter-md"): |
|
|
for i in range(2): |
|
|
with bg.column().classes("col-12 col-md-6"): |
|
|
create_post_card("Related Post", "Short excerpt...", "March 10, 2025", "Vue.js") |
|
|
|
|
|
bg.build("blog-platform") |
|
|
|
|
|
Running the Examples |
|
|
-------------------- |
|
|
|
|
|
To generate and run any of these examples: |
|
|
|
|
|
1. **Save the code** to a Python file (e.g., ``dashboard.py``) |
|
|
|
|
|
2. **Generate the project**:: |
|
|
|
|
|
python dashboard.py |
|
|
|
|
|
3. **Run the project**:: |
|
|
|
|
|
cd dashboard-app # or whatever you named it |
|
|
npm install |
|
|
npm run dev |
|
|
|
|
|
4. **Open in browser**: Navigate to ``http://localhost:9000`` |
|
|
|
|
|
Customization Tips |
|
|
------------------ |
|
|
|
|
|
All examples can be customized by: |
|
|
|
|
|
1. **Modifying styles**: Update CSS classes and inline styles |
|
|
2. **Adding components**: Insert additional BadGUI components |
|
|
3. **Changing layouts**: Reorganize with different row/column structures |
|
|
4. **Updating content**: Replace placeholder text with real content |
|
|
5. **Adding pages**: Create additional routes for more functionality |
|
|
|
|
|
The generated Vue.js projects are fully editable, so you can continue development with standard Vue.js tools and practices. |
