前回までの記事
ページに追加する要素を一通りまとめた。
たいていのデザインはst.markdown()を作成できるが、
レスポンスを含むUIは、streamlit標準で十分実装できる。
6. レイアウト
| 用途 | 関数 |
|---|---|
| サイドバー | st.sidebar.xxx |
| カラム・段組み | st.columns() |
| タブ表示 | st.tabs() |
| トグル | st.expander() |
| コンテナ | st.container() |
| プレースホルダ | st.empty() |
サンプル：サイドバー
st.sidebar.write("st.sidebarの例")
game = st.sidebar.selectbox(
"ゲームを選んでください",
["カタン", "ドミニオン", "カルカソンヌ"]
)
折り畳み可能なサイドバーを利用できる。テキストだけでなく入出力も組み込むことができるので、常に表示する必要のない情報・一時的な入力などはここに入れておくと便利。
サンプル：カラム・段組み
col1, col2 = st.columns([2,1])
with col1:
st.subheader("ゲーム概要")
st.write(f"{game} は世界三大ボードゲームの一つです")
with col2:
st.subheader("メモ")
st.text_area("メモを書くエリア")
要素を横並びにしたい場合はcolumnsを利用して表示。
2段組だけでなく、3・4段組の表示も可能や、比率を変えた段組みも表示可能。
サンプル：タブ表示
tab1, tab2 = st.tabs(["ルール", "戦略"])
with tab1:
st.write(f"{game} のルール説明をここに書く")
with tab2:
st.write(f"{game} の戦略ポイントをここに書く")
タブ表示も要素を足すだけで実装が可能。
ただし、縦にタブを並べるなどオプションが無いため、横並び以外での表示がしたい場合はst.markdownのCSSを利用して実装する必要がある。
サンプル：トグル
with st.expander("詳細説明(トグル表示)",expanded=True):
st.write("必要なときだけ開いて読む詳細情報です。")
詳細情報を書き込む時に利用。タイトルに概要を入れて中に詳細を入れるイメージ。
オプションは「初期状態をどうするか」の設定のみで、高級なことはできない。
サンプル：コンテナ
box = st.container()
box.header("カタン")
box.write("ルール：陣取り × 資源 × 交渉")
box.write("戦略：序盤は資源バランスを意識する")
if st.button("記述を追加する追加する"):
box.write("追加内容")
UI上からはあまり利点が分かりづらいが、コーディングの面で役に立つ。
streamlitはコードの上から順に要素を描写していく都合上、後からその位置に戻って書き足すことはできない。
st.containerを利用すると、指定した位置をブロック化して後から中身を追加・更新できるので、制約を回避したコードが出力できる。
サンプル：一時プレースホルダ
placeholder = st.empty()
if st.button("おすすめコメントを表示"):
placeholder.success(f"今遊ぶなら **{game}** がおすすめ")
else:
placeholder.info("押すとここにメッセージが表示されます")
ボタンを押すと、success表示に切り替わる。使い方のイメージは、領域を事前に確保していて条件分岐で表示を切り替えたいに呼び出して利用する。