Select
跳過 RangeSlider 的部分，select比較常用到。
先定義選項。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| options: List[str] = ["Option 1", "Option 2", "Option 3"]
class SelectState(rx.State):
option: str = "No selection yet."
def index():
return rx.vstack(
rx.heading(SelectState.option),
rx.select(
options,
placeholder="Select an example.",
on_change=SelectState.set_option,
color_schemes="twitter",
),
)
|
這時候網頁應該會出現一個可供選擇的下拉式選單，不過官網有給出一個比較漂亮點的選單樣式。
1
2
3
4
5
6
7
8
9
10
11
| def index():
return rx.vstack(
rx.heading(SelectState.option),
rx.select(
options,
placeholder="Select an example.",
on_change=SelectState.set_option,
bg="#68D391",
border_color="#38A169",
),
)
|
跑出來長這樣
Slider
不多說，這邊直接上碼。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| class SliderCombo(rx.State):
value: int = 50
color: str = "black"
def set_start(self):
self.color = "#68D391"
def set_end(self):
self.color = "#F56565"
def index():
return rx.vstack(
rx.heading(
SliderCombo.value, color=SliderCombo.color
),
rx.slider(
on_change_start=SliderCombo.set_start,
on_change=SliderCombo.set_value,
on_change_end=SliderCombo.set_end,
),
width="100%",
)
|
官網上的截圖，途中拉動中間圓圈會使數字變換顏色。
如果你想要在滑動的時候看見狀態更改，就使用on_change，如果是在挪動滑桿結束後才要呈現結果，則使用on_change_end，裡面有許多參考或是種類可以做使用。