Streamlit 學習筆記 : 容器與版面配置元件 (四) 頁籤容器

本篇旨在測試 Streamlit 的頁籤容器函式 st.tabs(), 此元件既是一個可見的容器, 它會將網頁版頁以活頁簿方式分成多個頁籤, 每一個分頁都是一個子容器, 可用來放置不同的 UI 元件, 此容器常用來為有多組不同分類內容的複雜網頁排版. 

本系列所有測試文章參考 :

# Streamlit 學習筆記索引

呼叫 st.tabs() 函式並傳入必要參數 tabs 會建立一個頁籤容器元件, 其參數結構如下 : 

st.tabs(tabs)

參數 tabs 是一個表示各頁籤標題的字串串列 (支援 Markdown 語法), 傳回值是一個 DeltaGenerator 容器物件串列, 每一個 DeltaGenerator 容器物件對應一個分頁容器. 與其他容器不同的是, 頁籤容器必須使用 with 語法在區塊內呼叫 st.xxx() 函式來為頁籤添加 UI 元件 :

tab1, tab2=st.tabs(['頁籤1', '頁籤2'])

with tab1: 

    st.xxx()  # 加入 UI 元件

    ...

with tab2:

    st.yyy()  # 加入 UI 元件

st.tabs() 預設開啟顯示第一個頁籤內容, 目前尚未支援指定預設頁籤的參數, 也不支援動態切換頁籤, 例如 :

測試 1 : 預設的 st.tabs() 頁籤容器 [看原始碼]   

# st-tabs-test-1.py

import streamlit as st

st.subheader('📜 唐詩選集')

tab1, tab2, tab3=st.tabs(['李白', '杜甫', '王之涣'])

with tab1:

    st.markdown('《靜夜思》\n\n床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。')

with tab2:

    st.markdown('《春望》\n\n國破山河在，城春草木深。感時花濺淚，恨別鳥驚心。')

with tab3:

    st.markdown('《登鸛鵲樓》\n\n白日依山盡，黃河入海流。欲窮千里目，更上一層樓。')

預設會開啟並顯示第一個頁籤 :

切換至第二頁籤 :

切換至第三頁籤 :

我們可以將上例中的唐詩寫在字典裡, 然後用迴圈來產生頁籤結構, 例如 : 

測試 2 : 使用迴圈來產生頁籤結構 [看原始碼]   

# st-tabs-test-2.py

import streamlit as st

st.subheader('📜 唐詩選集')

poems={

    '李白': '《靜夜思》\n\n床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。',

    '杜甫': '《春望》\n\n國破山河在，城春草木深。感時花濺淚，恨別鳥驚心。',

    '王之涣': '《登鸛鵲樓》\n\n白日依山盡，黃河入海流。欲窮千里目，更上一層樓。'

    }

tabs=st.tabs(list(poems.keys()))

for tab, (author, content) in zip(tabs, poems.items()):

    with tab:

        st.markdown(content)

此例將唐詩以作者為鍵寫成一個字典, 然後將鍵串列傳入 st.tabs() 來建立頁籤容器, 最後將頁籤容器與唐詩的項目用 zip() 對應為 tuple, 用迴圈迭代時將唐詩內容加入每個頁籤, 結果與上面範例完全相同.