這個部分應該簡單明瞭，就直接上碼了。
1
2
3
4
5
6
7
8
| class NumberInputState(rx.State):
number: int
def index():
return rx.number_input(
on_change=NumberInputState.set_number,
)
|
引腳輸入，可以自己定義格子(輸入框框)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| class PinInputState(rx.State):
pin: str
def index():
return rx.vstack(
rx.heading(PinInputState.pin),
rx.box(
rx.pin_input(
length=4,
on_change=PinInputState.set_pin,
mask=True,
),
),
)
|
不過一般來說基本上不會對格子做甚麼奇妙的設計，大抵上就是bg、color、shadow等…css的部分可以直接寫在pin_input內。
1
| rx.pin_input_field(border_radius="md"),
|
RadioGroup
有寫過app的應該對這個都很熟悉，也直接上碼吧。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
from typing import List
options: List[str] = ["Option 1", "Option 2", "Option 3"]
class RadioState(rx.State):
text: str = "No Selection"
def index():
return rx.vstack(
rx.badge(RadioState.text, color_scheme="green"),
rx.radio_group(
options,
on_change=RadioState.set_text,
),
)
|
這個部分也很簡單明瞭，rx.badge這個東西有點奇妙，找到所謂的元件後會是react.ui，也就看一看就可以了。
至於rx.badge的參數，基本上是兩個，一個是var，另一個是color。
設定預設值的時候請用default_value。
1
2
3
4
5
6
7
8
| def index():
return rx.vstack(
rx.radio_group(
options,
default_value="Option 2",
default_checked=True,
),
)
|
可以使用 spacing參數來設定單選按鈕的間距。
1
2
3
4
5
6
7
8
| return rx.radio_group(
rx.radio_group(
rx.hstack(
spacing = "2em",
),
),
)
|