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.
114 lines
5.1 KiB
114 lines
5.1 KiB
#!/usr/bin/env python3 |
|
""" |
|
BadGUI styling example demonstrating .classes(), .props(), and .style() methods. |
|
""" |
|
|
|
import badgui as bg |
|
|
|
def main(): |
|
# ===== STYLING EXAMPLES PAGE ===== |
|
with bg.page("/", "StylingPage", "Styling Examples"): |
|
bg.label("BadGUI Styling Examples", classes=["text-h3", "text-primary", "q-mb-lg"]) |
|
|
|
# ===== CLASSES EXAMPLES ===== |
|
bg.label("1. Classes Method Examples", classes=["text-h5", "text-secondary", "q-mb-md"]) |
|
|
|
# Basic classes |
|
label1 = bg.label("Basic classes").classes("text-bold text-blue-600 bg-blue-100 p-4 rounded") |
|
|
|
# Method chaining with classes |
|
label2 = bg.label("Chained classes").classes("text-center").classes("text-green-600").classes("bg-green-100 p-2") |
|
|
|
# Classes with add/remove/replace |
|
label3 = bg.label("Dynamic classes") |
|
label3.classes("text-red-600 bg-red-100 p-3") |
|
label3.classes(add="border border-red-300") |
|
label3.classes(remove="bg-red-100", add="bg-red-50") |
|
|
|
# Button with classes |
|
btn1 = bg.button("Styled Button") |
|
btn1.classes("bg-purple-500 text-white rounded-full px-6 py-2 shadow-lg hover:bg-purple-600") |
|
|
|
# ===== PROPS EXAMPLES ===== |
|
bg.label("2. Props Method Examples", classes=["text-h5", "text-secondary", "q-mb-md", "q-mt-lg"]) |
|
|
|
# Button with Quasar props |
|
btn2 = bg.button("Quasar Props Button") |
|
btn2.props("outline rounded color=primary") |
|
btn2.classes("q-mr-md") |
|
|
|
# Input with props |
|
input1 = bg.input(placeholder="Styled Input") |
|
input1.props('filled dense color=teal label="Enter text"') |
|
input1.classes("q-mb-md") |
|
|
|
# Button with multiple props |
|
btn3 = bg.button("Advanced Props") |
|
btn3.props("push glossy") |
|
btn3.props(add='icon=star color=orange') |
|
btn3.classes("q-mr-md") |
|
|
|
# ===== STYLE EXAMPLES ===== |
|
bg.label("3. Style Method Examples", classes=["text-h5", "text-secondary", "q-mb-md", "q-mt-lg"]) |
|
|
|
# Basic CSS styles |
|
label4 = bg.label("CSS Styled Label") |
|
label4.style("color: #ff6b6b; font-size: 18px; font-weight: bold; padding: 10px; background: linear-gradient(45deg, #ffd93d, #ff6b6b); border-radius: 8px") |
|
|
|
# Style with method chaining |
|
label5 = bg.label("Chained Styles") |
|
label5.style("color: #4ecdc4").style("background-color: #f7f7f7; padding: 8px").style("border-left: 4px solid #4ecdc4") |
|
|
|
# Dynamic styles |
|
label6 = bg.label("Dynamic Styles") |
|
label6.style("color: red; background: yellow; padding: 5px") |
|
label6.style(remove="background", add="background: lightblue; border: 2px solid navy") |
|
|
|
# ===== COMBINED STYLING ===== |
|
bg.label("4. Combined Styling Examples", classes=["text-h5", "text-secondary", "q-mb-md", "q-mt-lg"]) |
|
|
|
# Combine all three methods |
|
combined_label = bg.label("All Methods Combined") |
|
combined_label.classes("text-center rounded shadow-md").props("data-test=combined").style("background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; font-size: 16px") |
|
|
|
# Complex button styling |
|
fancy_button = bg.button("Fancy Button") |
|
fancy_button.classes("shadow-2xl transform transition-all duration-200").props("push glossy color=deep-purple").style("border-radius: 25px; padding: 12px 24px; text-transform: uppercase; letter-spacing: 1px") |
|
|
|
# ===== LAYOUTS WITH STYLING ===== |
|
bg.label("5. Layout Styling", classes=["text-h5", "text-secondary", "q-mb-md", "q-mt-lg"]) |
|
|
|
# Styled row |
|
with bg.row() as row_container: |
|
row_container.classes("bg-grey-1 p-4 rounded-lg shadow").style("border-left: 5px solid #1976d2") |
|
bg.label("Styled Row Item 1").classes("text-primary") |
|
bg.label("Styled Row Item 2").classes("text-secondary") |
|
bg.label("Styled Row Item 3").classes("text-accent") |
|
|
|
# Styled column |
|
with bg.column() as col_container: |
|
col_container.classes("bg-gradient-to-r from-blue-50 to-indigo-100 p-6 rounded-xl").style("min-height: 100px") |
|
bg.label("Column Header").classes("text-lg font-bold text-indigo-800") |
|
bg.label("Column content with styling").classes("text-indigo-600") |
|
bg.button("Column Button").classes("bg-indigo-500 text-white mt-2").props("outline") |
|
|
|
# ===== RESPONSIVE AND UTILITY CLASSES ===== |
|
bg.label("6. Responsive & Utility Classes", classes=["text-h5", "text-secondary", "q-mb-md", "q-mt-lg"]) |
|
|
|
# Responsive grid-like layout |
|
with bg.row() as responsive_row: |
|
responsive_row.classes("flex-wrap q-gutter-md") |
|
for i in range(6): |
|
card_label = bg.label(f"Card {i+1}") |
|
card_label.classes("bg-white p-4 rounded shadow flex-grow").style(f"min-width: 150px; background: hsl({i*60}, 70%, 90%)") |
|
|
|
# Utility classes example |
|
utility_label = bg.label("Utility Classes") |
|
utility_label.classes("text-xl font-bold text-center uppercase tracking-wide text-gray-700 bg-gray-100 p-6 rounded-lg border-2 border-dashed border-gray-300") |
|
|
|
# Build the Vue.js project |
|
print("🚀 Building BadGUI Styling Examples project...") |
|
bg.build(output_dir="./styling-output", project_name="badgui-styling") |
|
|
|
if __name__ == "__main__": |
|
main() |