42 lines
1.2 KiB
Python
42 lines
1.2 KiB
Python
"""
|
|
Toggle component - Demonstrates conditional rendering with if statements.
|
|
|
|
This component uses a signal with comparison to conditionally render content.
|
|
"""
|
|
|
|
from ritz.syntax import *
|
|
|
|
|
|
@component
|
|
def Toggle():
|
|
"""Counter that shows different content based on threshold."""
|
|
count = signal(0)
|
|
|
|
def increment():
|
|
count += 1
|
|
|
|
with Div(class_="toggle-app"):
|
|
with H1():
|
|
yield "Conditional Rendering Demo"
|
|
|
|
with P(class_="info"):
|
|
yield "This demonstrates if/else rendering in WASM"
|
|
|
|
with Div(class_="controls"):
|
|
with Button(onclick=increment):
|
|
yield "Increment Counter"
|
|
|
|
with Div(class_="display"):
|
|
if count > 5:
|
|
with Div(class_="high"):
|
|
with P():
|
|
yield "✨ Count is HIGH (> 5)"
|
|
with P(class_="count"):
|
|
yield f"Current count: {count}"
|
|
else:
|
|
with Div(class_="low"):
|
|
with P():
|
|
yield "📉 Count is low (<= 5)"
|
|
with P(class_="count"):
|
|
yield f"Current count: {count}"
|