本篇旨在測試 Streamlit 的側邊欄元件 st.sidebar, 注意, 此元件是 Streamlit 模組的一個屬性而不是函式, 其屬性值與呼叫 st.container() 或 st.empty() 函式的傳回值一樣, 都是 DeltaGenerator 類別的容器物件, 但 st.sidebar 的 DeltaGenerator 物件功能不同, 它是專門用來製作側邊欄的可見靜態容器 (無法清空), 通常做為表單, 導覽, 或設定選單之用.
本系列所有測試文章參考 :
側邊欄的用法有兩種, 第一種是直接用 st.sidebar 容器物件呼叫 UI 元件方法, 幾乎所有 st.xxx() UI 元件函式的名稱都可以作為此容器物件的方法名稱來呼叫 :
st.sidebar.xxx() # 在側邊欄加入 st.xxx() 元件
st.sidebar.yyy() # 在側邊欄加入 st.yyy() 元件
st.sidebar.zzz() # 在側邊欄加入 st.zzz() 元件
第二種用法是使用 with 語法 :
with st.sidebar:
st.sidebar.xxx() # 在側邊欄加入 st.xxx() 元件
st.sidebar.yyy() # 在側邊欄加入 st.yyy() 元件
st.sidebar.zzz() # 在側邊欄加入 st.zzz() 元件
Streamlit 的側邊欄採用響應式 (RWD) 設計, 在大畫面螢幕時預設顯示側邊欄, 其寬度會隨瀏覽器頁面寬度自動調節 (預設為 21%), 也可以拖曳側邊欄與主頁面的邊界調整兩邊寬度, 而且當側邊欄元件過多超過瀏覽器高度時會自動出現垂直捲軸; 在小畫面螢幕例如手機預設會將側邊欄隱藏為漢堡選單.
例如 :
測試 1 : st.sidebar 側邊欄的第一種用法 [看原始碼]
# st-sidebar-test-1.py
import streamlit as st
# 側邊欄內容
st.sidebar.title('側邊欄')
st.sidebar.write('這是側邊欄的內容')
if st.sidebar.button('點擊我'):
st.sidebar.write('你點擊了側邊欄按鈕！')
# 主頁面內容
st.title('主頁面')
st.write('這是主頁面的內容。')
此例會將頁面切割成左方的側邊欄 (寬度較小, 約佔頁面總寬度之 21%) 與右方的主頁面 (占用剩餘寬度), 預設側邊欄是顯示的, 按側邊欄右上角的向左鍵可收合隱藏側邊欄 :
收合後按主頁面左上角的向右鍵又可展開側邊欄 :
按側邊欄按鈕結果如下 :
下面範例是使用 with 語法的第二種用法 :
測試 2 : st.sidebar 側邊欄的第二種用法 [看原始碼]
# st-sidebar-test-2.py
import streamlit as st
# 側邊欄內容
with st.sidebar:
st.title('側邊欄')
st.write('這是側邊欄的內容')
if st.button('點擊我'):
st.write('你點擊了側邊欄按鈕！')
# 主頁面內容
st.title('主頁面')
st.write('這是主頁面的內容。')
結果與上面範例一樣.
下面是利用側邊欄當導覽頁的範例 :
測試 3 : 利用側邊欄當導覽頁 [看原始碼]
# st-sidebar-test-3.py
import streamlit as st
import pandas as pd
# 側邊欄：導覽選單
with st.sidebar:
st.header('導航')
page=st.radio('選擇頁面：', ['首頁', '資料', '關於'])
# 主頁面：根據側邊欄導覽頁的選擇顯示內容
st.title('應用程式')
if page == '首頁':
st.write('歡迎來到首頁！這是應用程式的起始頁面。')
elif page == '資料':
st.write('這裡是資料頁面，可以顯示資料表或圖表。')
st.write(pd.DataFrame({'欄位1': [1, 2, 3], '欄位2': [4, 5, 6]}))
elif page == '關於':
st.write('這是關於頁面，介紹應用程式的資訊。')
此例使用一個 Radio 選項圓鈕來作為導覽元件, 然後利用其傳回值來決定要如何渲染主頁面內容, 因單選圓鈕預設索引為 0, 因此預設會傳回第一個選項值 '首頁' :
切換到第二頁 '資料' :
切到第三頁 :
可見側邊欄是一個排版的好工具.
沒有留言 :
張貼留言