[Streamlit] st.sidebar() 를 option_menu()사용해서 꾸미기

st.sidebar() 를 option_menu()사용해서 꾸미는 방법

 

1. option_menu() 라이브러리 설치 및 임포트 해준다

- 설치하기

pip install streamlit-option-menu

https://pypi.org/project/streamlit-option-menu/

streamlit-option-menu

- 임포트 하기

from streamlit_option_menu import option_menu

 

2. with 함수랑 같이 sidebaer 를 사용해준다

 with st.sidebar :
        st.write(' ')

 

3. option_menu() 를 사용해 안에 사용하고 싶은 아이콘을 넣어준다

- 원하는 아이콘 고를 수 있는 사이트

https://icons.getbootstrap.com/

Bootstrap Icons

-  원하는 아이콘 고르고, 아이콘 이름만 가져오면 된다.

아이콘 이름 가져오기

    with st.sidebar :
        st.write(' ')
        choice = option_menu(' ', menu,
        		# 마음에 드는 아이콘 이름 넣어주기
                             icons=['아이콘1','아이콘2','아이콘3'],
                             menu_icon='메뉴아이콘1', default_index=0 )

 

 4. styles = 를 통해 더 꾸며 주고 싶다면 사용한다

    with st.sidebar :
        st.write('  ')
        choice = option_menu(' ', menu,
                             icons=['아이콘1','아이콘2','아이콘3'],
                             menu_icon='메뉴아이콘1', default_index=0 ,
                             # 스타일 사용
                             styles={
        # 슬라이드바 꾸미기
        "container": {"padding": "5!important", "background-color": "#fafafa"},
        # 메뉴 상자 꾸미기
        "nav-link": {"font-size": "16px", "text-align": "left", "margin":"0px", "--hover-color": "#fff"},
        # 눌렀을때 보이는 상자 색 꾸미기
        "nav-link-selected": {"background-color": "#7588AF"}})

 

내가 꾸민 사이드 바 결과!

- 아이콘은 icons=['house','bi bi-clipboard2-data','bi bi-chat-heart'] 사용, 메뉴아이콘은 menu_icon='bi bi-list' 사용

- 사진이랑 텍스트까지 입력했다

 

    menu = ['메인화면','생활과 수면의 관계','나의 수면 건강 확인하기']
    img_side = Image.open('./image/그림1.png')
    with st.sidebar :
        st.write('# 💤 수면 건강 예측하기 💤')
        st.image(img_side, use_column_width=True)
        choice = option_menu(' ', menu,
                             icons=['house','bi bi-clipboard2-data','bi bi-chat-heart'],
                             menu_icon='bi bi-list', default_index=0,
                             styles={
        "container": {"padding": "5!important", "background-color": "#fafafa"},
        "nav-link": {"font-size": "16px", "text-align": "left", "margin":"0px", "--hover-color": "#fff"},
        "nav-link-selected": {"background-color": "#7588AF"}})