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.
146 lines
6.0 KiB
146 lines
6.0 KiB
""" |
|
Simplified Navigation Example with Header & Footer |
|
Working example that demonstrates the header and footer functionality. |
|
""" |
|
|
|
import badgui as bg |
|
|
|
# Home page |
|
with bg.page("/", "HomePage", "Home - My Website"): |
|
|
|
# Header with navigation bar |
|
with bg.header(elevated=True) as header: |
|
header.classes("bg-primary text-white q-pa-md") |
|
|
|
with bg.row() as nav_row: |
|
nav_row.classes("items-center justify-between w-full") |
|
|
|
# Logo/Brand |
|
bg.label("My Website").classes("text-h4 font-bold") |
|
|
|
# Navigation menu |
|
with bg.row() as nav_menu: |
|
nav_menu.classes("q-gutter-md") |
|
bg.link("Home", "/").classes("text-white") |
|
bg.link("About", "/about").classes("text-white") |
|
bg.link("Services", "/services").classes("text-white") |
|
bg.link("Contact", "/contact").classes("text-white") |
|
|
|
# Main content area |
|
with bg.column() as main_content: |
|
main_content.classes("q-pa-lg") |
|
|
|
# Hero section |
|
with bg.card() as hero_card: |
|
hero_card.classes("bg-blue-500 text-white q-mb-lg") |
|
with bg.card_section(): |
|
bg.label("Welcome to My Website").classes("text-h3 text-center q-mb-md") |
|
bg.label("Building beautiful web applications with BadGUI").classes("text-h6 text-center") |
|
|
|
# Features section |
|
with bg.row() as features_row: |
|
features_row.classes("q-gutter-lg") |
|
|
|
with bg.card() as feature1: |
|
feature1.classes("col-4") |
|
with bg.card_section(): |
|
bg.label("Features").classes("text-h5 q-mb-md text-primary") |
|
bg.label("• Fast Python development") |
|
bg.label("• Vue.js/Quasar output") |
|
bg.label("• NiceGUI-like syntax") |
|
|
|
with bg.card() as feature2: |
|
feature2.classes("col-4") |
|
with bg.card_section(): |
|
bg.label("Services").classes("text-h5 q-mb-md text-primary") |
|
bg.label("• Web Development") |
|
bg.label("• UI/UX Design") |
|
bg.label("• Consulting") |
|
|
|
with bg.card() as feature3: |
|
feature3.classes("col-4") |
|
with bg.card_section(): |
|
bg.label("Technologies").classes("text-h5 q-mb-md text-primary") |
|
bg.label("• Python Backend") |
|
bg.label("• Vue.js Frontend") |
|
bg.label("• Quasar Framework") |
|
|
|
# # Footer |
|
# with bg.footer() as footer: |
|
# footer.classes("bg-dark text-white q-pa-md") |
|
|
|
# with bg.column(): |
|
# with bg.row() as footer_content: |
|
# footer_content.classes("justify-between items-start") |
|
|
|
# # Company info |
|
# with bg.column() as company_info: |
|
# company_info.classes("col-4") |
|
# bg.label("My Website").classes("text-h6 q-mb-sm") |
|
# bg.label("Building the future of web development.") |
|
|
|
# # Quick links |
|
# with bg.column() as quick_links: |
|
# quick_links.classes("col-4") |
|
# bg.label("Quick Links").classes("text-h6 q-mb-sm") |
|
# bg.link("Home", "/").classes("text-white") |
|
# bg.link("About", "/about").classes("text-white") |
|
# bg.link("Services", "/services").classes("text-white") |
|
# bg.link("Contact", "/contact").classes("text-white") |
|
|
|
# # Contact info |
|
# with bg.column() as contact_info: |
|
# contact_info.classes("col-4") |
|
# bg.label("Contact").classes("text-h6 q-mb-sm") |
|
# bg.label("📧 contact@mywebsite.com") |
|
# bg.label("📞 +1 (555) 123-4567") |
|
|
|
# # Copyright |
|
# with bg.row() as copyright_row: |
|
# copyright_row.classes("justify-center q-mt-lg") |
|
# bg.label("© 2024 My Website. Built with BadGUI.").classes("text-center") |
|
|
|
# About page |
|
with bg.page("/about", "AboutPage", "About - My Website"): |
|
|
|
# Header |
|
with bg.header(elevated=True) as header: |
|
header.classes("bg-primary text-white q-pa-md") |
|
with bg.row() as nav_row: |
|
nav_row.classes("items-center justify-between w-full") |
|
bg.label("My Website").classes("text-h4 font-bold") |
|
with bg.row() as nav_menu: |
|
nav_menu.classes("q-gutter-md") |
|
bg.link("Home", "/").classes("text-white") |
|
bg.link("About", "/about").classes("text-white font-bold") |
|
bg.link("Services", "/services").classes("text-white") |
|
bg.link("Contact", "/contact").classes("text-white") |
|
|
|
# Main content |
|
with bg.column() as main_content: |
|
main_content.classes("q-pa-lg") |
|
bg.label("About Us").classes("text-h3 q-mb-lg text-center") |
|
|
|
with bg.card(): |
|
with bg.card_section(): |
|
bg.label("Our Story").classes("text-h5 q-mb-md text-primary") |
|
bg.label("We create amazing web applications using BadGUI framework.") |
|
|
|
# Footer |
|
with bg.footer() as footer: |
|
footer.classes("bg-dark text-white q-pa-md") |
|
with bg.row() as footer_content: |
|
footer_content.classes("justify-center") |
|
bg.label("© 2024 My Website. Built with BadGUI.") |
|
|
|
if __name__ == "__main__": |
|
print("🌟 BadGUI Navigation Example with Header & Footer") |
|
print("Features:") |
|
print(" • Header component with navigation") |
|
print(" • Footer component with structured content") |
|
print(" • Multi-page website structure") |
|
print(" • Quasar layout components") |
|
print() |
|
|
|
# Start the development server |
|
bg.dev(port=3005) |