本篇旨在測試 Streamlit 的擴展器函式 st.expander(), 此元件是一個可展開與收合的可見容器 (預設是收合), 通常用來將較次要或補充性質的訊息放在此容器裡, 讓使用者自行選擇是否要展開來檢視內容; 另外, 當網頁包含很多元件時, 可以把同一組的元件 (例如文字, 圖表, 選單, 或表單欄位等) 放進 st.expander() 容器中收納, 使用者需要時再自行點開來操作, 這樣便可透過有系統地分類顯示網頁的分組結構來達到節省頁面空間效果, 是一個很有用的版面配置工具.
st.expander(label, expanded=False)
參數 label 用來設定擴展器標題 (支援 Markdown 語法的字串); 參數 expanded 用來設定擴展器之狀態 (True/False, 預設為收合 False),
st.expander() 的傳回值是一個具有可展開收合功能的 DeltaGenerator 容器物件, 幾乎所有 st.xxx() 函式的名稱都可以作為此容器物件的方法名稱來呼叫以添加 UI 元件, 這是第一種用法 :
expander=st.expander('顯示詳細內容')
expander.xxx() # 在擴展器中添加 st.xxx() 元件
第二種用法是搭配 with 語法, 在 with 區塊內直接呼叫 st.xxx() 函式來添加 UI 元件 :
with st.expander('顯示詳細內容'):
st.xxx() # 在擴展器中添加 st.xxx() 元件
例如 :
測試 1 : st.expander() 的第一種用法 [看原始碼]
# st-expander-test-1.py
import streamlit as st
st.subheader('st.expander() 容器元件測試')
expander=st.expander('可愛的貓咪')
expander.write('我的貓咪相簿')
expander.image('https://yaohuang1966.github.io/images/cat1.jpg', width=200)
expander.image('https://yaohuang1966.github.io/images/cat2.jpg', width=200)
結果如下, 擴展器預設是收合的 :
點右方向下按鈕就會展開顯示其內容 :
下面是改用 with 語法來寫 :
測試 2 : st.expander() 的第二種用法 [看原始碼]
# st-expander-test-2.py
import streamlit as st
st.subheader('st.expander() 容器元件測試')
with st.expander('可愛的貓咪', expanded=True)
st.write('我的貓咪相簿')
st.image('https://yaohuang1966.github.io/images/cat1.jpg', width=200)
st.image('https://yaohuang1966.github.io/images/cat2.jpg', width=200)
此例在建立擴展器時傳入 expanded=True 參數使其初始化時預設是展開的 :
按右方向上鈕收合 :
# st-expander-test-3.py
import streamlit as st
st.subheader('📜 唐詩選集')
with st.expander('《靜夜思》李白'):
st.markdown('''
床前明月光，
疑是地上霜。
舉頭望明月，
低頭思故鄉。
''')
with st.expander('《登鸛鵲樓》王之涣'):
st.markdown('''
白日依山盡，
黃河入海流。
欲窮千里目，
更上一層樓。
''')
with st.expander('《春曉》孟浩然'):
st.markdown('''
春眠不覺曉，
處處聞啼鳥。
夜來風雨聲，
花落知多少。
''')
此例用 with 語法建立了三個擴展器物件, 預設都是收合的 :
逐一點擊展開後結果如下 :
很可惜的是, Streamlit 的擴展器不提供展開與收合狀態的讀取與動態設定, 因此目前無法實作類似 Bootstrap 的 Accordion (手風琴) 元件的功能 (同時只有一個擴展器展開).
沒有留言 :
張貼留言