Audio
url 可以是內部連結，也可以是外部連結。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| def index():
return rx.audio(
url="https://www.youtube.com/embed/dQw4w9WgXcQ",
width="640px",
height="auto",
)
|
Avatar
頭像，聊天室很常會見到的東西。
google 直接翻譯會變成阿凡達…不知道這怎麼翻的。
1
2
3
4
5
6
| def index():
return rx.avatar_group(
rx.avatar(name = 'xia', size = 'xl'),
rx.avatar(name = 'xia', size = 'xl'),
rx.avatar(name = 'xia', size = 'xl')
)
|
這裡是group的展示圖
一般聊天室在線上的示意圖的話…就是在頭像下方有個綠綠的標。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| def index():
return rx.avatar_group(
rx.avatar(
rx.avatar_badge(
box_size = '1em',
bg = 'green.500',
border_color = 'green.500'
),
name = 'xia'
),
rx.avatar(
rx.avatar_badge(
box_size = '1em',
bg = 'green.500',
border_color = 'green.500'
),
name = 'xia'
)
)
|
示意圖如下
不過官方也有提供最大數，max。
1
2
3
4
5
6
7
8
9
10
11
| def index():
return rx.avatar_group(
rx.avatar(name = 'xia'),
rx.avatar(name = 'xia'),
rx.avatar(name = 'xia'),
rx.avatar(name = 'xia'),
rx.avatar(name = 'xia'),
rx.avatar(name = 'xia'),
size = 'md',
max_ = 3,
)
|
示意圖如下。
Icon
reflex也有提供一個lib，這裡就隨便放個例子。
1
2
3
4
| def index():
return rx.icon(
tag = "edit",
)
|
這個地方請直接查看官網或是點開來看icon的內碼。
Image
1
2
3
4
5
6
7
8
| def index():
return rx.image(
src = '/1000.jpg',
width = '1000px',
height = '1000px',
)
|
這裡的assets資料夾如下
其中有個看起來很奇特的檔案，點開他。
[ZoneTransfer]用來指示接下來的參數屬於某個特定的區域或部分。
ZoneId=3這是區域的ID或識別號。
ReferrerUrl=https://www.pixiv.net/參考的url，這裡指向了pivix這個網站
HostUrl=https://i.pximg.net/img-master/img/2023/07/05/21/31/54/109649553_p0_master1200.jpg指向資源的位置
Video
這個地方在前面有提過，就不再重複介紹了。
喔對了，如果要引用json或是txt，可以參考我的
1
2
| with open('./assets/Your_json_or_txt_file.json', 'r') as file:
data = json.load(file)
|
阿檔案一樣放在assets資料夾內。