# file name : reidai10_1.py
# reidai10_1 StreamlitのさまざまなUIコンポーネント

import streamlit as st

st.set_page_config('StreamlitのさまざまなUI')
st.title('StreamlitのさまざまなUI')

# ====== サイドバー======
st.sidebar.header('サイドバー')
name      = st.sidebar.text_input('氏名の入力')
id        = st.sidebar.text_input('idの入力(4桁)',max_chars=4) # 最大桁数
byear     = st.sidebar.number_input('誕生年（西暦）の入力（数値）',
                        min_value = 1900, max_value=2050,     # 最小値、最大値
                        value=1995,step=1)                    # 初期値、刻み幅
color     = st.sidebar.color_picker('好きな色','#4169e1')    # 16進数コード

# 入力結果の自動表示
st.sidebar.subheader('入力結果')
st.sidebar.write(f'氏名：{name}, ID：{id}')
st.sidebar.write(f'誕生年：{byear}, 色：{color}')

# ====== メイン画面======
st.subheader('クリックしてみよう！ ' )

# 単一選択
trip      = st.selectbox(
                '次に旅行したい場所は？ ',
                ['パリ','ロンドン','ミラノ','軽井沢','イスタンブール'],
                index=1)               # 0から始まる初期値のインデックス
st.write(f'選択した場所：{trip}')

# 複数選択
hobbies   = st.multiselect('趣味を選んでください（複数選択可）',
                ['スノボ','チェロ','旅行','研究','プログラミング'])
st.write(f'選択中の趣味: {hobbies}')

# スライダー
value     = st.slider('おなかのすき具合',0,100,50)
st.write(f'おなかのすき具合: {value}%')

# ラジオ
plang     = st.radio( label='Pythonの次に勉強したいコンピュータ言語は？ ',
                options=('C言語','Java言語','Javascript','なし'),
                index=0,                # 初期状態の要素のインデックス
                horizontal=True)        # 選択肢を横並びに表示
st.write(plang + 'が選択されました！ ')

# チェックボックス
go        = st.checkbox('実行する？ ')
if go:
    st.success('実行中です...')           # 通知：成功

# ボタン
if st.button('クリックq(^'):
    st.info('ボタンクリックされました！ ')  # 通知：情報