streamlitでのページ切替方法(st.sidebar)

スポンサーリンク

streamlitのアーキテクチャは単一のページでコンテンツの切替を行うSPA(Single Page Application)が採用されています。Vue.jsやReactなどでもSPAが採用されており最近のトレンドになっています。

SPAで複数のページを切り替えながら表示させる方法は、サイドバーにセレクトボックスやラジオボックスなどを設置して切り替えるのが一般的です。Streamlitならst.sidebarで簡単にサイドバーを表示することができます。

当記事はStreamlitのサイドバーの機能を使って、ページを切り替え複数のページが表示できる方法を紹介したいと思います。

【2022/6/6 追記】
streamlit公式ページからマルチページの新機能が追加されました。これからStreamlitでマルチページを作りたいならこちらのほうがおすすめです。

サイドバー(st.sidebar)にセレクトボックスを配置

import streamlit as st
#ワイド表示
st.set_page_config(layout="wide")
#セレクトボックスのリストを作成
pagelist = ["page1","page2"]
#サイドバーのセレクトボックスを配置
selector=st.sidebar.selectbox( "ページ選択",pagelist)
if selector=="page1":
    if st.button('ページ1ボタン'):
        st.title("ページ1のタイトル")
elif selector=="page2":
    if st.button('ページ2ボタン'):
        st.title("ページ2のタイトル")

補足

7行目のst.sidebar.selectbox(ラベル,リスト)で、サイドバーにセレクトボックスを配置してセレクトボックスにpagelist = [“page1″,”page2”]のリストを表示させています。

8~13行目で選択したセレクトボックスの値がpage1の場合とpage2の場合でページを切り替えています。

ここではpage1の場合は、ページ1のボタンを表示してボタンを押すとページ1用のタイトルが表示されます。page2の場合も同様にページ2用のボタンとタイトルが表示されます。

サイドバーにページ選択用セレクトボックスを配置

ページ1を選択

ページ2を選択

サイドバーにラジオボックスを配置

ページ選択数が多い場合は、セレクトボックスが一番有効だと思いますが、ページ選択数が固定かつ少ない場合はラジオボックスもおすすめです。

コードも5行目のselectboxradioに変更するだけです。

import streamlit as st
st.set_page_config(layout="wide")
pagelist = ["page1","page2"]

selector=st.sidebar.radio( "ページ選択",pagelist)
if selector=="page1":
    if st.button('ページ1ボタン'):
        st.title("ページ1のタイトル")
elif selector=="page2":
    if st.button('ページ2ボタン'):
        st.title("ページ2のタイトル")

他にもサイドバーには、ボタンを配置したり、グラフや表を表示することも可能です。
条件などによってページを切り替えたい場合は簡単にページ切り替え画面を作れるので便利です。

コメント

タイトルとURLをコピーしました