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.
151 lines
7.3 KiB
151 lines
7.3 KiB
""" |
|
Flex Layout Test - Demonstrating Quasar Flex Utilities |
|
Tests different flex layouts to prevent card overflow issues. |
|
""" |
|
|
|
import badgui as bg |
|
|
|
# Test page demonstrating proper flex layouts |
|
with bg.column() as main: |
|
main.classes("q-pa-lg") |
|
|
|
bg.label("Flex Layout Tests").classes("text-h3 q-mb-lg text-center") |
|
|
|
# Test 1: Horizontal flex row with wrapping |
|
with bg.card() as test1_card: |
|
test1_card.classes("q-mb-lg") |
|
with bg.card_section(): |
|
bg.label("Test 1: Horizontal Row with Wrapping").classes("text-h5 q-mb-md text-primary") |
|
|
|
with bg.row() as test1_row: |
|
test1_row.classes("q-gutter-md wrap") |
|
with bg.card() as card1: |
|
card1.classes("col-12 col-sm-6 col-md-4 bg-blue-1") |
|
with bg.card_section(): |
|
bg.icon("speed", size="2rem", color="primary") |
|
bg.label("Card 1").classes("text-h6") |
|
bg.label("This card will wrap on small screens") |
|
|
|
with bg.card() as card2: |
|
card2.classes("col-12 col-sm-6 col-md-4 bg-green-1") |
|
with bg.card_section(): |
|
bg.icon("build", size="2rem", color="secondary") |
|
bg.label("Card 2").classes("text-h6") |
|
bg.label("Responsive wrapping prevents overflow") |
|
|
|
with bg.card() as card3: |
|
card3.classes("col-12 col-sm-6 col-md-4 bg-orange-1") |
|
with bg.card_section(): |
|
bg.icon("code", size="2rem", color="accent") |
|
bg.label("Card 3").classes("text-h6") |
|
bg.label("Uses Quasar's flex system") |
|
|
|
# Test 2: Vertical flex column |
|
with bg.card() as test2_card: |
|
test2_card.classes("q-mb-lg") |
|
with bg.card_section(): |
|
bg.label("Test 2: Vertical Column Layout").classes("text-h5 q-mb-md text-secondary") |
|
|
|
with bg.column() as test2_col: |
|
test2_col.classes("q-gutter-md") |
|
with bg.card() as purple_card: |
|
purple_card.classes("bg-purple-1") |
|
with bg.card_section(): |
|
with bg.row() as purple_row: |
|
purple_row.classes("items-center q-gutter-sm") |
|
bg.icon("layers", color="purple") |
|
bg.label("Stacked Card 1").classes("text-h6") |
|
|
|
with bg.card() as teal_card: |
|
teal_card.classes("bg-teal-1") |
|
with bg.card_section(): |
|
with bg.row() as teal_row: |
|
teal_row.classes("items-center q-gutter-sm") |
|
bg.icon("dashboard", color="teal") |
|
bg.label("Stacked Card 2").classes("text-h6") |
|
|
|
with bg.card() as pink_card: |
|
pink_card.classes("bg-pink-1") |
|
with bg.card_section(): |
|
with bg.row() as pink_row: |
|
pink_row.classes("items-center q-gutter-sm") |
|
bg.icon("widgets", color="pink") |
|
bg.label("Stacked Card 3").classes("text-h6") |
|
|
|
# Test 3: Mixed layout with proper responsive behavior |
|
with bg.card() as test3_card: |
|
test3_card.classes("q-mb-lg") |
|
with bg.card_section(): |
|
bg.label("Test 3: Mixed Responsive Layout").classes("text-h5 q-mb-md text-accent") |
|
|
|
with bg.row() as test3_row: |
|
test3_row.classes("q-gutter-md wrap") |
|
# Left column - takes full width on mobile, half on tablet+ |
|
with bg.column() as left_col: |
|
left_col.classes("col-12 col-md-6") |
|
with bg.card() as main_card: |
|
main_card.classes("bg-grey-2 full-height") |
|
with bg.card_section(): |
|
bg.label("Main Content").classes("text-h6 q-mb-md") |
|
bg.label("This column adapts to screen size") |
|
bg.label("Full width on mobile, half width on desktop") |
|
|
|
# Right column - also responsive |
|
with bg.column() as right_col: |
|
right_col.classes("col-12 col-md-6") |
|
with bg.column() as right_inner: |
|
right_inner.classes("q-gutter-md") |
|
with bg.card() as info_card: |
|
info_card.classes("bg-blue-2") |
|
with bg.card_section(): |
|
with bg.row() as info_row: |
|
info_row.classes("items-center q-gutter-sm") |
|
bg.icon("info", color="blue") |
|
bg.label("Info Card").classes("text-subtitle1") |
|
|
|
with bg.card() as success_card: |
|
success_card.classes("bg-green-2") |
|
with bg.card_section(): |
|
with bg.row() as success_row: |
|
success_row.classes("items-center q-gutter-sm") |
|
bg.icon("check_circle", color="green") |
|
bg.label("Success Card").classes("text-subtitle1") |
|
|
|
# Test 4: Gallery grid with proper wrapping |
|
with bg.card() as gallery_card: |
|
with bg.card_section(): |
|
bg.label("Test 4: Image Gallery Grid").classes("text-h5 q-mb-md text-deep-orange") |
|
|
|
with bg.row() as gallery_row: |
|
gallery_row.classes("q-gutter-sm wrap") |
|
# Create 6 image cards that will wrap nicely |
|
for i in range(1, 7): |
|
with bg.column() as img_col: |
|
img_col.classes("col-6 col-sm-4 col-md-2") |
|
bg.image(f"https://picsum.photos/150/150?random={i}").classes("rounded-lg full-width") |
|
bg.label(f"Image {i}").classes("text-center text-caption q-mt-xs") |
|
|
|
# Summary card |
|
with bg.card() as summary_card: |
|
summary_card.classes("q-mt-lg bg-indigo-1") |
|
with bg.card_section(): |
|
bg.label("Key Flex Classes Used:").classes("text-h6 q-mb-md text-indigo") |
|
with bg.column() as summary_col: |
|
summary_col.classes("q-gutter-sm") |
|
bg.label("• .wrap - Allows flex items to wrap to new lines") |
|
bg.label("• .col-12 .col-sm-6 .col-md-4 - Responsive column sizing") |
|
bg.label("• .q-gutter-md - Consistent spacing between items") |
|
bg.label("• .full-width - Ensures images don't overflow") |
|
bg.label("• .items-center .justify-center - Alignment utilities") |
|
|
|
if __name__ == "__main__": |
|
print("🎨 Flex Layout Test") |
|
print("This example demonstrates:") |
|
print(" • Proper flex wrapping to prevent overflow") |
|
print(" • Responsive column layouts") |
|
print(" • Vertical and horizontal flex containers") |
|
print(" • Mixed responsive layouts") |
|
print(" • Image gallery with proper grid wrapping") |
|
print() |
|
|
|
bg.dev(port=3007) |