🪟 Streamlit オーバーレイ＆コンテナ ― モーダル・ポップオーバー・タブ・折りたたみ

画面中央に開くモーダルダイアログ。@st.dialog("タイトル") で関数を装飾し、その関数を呼ぶと開く。中に入力やボタンを置けて、確認・フォーム・詳細表示に使う。v1.37 で GA。

@st.dialog("確認")
def confirm():
    st.write("削除してよろしいですか？")
    if st.button("OK", type="primary"):
        st.rerun()

if st.button("削除"):
    confirm()

Reactとの比較：モーダルは React なら開閉state・フォーカストラップ・背景クリック制御を組む領域。Streamlit はデコレータ＋関数呼び出しで完結する。

トリガーボタンの近くに開く小さなパネル。with st.popover("ラベル"): の中に置いた要素が、クリックで開くパネルに表示される。軽い設定や補助操作に。v1.32 で追加。

with st.popover("設定"):
    st.checkbox("通知")
    st.slider("音量", 0, 100, 60)

Reactとの比較：ポップオーバーは位置調整・外側クリック判定を組む領域。Streamlit は with ブロックで中身を書くだけ。

横並びのタブで内容を排他的に切り替えるコンテナ。st.tabs([...]) が返すタブオブジェクトに with で中身を書く。

t1, t2 = st.tabs(["概要", "詳細"])
with t1:
    st.write("概要")

Reactとの比較：タブUIは自前かライブラリ。Streamlit は配列を渡すだけで切替まで動く。

クリックで開閉する折りたたみセクション。expanded=True で初期展開。長い補足や詳細を隠しておける。v1.58 で type="compact" も追加。

with st.expander("詳細を表示", expanded=True):
    st.write("中身")

Reactとの比較：アコーディオン的な開閉を1行で。

横並びレイアウト。st.columns(3) で3等分、st.columns([2,1]) で比率指定。返ったカラムに要素を置く。

c1, c2, c3 = st.columns(3)
c1.metric("売上", "¥1.2M")

Reactとの比較：Flex / Grid で組む横並びレイアウトを、関数1つで。

要素をまとめる入れ物。border=True でカード状の枠が付く。関連する要素のグルーピングに。

with st.container(border=True):
    st.write("まとまり")

Reactとの比較：<div> でのグルーピングを with ブロックで。