counter.py 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. """Welcome to Reflex! This file creates a counter app."""
  2. import random
  3. import reflex as rx
  4. class State(rx.State):
  5. """The app state."""
  6. count = 0
  7. def increment(self):
  8. """Increment the count."""
  9. self.count += 1
  10. def decrement(self):
  11. """Decrement the count."""
  12. self.count -= 1
  13. def random(self):
  14. """Randomize the count."""
  15. self.count = random.randint(0, 100)
  16. def index() -> rx.Component:
  17. return rx.center(
  18. rx.vstack(
  19. rx.heading(State.count),
  20. rx.hstack(
  21. rx.button("Decrement", on_click=State.decrement, color_scheme="red"),
  22. rx.button(
  23. "Randomize",
  24. on_click=State.random,
  25. background_image="linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(0,176,34,1) 100%)",
  26. color="white",
  27. ),
  28. rx.button("Increment", on_click=State.increment, color_scheme="green"),
  29. ),
  30. padding="1em",
  31. bg="#ededed",
  32. border_radius="1em",
  33. box_shadow="lg",
  34. ),
  35. padding_y="5em",
  36. font_size="2em",
  37. text_align="center",
  38. )
  39. # Add state and page to the app.
  40. app = rx.App(state=State)
  41. app.add_page(index, title="Counter")
  42. app.compile()