5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Streamlit】レイアウト(サイドバー/2カラムレイアウト/エクスパンダー)

Posted at

事前準備

必要なライブラリのインポート

import streamlit as st

サイドバー

name = st.sidebar.text_input('あなたの名前は?')
age = st.sidebar.slider('あなたの年齢は?', 0, 100, 10)

'私の名前は', name, 'です。'
'私の年齢は', age, '歳です。'

image.png

image.png

2カラムレイアウト

left_column, right_column = st.beta_columns(2)
button = left_column.button('右カラムに文字を表示')
// buttonが押されたら
if button:
    right_column.write('ここは右カラムです')

image.png

image.png

エクスパンダ

expander1 = st.expander('問い合わせ')
expander1.write('問い合わせ内容を書く')
expander2 = st.expander('問い合わせ')
expander2.write('問い合わせ内容を書く')
expander3 = st.expander('問い合わせ')
expander3.write('問い合わせ内容を書く')

image.png

image.png

プレグレスバー

必要なライブラリをインポート

import time

静的

'スタート'

latest_iteration = st.empty()
bar = st.progress(30)

image.png

動的

'スタート'

latest_iteration = st.empty()
bar = st.progress(0)

for i in range(100):
    latest_iteration.text(f'Interation {i+1}')
    bar.progress(i + 1)
    // 実行スピード
    time.sleep(0.1)

expander1 = st.expander('問い合わせ')
expander1.write('問い合わせ内容を書く')
expander2 = st.expander('問い合わせ')
expander2.write('問い合わせ内容を書く')
expander3 = st.expander('問い合わせ')
expander3.write('問い合わせ内容を書く')

自動で値が増えていきます。

image.png

image.png

100になるとプレグレスバー以下の処理が実行されます

image.png

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?