|
|
import badgui as bg |
|
|
|
|
|
def create_card_examples(): |
|
|
"""Create comprehensive card examples similar to NiceGUI and Quasar.""" |
|
|
|
|
|
with bg.page("/", "CardExamples", "BadGUI Card Examples"): |
|
|
bg.label("🎴 BadGUI Card Component Examples").classes("text-h2 text-center q-mb-xl") |
|
|
|
|
|
# Basic Cards Section |
|
|
bg.label("Basic Cards").classes("text-h4 q-mb-lg") |
|
|
|
|
|
with bg.row(classes="q-gutter-lg q-mb-xl") as basic_cards: |
|
|
|
|
|
# Simple card |
|
|
with bg.card(classes="max-width-sm") as simple_card: |
|
|
bg.label("Simple Card").classes("text-h6 q-mb-md") |
|
|
bg.label("This is a basic card with just text content and automatic padding.").classes("text-body2") |
|
|
|
|
|
# Card with shadow removed |
|
|
with bg.card(classes="no-shadow border max-width-sm q-pa-md") as no_shadow: |
|
|
bg.label("No Shadow Card").classes("text-h6 q-mb-md") |
|
|
bg.label("This card has no shadow and uses a border instead.").classes("text-body2") |
|
|
|
|
|
# Flat and bordered card using props |
|
|
with bg.card(classes="max-width-sm q-pa-md").props("flat bordered") as flat_card: |
|
|
bg.label("Flat & Bordered").classes("text-h6 q-mb-md") |
|
|
bg.label("This card uses Quasar's flat and bordered props.").classes("text-body2") |
|
|
|
|
|
# Cards with Sections |
|
|
bg.label("Cards with Sections").classes("text-h4 q-mb-lg") |
|
|
|
|
|
with bg.row().classes("q-gutter-lg q-mb-xl") as section_cards: |
|
|
|
|
|
# Card with sections |
|
|
with bg.card().classes("max-width-md") as sectioned_card: |
|
|
with bg.card_section(): |
|
|
bg.label("Card Header").classes("text-h6") |
|
|
bg.label("This is the header section of the card").classes("text-body2 text-grey-7") |
|
|
|
|
|
with bg.card_section(): |
|
|
bg.label("Main Content").classes("text-subtitle1 q-mb-sm") |
|
|
bg.label("This is the main content section with more detailed information about the card content. It can contain multiple paragraphs and other components.").classes("text-body2") |
|
|
|
|
|
with bg.card_actions().classes("q-px-md q-pb-md"): |
|
|
bg.button("Action 1").classes("q-btn-primary") |
|
|
bg.button("Action 2").classes("q-btn-outline") |
|
|
|
|
|
# Profile card example |
|
|
with bg.card().classes("max-width-sm") as profile_card: |
|
|
with bg.card_section().classes("text-center"): |
|
|
bg.label("👤").classes("text-6xl q-mb-md") |
|
|
bg.label("John Doe").classes("text-h6") |
|
|
bg.label("Software Developer").classes("text-body2 text-grey-6") |
|
|
|
|
|
with bg.card_section(): |
|
|
bg.label("Skills").classes("text-subtitle2 q-mb-sm") |
|
|
with bg.row().classes("q-gutter-xs"): |
|
|
bg.label("Python").classes("bg-blue-100 text-blue-8 px-2 py-1 rounded") |
|
|
bg.label("Vue.js").classes("bg-green-100 text-green-8 px-2 py-1 rounded") |
|
|
bg.label("Quasar").classes("bg-purple-100 text-purple-8 px-2 py-1 rounded") |
|
|
|
|
|
with bg.card_actions().classes("justify-end"): |
|
|
bg.button("Contact").classes("q-btn-primary") |
|
|
bg.button("View Profile").classes("q-btn-outline") |
|
|
|
|
|
# Interactive Cards |
|
|
bg.label("Interactive Cards").classes("text-h4 q-mb-lg") |
|
|
|
|
|
with bg.row().classes("q-gutter-lg q-mb-xl") as interactive_cards: |
|
|
|
|
|
# Form card |
|
|
with bg.card().classes("max-width-md") as form_card: |
|
|
with bg.card_section(): |
|
|
bg.label("Contact Form").classes("text-h6 q-mb-md") |
|
|
|
|
|
with bg.column().classes("q-gutter-md"): |
|
|
bg.input(placeholder="Your Name").props("filled outlined") |
|
|
bg.input(placeholder="Email Address").props("filled outlined type=email") |
|
|
bg.input(placeholder="Subject").props("filled outlined") |
|
|
bg.input(placeholder="Your message...").props("filled outlined type=textarea rows=3") |
|
|
|
|
|
with bg.card_actions().classes("q-px-md q-pb-md"): |
|
|
bg.button("Send Message").classes("q-btn-primary") |
|
|
bg.button("Clear").classes("q-btn-outline") |
|
|
|
|
|
# Stats card |
|
|
with bg.card().classes("max-width-sm bg-gradient-to-br from-blue-500 to-blue-700 text-white") as stats_card: |
|
|
with bg.card_section().classes("text-center"): |
|
|
bg.label("📊").classes("text-4xl q-mb-md") |
|
|
bg.label("Monthly Sales").classes("text-h6 q-mb-sm") |
|
|
bg.label("$45,678").classes("text-h3 q-mb-sm") |
|
|
bg.label("+12.5% vs last month").classes("text-body2 opacity-80") |
|
|
|
|
|
with bg.card_actions().classes("justify-center"): |
|
|
bg.button("View Details").classes("q-btn-outline text-white") |
|
|
|
|
|
# Product Cards |
|
|
bg.label("Product Cards").classes("text-h4 q-mb-lg") |
|
|
|
|
|
with bg.row().classes("q-gutter-lg q-mb-xl") as product_cards: |
|
|
|
|
|
# Product card 1 |
|
|
with bg.card().classes("max-width-xs") as product1: |
|
|
with bg.card_section().classes("text-center"): |
|
|
bg.label("📱").classes("text-6xl q-mb-md") |
|
|
bg.label("Smartphone").classes("text-h6") |
|
|
bg.label("Latest model with amazing features").classes("text-body2 text-grey-7 q-mb-md") |
|
|
bg.label("$699").classes("text-h5 text-green-6") |
|
|
|
|
|
with bg.card_actions(): |
|
|
bg.button("Add to Cart").classes("q-btn-primary full-width") |
|
|
|
|
|
# Product card 2 |
|
|
with bg.card().classes("max-width-xs") as product2: |
|
|
with bg.card_section().classes("text-center"): |
|
|
bg.label("💻").classes("text-6xl q-mb-md") |
|
|
bg.label("Laptop").classes("text-h6") |
|
|
bg.label("High-performance laptop for professionals").classes("text-body2 text-grey-7 q-mb-md") |
|
|
bg.label("$1,299").classes("text-h5 text-green-6") |
|
|
|
|
|
with bg.card_actions(): |
|
|
bg.button("Add to Cart").classes("q-btn-primary full-width") |
|
|
|
|
|
# Product card 3 |
|
|
with bg.card().classes("max-width-xs") as product3: |
|
|
with bg.card_section().classes("text-center"): |
|
|
bg.label("🎧").classes("text-6xl q-mb-md") |
|
|
bg.label("Headphones").classes("text-h6") |
|
|
bg.label("Premium wireless headphones").classes("text-body2 text-grey-7 q-mb-md") |
|
|
bg.label("$199").classes("text-h5 text-green-6") |
|
|
|
|
|
with bg.card_actions(): |
|
|
bg.button("Add to Cart").classes("q-btn-primary full-width") |
|
|
|
|
|
# Advanced Cards |
|
|
bg.label("Advanced Card Examples").classes("text-h4 q-mb-lg") |
|
|
|
|
|
with bg.row().classes("q-gutter-lg q-mb-xl") as advanced_cards: |
|
|
|
|
|
# Dashboard card |
|
|
with bg.card().classes("max-width-lg") as dashboard_card: |
|
|
with bg.card_section(): |
|
|
bg.label("📈 Analytics Dashboard").classes("text-h6 q-mb-md") |
|
|
|
|
|
with bg.row().classes("q-gutter-md"): |
|
|
with bg.column().classes("col"): |
|
|
bg.label("Page Views").classes("text-body2 text-grey-7") |
|
|
bg.label("124,567").classes("text-h5 text-blue-6") |
|
|
|
|
|
with bg.column().classes("col"): |
|
|
bg.label("Unique Visitors").classes("text-body2 text-grey-7") |
|
|
bg.label("23,456").classes("text-h5 text-green-6") |
|
|
|
|
|
with bg.column().classes("col"): |
|
|
bg.label("Conversion Rate").classes("text-body2 text-grey-7") |
|
|
bg.label("3.4%").classes("text-h5 text-orange-6") |
|
|
|
|
|
with bg.card_actions().classes("justify-between"): |
|
|
bg.label("Last updated: 5 minutes ago").classes("text-body2 text-grey-6") |
|
|
bg.button("Refresh").classes("q-btn-outline") |
|
|
|
|
|
# Notification card |
|
|
with bg.card().classes("max-width-sm border-l-4 border-blue-500") as notification_card: |
|
|
with bg.card_section(): |
|
|
with bg.row().classes("items-center q-gutter-md"): |
|
|
bg.label("ℹ️").classes("text-2xl text-blue-500") |
|
|
with bg.column(): |
|
|
bg.label("New Update Available").classes("text-h6") |
|
|
bg.label("Version 2.1.0 is now available with new features and bug fixes.").classes("text-body2 text-grey-7") |
|
|
|
|
|
with bg.card_actions(): |
|
|
bg.button("Update Now").classes("q-btn-primary") |
|
|
bg.button("Later").classes("q-btn-outline") |
|
|
|
|
|
if __name__ == "__main__": |
|
|
create_card_examples() |
|
|
|
|
|
# 🚀 INSTANT DEVELOPMENT - One command does it all! |
|
|
bg.dev(port=3000, project_name="card-examples") |
