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.
191 lines
7.8 KiB
191 lines
7.8 KiB
""" |
|
Extended Generic Component Test |
|
Testing more advanced Quasar components with the bg.component() method. |
|
""" |
|
|
|
import badgui as bg |
|
|
|
with bg.page("/", "ExtendedTest", "Extended Generic Component Test"): |
|
with bg.column() as main_col: |
|
main_col.classes("q-pa-lg q-gutter-lg") |
|
bg.label("Extended Quasar Component Test").classes("text-h3 q-mb-lg") |
|
|
|
# Date and Time components |
|
with bg.card(): |
|
bg.label("Date & Time Components").classes("text-h5 q-mb-md") |
|
|
|
bg.label("Date Picker:").classes("q-mb-sm") |
|
date_picker = bg.component('q-date', minimal=True) |
|
date_picker.bind_value('selectedDate') |
|
date_picker.classes("q-mb-md") |
|
|
|
bg.label("Time Picker:").classes("q-mb-sm") |
|
time_picker = bg.component('q-time', format24h=True) |
|
time_picker.bind_value('selectedTime') |
|
time_picker.classes("q-mb-md") |
|
|
|
# Advanced Input Components |
|
with bg.card(): |
|
bg.label("Advanced Inputs").classes("text-h5 q-mb-md") |
|
|
|
# Option Group (Radio buttons) |
|
bg.label("Select Option:").classes("q-mb-sm") |
|
option_group = bg.component('q-option-group', |
|
options=[ |
|
{'label': 'Option 1', 'value': 'opt1'}, |
|
{'label': 'Option 2', 'value': 'opt2'}, |
|
{'label': 'Option 3', 'value': 'opt3'} |
|
], |
|
type='radio', |
|
inline=True) |
|
option_group.bind_value('selectedOption') |
|
option_group.classes("q-mb-md") |
|
|
|
# File input |
|
bg.label("File Upload:").classes("q-mb-sm") |
|
file_input = bg.component('q-file', |
|
label='Choose file', |
|
filled=True, |
|
accept='.jpg,.png,.pdf') |
|
file_input.bind_value('uploadedFile') |
|
file_input.classes("q-mb-md") |
|
|
|
# Color picker |
|
bg.label("Color Picker:").classes("q-mb-sm") |
|
color_picker = bg.component('q-color') |
|
color_picker.bind_value('selectedColor') |
|
color_picker.classes("q-mb-md") |
|
|
|
# Layout Components |
|
with bg.card(): |
|
bg.label("Layout Components").classes("text-h5 q-mb-md") |
|
|
|
# Tabs |
|
with bg.component('q-tabs', |
|
v_model='activeTab', |
|
dense=True, |
|
class_='text-grey', |
|
active_color='primary', |
|
indicator_color='primary', |
|
align='justify', |
|
narrow_indicator=True, |
|
container=True) as tabs: |
|
|
|
bg.component('q-tab', name='tab1', label='Tab 1') |
|
bg.component('q-tab', name='tab2', label='Tab 2') |
|
bg.component('q-tab', name='tab3', label='Tab 3') |
|
|
|
# Tab panels |
|
with bg.component('q-tab-panels', |
|
v_model='activeTab', |
|
animated=True, |
|
container=True): |
|
|
|
with bg.component('q-tab-panel', name='tab1', container=True): |
|
bg.label("Content for Tab 1").classes("text-h6") |
|
bg.component('q-separator').classes("q-my-md") |
|
bg.label("This is the first tab content") |
|
|
|
with bg.component('q-tab-panel', name='tab2', container=True): |
|
bg.label("Content for Tab 2").classes("text-h6") |
|
bg.component('q-separator').classes("q-my-md") |
|
bg.label("This is the second tab content") |
|
|
|
with bg.component('q-tab-panel', name='tab3', container=True): |
|
bg.label("Content for Tab 3").classes("text-h6") |
|
bg.component('q-separator').classes("q-my-md") |
|
bg.label("This is the third tab content") |
|
|
|
# Display Components |
|
with bg.card(): |
|
bg.label("Display Components").classes("text-h5 q-mb-md") |
|
|
|
# Circular progress |
|
bg.label("Circular Progress:").classes("q-mb-sm") |
|
with bg.row() as progress_row: |
|
progress_row.classes("q-gutter-md q-mb-md") |
|
bg.component('q-circular-progress', |
|
value=0.25, |
|
size='50px', |
|
color='red') |
|
bg.component('q-circular-progress', |
|
value=0.5, |
|
size='50px', |
|
color='orange') |
|
bg.component('q-circular-progress', |
|
value=0.75, |
|
size='50px', |
|
color='green') |
|
|
|
# Chip components |
|
bg.label("Chips:").classes("q-mb-sm") |
|
with bg.row() as chip_row: |
|
chip_row.classes("q-gutter-sm q-mb-md") |
|
bg.component('q-chip', label='Tag 1', removable=True, color='primary') |
|
bg.component('q-chip', label='Tag 2', removable=True, color='secondary') |
|
bg.component('q-chip', label='Tag 3', removable=True, color='accent') |
|
|
|
# Avatar |
|
bg.label("Avatar:").classes("q-mb-sm") |
|
bg.component('q-avatar', size='64px', color='teal', text_color='white', icon='person') |
|
|
|
# Results display |
|
with bg.card(): |
|
bg.label("Current Values").classes("text-h5 q-mb-md") |
|
results = bg.label("Click 'Update Display' to see values") |
|
results.bind_text('displayResults') |
|
results.classes("text-body1 q-mb-md") |
|
|
|
bg.button("Update Display").on_click('updateDisplay').classes("q-btn-primary") |
|
|
|
# JavaScript for the extended components |
|
bg.script(""" |
|
// Reactive data |
|
const selectedDate = ref(null); |
|
const selectedTime = ref(null); |
|
const selectedOption = ref('opt1'); |
|
const uploadedFile = ref(null); |
|
const selectedColor = ref('#1976D2'); |
|
const activeTab = ref('tab1'); |
|
const displayResults = ref('Click "Update Display" to see values'); |
|
|
|
// Update function |
|
const updateDisplay = () => { |
|
const results = [ |
|
`Date: ${selectedDate.value || 'Not selected'}`, |
|
`Time: ${selectedTime.value || 'Not selected'}`, |
|
`Option: ${selectedOption.value}`, |
|
`File: ${uploadedFile.value ? uploadedFile.value.name : 'None'}`, |
|
`Color: ${selectedColor.value}`, |
|
`Active Tab: ${activeTab.value}` |
|
]; |
|
displayResults.value = results.join(' • '); |
|
}; |
|
|
|
// Watch for changes |
|
watch([selectedDate, selectedTime, selectedOption, uploadedFile, selectedColor, activeTab], |
|
updateDisplay, { deep: true }); |
|
|
|
onMounted(() => { |
|
console.log('Extended component test loaded!'); |
|
console.log('Testing advanced Quasar components:'); |
|
console.log('- q-date, q-time'); |
|
console.log('- q-option-group, q-file, q-color'); |
|
console.log('- q-tabs, q-tab-panels'); |
|
console.log('- q-circular-progress, q-chip, q-avatar'); |
|
updateDisplay(); |
|
}); |
|
""") |
|
|
|
if __name__ == "__main__": |
|
print("🧪 Extended Generic Component Test") |
|
print("Testing advanced Quasar components with bg.component()") |
|
print() |
|
print("Components being tested:") |
|
print("📅 Date & Time: q-date, q-time") |
|
print("📝 Advanced Inputs: q-option-group, q-file, q-color") |
|
print("📑 Layout: q-tabs, q-tab-panels") |
|
print("📊 Display: q-circular-progress, q-chip, q-avatar") |
|
|
|
# Run dev server |
|
bg.dev(port=3032) |