88 lines
2.6 KiB
Markdown
88 lines
2.6 KiB
Markdown
```python exec
|
|
from pcweb.pages.docs import components
|
|
from pcweb.pages.docs.library import library
|
|
import reflex as rx
|
|
```
|
|
|
|
# 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.
|
|
|
|
## Component Basics
|
|
|
|
Components are made up of children and props.
|
|
|
|
```md definition
|
|
# Children
|
|
* Text or other Reflex components nested inside a component.
|
|
* Passed as **positional arguments**.
|
|
|
|
# Props
|
|
* Attributes that affect the behavior and appearance of a component.
|
|
* Passed as **keyword arguments**.
|
|
```
|
|
|
|
Let's take a look at the `rx.text` component.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```md alert success
|
|
Regular Python data types can be passed in as children to components.
|
|
This is useful for passing in text, numbers, and other simple data types.
|
|
```
|
|
|
|
## Another Example
|
|
|
|
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.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```md alert info
|
|
# You can find all the props for a component by checking its documentation page in the [component library]({library.path}).
|
|
```
|
|
|
|
## Pages
|
|
|
|
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.
|
|
|
|
```python
|
|
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`.
|