Ui
/
Overview
Components are the building blocks for your app's user interface (UI). They are the visual elements that make up your app, like buttons, text, and images.
Components are made up of children and props.
Let's take a look at the rx.text
component.
Hello World!
rx.text("Hello World!", color="blue", font_size="1.5em")
Here "Hello World!"
is the child text to display, while color
and font_size
are props that modify the appearance of the text.
Now let's take a look at a more complex component, which has other components nested inside it. The rx.hstack
component is a container that arranges its children horizontally.
rx.hstack(
# Static 50% progress
rx.chakra.circular_progress(
rx.chakra.circular_progress_label(
"50", color="green"
),
value=50,
),
# "Spinning" progress
rx.chakra.circular_progress(
rx.chakra.circular_progress_label(
"∞", color="rgb(107,99,246)"
),
is_indeterminate=True,
),
)
Some props are specific to a component. For example, the value
prop of the rx.chakra.circular_progress
component controls the progress bar's value.
Styling props like color
are shared across many components.
Reflex apps are organized into pages. Pages link a specific URL route to a component.
You can create a page by defining a function that returns a component. By default, the function name will be used as the path, but you can also specify a path explicitly.
def index(): return rx.text("Root Page") def about(): return rx.text("About Page") app = rx.App() app.add_page(index, route="/") app.add_page(about, route="/about")
In this example we add a page called index
at the root route.
If you reflex run
the app, you will see the index
page at http://localhost:3000
.
Similarly, the about
page will be available at http://localhost:3000/about
.
Did you find this useful?