初めまして
streamlitってすごいですよね。Pythonだけで簡単なWebアプリケーションを作成できちゃいます。
どうも初めまして！株式会社 Panta Rheiでデータ周りやプロダクト関連、CEOなんかをやっているかず(a.k.a pandasista)と申します！
streamlit-option-menuが良い
Webアプリケーションでは、必ずと言っていいほど存在する「左側サイドバー」。結構便利ですね。
しかしstreamlitでは標準でサイドバーを実装すると、ちょっとだけ癖を要します。
st.columnsを用いた画面分割なんかもできますが、
サイドバーというよりはただの縦分割、といった感じ。
st.sidebarとstreamlit-option-menuを使えばいい感じに左側サイドバーを設定できます！
もちろん幅をドラッグドロップで変更できたり。
インストール
普通に
pip install streamlit-option-menu
で大丈夫です。
実装
with st.sidebar:
selected = option_menu(
menu_title="左側サイドバー！",
options=["hoge", "huga", "foo", "bar"],
icons=["house", "search"],
menu_icon="cast",
default_index=0,
orientation="vertical",
styles={
"container": {"padding": "0!important", "background-color": "#ffffff"},
"icon": {"color": "red", "font-size": "15px"},
"nav-link": {"font-size": "15px", "text-align": "left", "margin": "0px", "--hover-color": "#7d7d7d", "color": "black"},
"nav-link-selected": {"background-color": "white"},
}
)
こんな形で実装します。
| 設定項目 | 概要 |
|---|---|
| menu_title | メニュー上部にあるタイトル |
| options | サイドバーの項目。selectedにはこの中の要素が格納される |
| icons | 各option文字の左側に表示されるアイコン。ここから自由に選択できる |
| menu_icon | タイトルの左側に表示されるアイコン名 |
| default_index | 最初に選択されるoptionのインデックス |
| orientation | オプションの表示の仕方が縦か横か |
| style | CSSの細かい設定をDICT形式で指定 |
が設定できます。他の設定項目は公式Githubをご覧ください。
痒いポイント
PCの設定がライトモードだと綺麗に表示されるのですが、ダークモードでも色が白のままで変化しません。
ここが痒いところ。(CSSの設定でどうにかできる...?)
Streamlit使うというときは相場デザインの細かい指定をしない時だと思うので、そんな懸案事項にはならないです。が、小生はダークモードがデフォなのでちょっとだけ見にくさがあるなあと思ったり。
紹介
株式会社 Panta Rheiでは「Everything Analysable」を標榜とし、世の中にあるあらゆる定性的な対象をAIによって定量化する事業をおこなっております。
AIに召し上がっていただく綺麗なデータを作る、データフローを整形するなどの課題や、そもそものAIの内製化等、ご相談があればぜひご一報ください！
よろしくお願いします！