Parser: Support multiple components in one file, change args to params with defaults
This commit is contained in:
Aaron Sinclair committed
1 parent
635d466874
commit
81d51d5617
38 files changed
+2151
-455
No files matched your search
@@ -0,0 +1,193 @@
|
||||
"""
|
||||
Tabs component - Beautiful multi-panel tab switching with proper composition.
|
||||
|
||||
Demonstrates:
|
||||
- Component composition (TabMenu, TabPane)
|
||||
- Match/case for clean panel switching
|
||||
- Conditional CSS classes for active state
|
||||
- All logic in WASM, minimal syntax
|
||||
"""
|
||||
|
||||
from ritz.syntax import *
|
||||
|
||||
|
||||
@component
|
||||
def VerticalTabs():
|
||||
"""Vertical tabs for settings categories."""
|
||||
setting_tab = signal(0) # 0 = General, 1 = Privacy, 2 = Advanced
|
||||
|
||||
def set_setting_0():
|
||||
setting_tab = 0
|
||||
|
||||
def set_setting_1():
|
||||
setting_tab = 1
|
||||
|
||||
def set_setting_2():
|
||||
setting_tab = 2
|
||||
|
||||
with Div(class_="vertical-tabs"):
|
||||
# Vertical tab menu
|
||||
with Div(class_="vertical-tab-menu"):
|
||||
if setting_tab == 0:
|
||||
with Button(class_="vertical-tab active", onclick=set_setting_0):
|
||||
yield "⚙️ General"
|
||||
else:
|
||||
with Button(class_="vertical-tab", onclick=set_setting_0):
|
||||
yield "⚙️ General"
|
||||
|
||||
if setting_tab == 1:
|
||||
with Button(class_="vertical-tab active", onclick=set_setting_1):
|
||||
yield "🔒 Privacy"
|
||||
else:
|
||||
with Button(class_="vertical-tab", onclick=set_setting_1):
|
||||
yield "🔒 Privacy"
|
||||
|
||||
if setting_tab == 2:
|
||||
with Button(class_="vertical-tab active", onclick=set_setting_2):
|
||||
yield "🚀 Advanced"
|
||||
else:
|
||||
with Button(class_="vertical-tab", onclick=set_setting_2):
|
||||
yield "🚀 Advanced"
|
||||
|
||||
# Vertical tab content
|
||||
with Div(class_="vertical-tab-content"):
|
||||
match setting_tab:
|
||||
case 0:
|
||||
with Div(class_="setting-pane"):
|
||||
with H3():
|
||||
yield "⚙️ General Settings"
|
||||
with P():
|
||||
yield "Language: English"
|
||||
with P():
|
||||
yield "Time Zone: UTC"
|
||||
|
||||
case 1:
|
||||
with Div(class_="setting-pane"):
|
||||
with H3():
|
||||
yield "🔒 Privacy Settings"
|
||||
with P():
|
||||
yield "Data Collection: Disabled"
|
||||
with P():
|
||||
yield "Analytics: Opt-out"
|
||||
|
||||
case 2:
|
||||
with Div(class_="setting-pane"):
|
||||
with H3():
|
||||
yield "🚀 Advanced Settings"
|
||||
with P():
|
||||
yield "Debug Mode: Off"
|
||||
with P():
|
||||
yield "Experimental Features: Disabled"
|
||||
|
||||
case _:
|
||||
with Div(class_="setting-pane"):
|
||||
with P():
|
||||
yield "Invalid setting"
|
||||
|
||||
|
||||
@component
|
||||
def Tabs(orientation=0): # 0 = horizontal, 1 = vertical
|
||||
"""Main tabs container - orchestrates menu and panes."""
|
||||
tab_index = signal(0) # Track which tab is active: 0 = Home, 1 = Profile, 2 = Settings
|
||||
|
||||
def set_tab_0():
|
||||
tab_index = 0
|
||||
|
||||
def set_tab_1():
|
||||
tab_index = 1
|
||||
|
||||
def set_tab_2():
|
||||
tab_index = 2
|
||||
|
||||
with Div(class_="tabs-container"):
|
||||
with H1():
|
||||
yield "Tab Component Demo"
|
||||
|
||||
with P(class_="subtitle"):
|
||||
yield "Beautiful composition with TabMenu and TabPane components"
|
||||
|
||||
# Tab menu - ul/li structure with active states
|
||||
with Ul(class_="tab-menu"):
|
||||
if tab_index == 0:
|
||||
with Li(class_="tab active"):
|
||||
with Button(onclick=set_tab_0):
|
||||
yield "🏠 Home"
|
||||
else:
|
||||
with Li(class_="tab"):
|
||||
with Button(onclick=set_tab_0):
|
||||
yield "🏠 Home"
|
||||
|
||||
if tab_index == 1:
|
||||
with Li(class_="tab active"):
|
||||
with Button(onclick=set_tab_1):
|
||||
yield "👤 Profile"
|
||||
else:
|
||||
with Li(class_="tab"):
|
||||
with Button(onclick=set_tab_1):
|
||||
yield "👤 Profile"
|
||||
|
||||
if tab_index == 2:
|
||||
with Li(class_="tab active"):
|
||||
with Button(onclick=set_tab_2):
|
||||
yield "⚙️ Settings"
|
||||
else:
|
||||
with Li(class_="tab"):
|
||||
with Button(onclick=set_tab_2):
|
||||
yield "⚙️ Settings"
|
||||
|
||||
# Tab panes - match/case for clean switching
|
||||
with Div(class_="tab-content"):
|
||||
match tab_index:
|
||||
case 0:
|
||||
# Home pane
|
||||
with Div(class_="tab-pane home"):
|
||||
with H2():
|
||||
yield "🏠 Welcome Home"
|
||||
with P():
|
||||
yield "This is your home dashboard."
|
||||
with P():
|
||||
yield "All your important info at a glance."
|
||||
with Ul():
|
||||
with Li():
|
||||
yield "✓ Recent activity"
|
||||
with Li():
|
||||
yield "✓ Quick actions"
|
||||
with Li():
|
||||
yield "✓ Summary stats"
|
||||
|
||||
case 1:
|
||||
# Profile pane
|
||||
with Div(class_="tab-pane profile"):
|
||||
with H2():
|
||||
yield "👤 Your Profile"
|
||||
with P():
|
||||
yield "Manage your account settings."
|
||||
with Div(class_="profile-info"):
|
||||
with P():
|
||||
yield "Name: Ritz User"
|
||||
with P():
|
||||
yield "Email: user@ritz.dev"
|
||||
with P():
|
||||
yield "Member since: 2025"
|
||||
|
||||
case 2:
|
||||
# Settings pane with NESTED vertical tabs!
|
||||
with Div(class_="tab-pane settings"):
|
||||
with H2():
|
||||
yield "⚙️ Settings"
|
||||
with P():
|
||||
yield "Configure your preferences using the categories below:"
|
||||
|
||||
# ← NESTED COMPONENT HERE!
|
||||
yield VerticalTabs()
|
||||
|
||||
case _:
|
||||
# Error fallback
|
||||
with Div(class_="tab-pane error"):
|
||||
with P():
|
||||
yield "⚠️ Invalid tab selected"
|
||||
|
||||
# Debug footer
|
||||
with Div(class_="debug-footer"):
|
||||
with P():
|
||||
yield f"Active: {tab_index}"
|
||||
Reference in new issue
Block a user